<form
  hx-post="{{ url_for('calendars.calendar.slots.post',
                      slug=post.slug,
                      calendar_slug=calendar.slug) }}"
  hx-target="#slots-table"
  hx-select="#slots-table"
  hx-disinherit="hx-select"
  hx-swap="outerHTML"
  hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
  class="space-y-3"
>
  <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
    <div class="md:col-span-2">
      <label class="block text-xs font-semibold mb-1">Name</label>
      <input
        type="text"
        name="name"
        class="w-full border rounded px-2 py-1 text-sm"
        required
      >
    </div>

    <div class="md:col-span-2">
      <label class="block text-xs font-semibold mb-1">Description</label>
      <input
        type="text"
        name="description"
        class="w-full border rounded px-2 py-1 text-sm"
      >
    </div>

    <div>
      <label class="block text-xs font-semibold mb-1">Days</label>
      <div class="flex flex-wrap gap-1 text-xs" data-days-group>
        {# "All" toggle – no name so it’s not submitted #}
        <label class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-slate-200">
          <input type="checkbox" data-day-all>
          <span>All</span>
        </label>

        {# Individual days #}
        {% for key, label in [
          ('mon','Mon'),('tue','Tue'),('wed','Wed'),('thu','Thu'),
          ('fri','Fri'),('sat','Sat'),('sun','Sun')
        ] %}
          <label class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-slate-100">
            <input type="checkbox" name="{{ key }}" value="1" data-day="{{ key }}">
            <span>{{ label }}</span>
          </label>
        {% endfor %}
      </div>
    </div>

    <div>
      <label class="block text-xs font-semibold mb-1">Time start</label>
      <input
        type="time"
        name="time_start"
        class="w-full border rounded px-2 py-1 text-sm"
        required
      >
    </div>

    <div>
      <label class="block text-xs font-semibold mb-1">Time end</label>
      <input
        type="time"
        name="time_end"
        class="w-full border rounded px-2 py-1 text-sm"
        required
      >
    </div>

    <div>
      <label class="block text-xs font-semibold mb-1">Cost</label>
      <input
        type="text"
        name="cost"
        class="w-full border rounded px-2 py-1 text-sm"
        placeholder="e.g. 5.00"
      >
    </div>

    {# NEW: flexible flag #}
    <div class="md:col-span-2">
      <label class="block text-xs font-semibold mb-1">Flexible booking</label>
      <label class="inline-flex items-center gap-2 text-xs">
        <input
          type="checkbox"
          name="flexible"
          value="1"
        >
        <span>Allow bookings at any time within this band</span>
      </label>
    </div>
  </div>

  <div class="flex justify-end gap-2 pt-2">
    <button
      type="button"
      class="{{styles.cancel_button}}"
      hx-get="{{ url_for('calendars.calendar.slots.add_button',
                         slug=post.slug,
                         calendar_slug=calendar.slug) }}"
      hx-target="#slot-add-container"
      hx-swap="innerHTML"
    >
      Cancel
    </button>

    <button
      type="submit"
      class="{{styles.action_button}}"
      data-confirm="true"
      data-confirm-title="Add slot?"
      data-confirm-text="Are you sure you want to add this slot?"
      data-confirm-icon="question"
      data-confirm-confirm-text="Yes, add it"
      data-confirm-cancel-text="Cancel"
    >
      <i class="fa fa-save"></i>
      Save slot
    </button>
  </div>
</form>
