{#
/**
 * @file
 * Template for Booking Modal Block.
 *
 * This renders both the header button (if enabled) and the modal overlay/content.
 * Buttons with class 'open-booking-modal' anywhere on the page will open this modal.
 */
#}

{# Header Button (optional - appears in page_bottom region) #}
{% if show_header_button %}
  <div class="booking-header-button-wrapper hidden" data-booking-header-button>
    <button class="open-booking-modal inline-flex items-center justify-center px-5 py-2.5 3xl:px-6 3xl:py-3 3xl:text-lg bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors cursor-pointer">
      {{ header_button_text }}
    </button>
  </div>
{% endif %}

{# Modal Overlay #}
<div class="booking-modal-overlay fixed inset-0 bg-black/50 backdrop-blur-sm z-[60]" data-booking-overlay></div>

{# Modal Desktop #}
<div class="booking-modal-desktop fixed inset-0 z-[70] items-center justify-center p-4" data-booking-modal>
  <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">
    {# Modal Header #}
    <div class="flex items-center justify-between p-6 border-b border-gray-100 dark:border-slate-700">
      <div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ title }}</h3>
        {% if description %}
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ description }}</p>
        {% endif %}
      </div>
      <button class="close-booking-modal w-10 h-10 rounded-full hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center justify-center transition-colors cursor-pointer" data-booking-close>
        <svg class="w-5 h-5 text-gray-500" 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>

    {# Modal Body - Form #}
    <form class="p-6 space-y-4" data-booking-form>
      {% for field in fields %}
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            {{ field.label }}
            {% if field.required %}<span class="text-red-500">*</span>{% endif %}
          </label>
          {% if field.type == 'textarea' %}
            <textarea
              name="{{ field.name }}"
              placeholder="{{ field.placeholder }}"
              rows="3"
              {% if field.required %}required{% endif %}
              class="w-full px-4 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white dark:bg-slate-800 dark:text-white dark:placeholder-gray-400 resize-none"
            ></textarea>
          {% else %}
            <input
              type="{{ field.type }}"
              name="{{ field.name }}"
              placeholder="{{ field.placeholder }}"
              {% if field.required %}required{% endif %}
              class="w-full px-4 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white dark:bg-slate-800 dark:text-white dark:placeholder-gray-400"
            >
          {% endif %}
        </div>
      {% endfor %}

      <button type="submit" class="w-full px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors cursor-pointer">
        {{ submit_text }}
      </button>
    </form>
  </div>
</div>

{# Mobile Drawer #}
<div class="booking-drawer fixed inset-x-0 bottom-0 z-[70] lg:hidden" role="dialog" aria-modal="true" data-booking-drawer>
  <div class="booking-drawer-content bg-white dark:bg-slate-900 rounded-t-[20px] shadow-2xl max-h-[90vh] flex flex-col">
    {# Drag Handle #}
    <div class="booking-drawer-handle flex justify-center pt-4 pb-2 cursor-grab active:cursor-grabbing">
      <div class="w-12 h-1.5 bg-gray-300 dark:bg-slate-600 rounded-full"></div>
    </div>

    {# Drawer Header #}
    <div class="px-6 pb-4 border-b border-gray-100 dark:border-slate-700">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h3>
      {% if description %}
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ description }}</p>
      {% endif %}
    </div>

    {# Drawer Body - Form #}
    <form class="p-6 space-y-4 overflow-y-auto" data-booking-form-mobile>
      {% for field in fields %}
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            {{ field.label }}
            {% if field.required %}<span class="text-red-500">*</span>{% endif %}
          </label>
          {% if field.type == 'textarea' %}
            <textarea
              name="{{ field.name }}"
              placeholder="{{ field.placeholder }}"
              rows="3"
              {% if field.required %}required{% endif %}
              class="w-full px-4 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white dark:bg-slate-800 dark:text-white dark:placeholder-gray-400 resize-none"
            ></textarea>
          {% else %}
            <input
              type="{{ field.type }}"
              name="{{ field.name }}"
              placeholder="{{ field.placeholder }}"
              {% if field.required %}required{% endif %}
              class="w-full px-4 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white dark:bg-slate-800 dark:text-white dark:placeholder-gray-400"
            >
          {% endif %}
        </div>
      {% endfor %}

      <button type="submit" class="w-full px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors cursor-pointer">
        {{ submit_text }}
      </button>
    </form>

    {# Safe area padding for iOS #}
    <div class="h-6 bg-white dark:bg-slate-900"></div>
  </div>
</div>
