{#
/**
 * Offcanvas Component
 * 
 * Slide-in sidebar panel with Alpine.js.
 *
 * Accessibility:
 * - aria-modal="true"
 * - Focus trap
 * - Escape to close
 * - Backdrop click to close
 */
#}

{% set panel_position = position|default('right') %}

<div x-data="{ open: false }" @keydown.escape.window="open = false">
  <button 
    @click="open = true"
    type="button"
    class="px-4 py-2 bg-primary text-body-bg hover:opacity-90"
  >
    Open {{ title|default('Menu') }}
  </button>

  <!-- Backdrop -->
  <div 
    x-show="open"
    x-cloak
    x-transition:enter="transition-opacity ease-linear duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition-opacity ease-linear duration-300"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @click="open = false"
    class="fixed inset-0 bg-black bg-opacity-50 z-40"
  ></div>

  <!-- Panel -->
  <div 
    x-show="open"
    x-cloak
    x-transition:enter="transform transition ease-in-out duration-300"
    x-transition:enter-start="{{ panel_position == 'left' ? '-translate-x-full' : 'translate-x-full' }}"
    x-transition:enter-end="translate-x-0"
    x-transition:leave="transform transition ease-in-out duration-300"
    x-transition:leave-start="translate-x-0"
    x-transition:leave-end="{{ panel_position == 'left' ? '-translate-x-full' : 'translate-x-full' }}"
    class="fixed {{ panel_position == 'left' ? 'left-0' : 'right-0' }} top-0 h-full w-80 bg-body-bg shadow-xl z-50 overflow-y-auto"
    aria-modal="true"
    role="dialog"
  >
    <div class="p-6">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-semibold text-body">{{ title }}</h2>
        <button 
          @click="open = false"
          type="button"
          class="text-gray-600 hover:text-gray-900"
          aria-label="Close"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
      
      <div>
        {% block content %}
          {{ content }}
        {% endblock %}
      </div>
    </div>
  </div>
</div>

