Offcanvas Component
   - id: string - Unique ID for the offcanvas (required)
   - title: string - Title text for the offcanvas header (required)
   - content: string|array - Content for the offcanvas body (required)
   - triggers: array - Array of trigger buttons/links, each with:
     - text: string - Text for the trigger (required)
     - type: string - Type of trigger (button, link) (default: button)
     - class: string - Additional CSS classes for the trigger (optional)
   - placement: string - Offcanvas placement (start, end, top, bottom) (default: start)
   - class: string - Additional CSS classes for the offcanvas (optional)
   - scroll: bool - Allow body scrolling (optional)
   - backdrop: bool - Show backdrop (optional)
   - static: bool - Static backdrop, doesn't close on click outside (optional)

    ThemedComponent::make("overlays/offcanvas")
	->content('value') //string|array - Content for the offcanvas body (required) (always set this first)
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->backdrop('value') //bool - Show backdrop (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes for the offcanvas (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->placement('value') //string - Offcanvas placement (start, end, top, bottom) (default: start)
	->scroll('value') //bool - Allow body scrolling (optional)
	->static('value') //bool - Static backdrop, doesn't close on click outside (optional)
	->text('value') //string - Text for the trigger (required)
	->title('value') //string - Title text for the offcanvas header (required)
	->triggers('value') //array - Array of trigger buttons/links, each with:
	->type('value') //string - Type of trigger (button, link) (default: button)
	->render();

// Basic offcanvas with button and link triggers
echo ThemedComponent::make('overlays/offcanvas')
    ->id('offcanvasExample')
    ->title('Offcanvas')
    ->content('
        <div>
          Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
        </div>
        <div class="dropdown mt-3">
          <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            Dropdown button
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </div>
    ')
    ->triggers([
        [
            'text' => 'Link with href',
            'type' => 'link',
            'class' => 'me-2'
        ],
        [
            'text' => 'Button with data-bs-target',
            'type' => 'button'
        ]
    ])
    ->render();

// Top placement
echo ThemedComponent::make('overlays/offcanvas')
    ->id('offcanvasTop')
    ->title('Top Offcanvas')
    ->content('This is a top-placed offcanvas.')
    ->placement('top')
    ->triggers([
        ['text' => 'Toggle top offcanvas']
    ])
    ->class('mb-3')
    ->render();

// End placement
echo ThemedComponent::make('overlays/offcanvas')
    ->id('offcanvasEnd')
    ->title('End Offcanvas')
    ->content('This is a right-placed offcanvas.')
    ->placement('end')
    ->triggers([
        ['text' => 'Toggle right offcanvas']
    ])
    ->class('mb-3')
    ->render();

// Bottom placement
echo ThemedComponent::make('overlays/offcanvas')
    ->id('offcanvasBottom')
    ->title('Bottom Offcanvas')
    ->content('This is a bottom-placed offcanvas.')
    ->placement('bottom')
    ->triggers([
        ['text' => 'Toggle bottom offcanvas']
    ])
    ->render();

// Enable body scrolling
echo ThemedComponent::make('overlays/offcanvas')
    ->id('offcanvasScroll')
    ->title('Enable Body Scrolling')
    ->content('Try scrolling the rest of the page while this offcanvas is open.')
    ->scroll(true)
    ->triggers([
        ['text' => 'Enable body scrolling']
    ])
    ->class('mb-3')
    ->render();

// Enable backdrop static
echo ThemedComponent::make('overlays/offcanvas')
    ->id('offcanvasStatic')
    ->title('Static Backdrop')
    ->content('Click the button below to toggle the static offcanvas. It will not close when clicking outside.')
    ->static(true)
    ->triggers([
        ['text' => 'Toggle static offcanvas']
    ])
    ->class('mb-3')
    ->render();

// Disable backdrop
echo ThemedComponent::make('overlays/offcanvas')
    ->id('offcanvasNoBackdrop')
    ->title('No Backdrop')
    ->content('Click the button below to toggle the offcanvas without backdrop.')
    ->backdrop(false)
    ->triggers([
        ['text' => 'Toggle offcanvas without backdrop']
    ])
    ->render();

{# Offcanvas Component
   - id: string - Unique ID for the offcanvas (required)
   - title: string - Title text for the offcanvas header (required)
   - content: string|array - Content for the offcanvas body (required)
   - triggers: array - Array of trigger buttons/links, each with:
     - text: string - Text for the trigger (required)
     - type: string - Type of trigger (button, link) (default: button)
     - class: string - Additional CSS classes for the trigger (optional)
   - placement: string - Offcanvas placement (start, end, top, bottom) (default: start)
   - class: string - Additional CSS classes for the offcanvas (optional)
   - scroll: bool - Allow body scrolling (optional)
   - backdrop: bool - Show backdrop (optional)
   - static: bool - Static backdrop, doesn't close on click outside (optional)
#}
{% set offcanvasId = content.id %}
{% for trigger in content.triggers %}
{% if trigger.type == 'link' %}
<a class="btn btn-primary {{ trigger.class|default('') }}" data-bs-toggle="offcanvas" href="#{{ offcanvasId }}" role="button" aria-controls="{{ offcanvasId }}">
  {{ trigger.text }}
</a>
{% else %}
<button class="btn btn-primary {{ trigger.class|default('') }}" type="button" data-bs-toggle="offcanvas" data-bs-target="#{{ offcanvasId }}" aria-controls="{{ offcanvasId }}">
  {{ trigger.text }}
</button>
{% endif %}
{% endfor %}

<div class="offcanvas offcanvas-{{ content.placement|default('start') }} {{ content.class|default('') }}" 
     tabindex="-1" 
     id="{{ offcanvasId }}" 
     aria-labelledby="{{ offcanvasId }}Label"
     {% if content.scroll %}data-bs-scroll="true"{% endif %}
     {% if content.backdrop == false %}data-bs-backdrop="false"{% endif %}
     {% if content.static %}data-bs-backdrop="static"{% endif %}>
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="{{ offcanvasId }}Label">{{ content.title }}</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    {% if content.content is iterable %}
      {% for item in content.content %}
        <div class="mb-3">{{ item|raw }}</div>
      {% endfor %}
    {% else %}
      {{ content.content|raw }}
    {% endif %}
  </div>
</div>