<section id="slot-{{ slot.id }}" class="{{styles.list_container}}">
  <!-- Quick-edit form -->
  <div id="slot-errors" class="mt-2 text-sm text-red-600"></div>
  <form
    class="space-y-3 mt-4"
    hx-put="{{ url_for('calendars.calendar.slots.slot.put',
                      slug=post.slug,
                      calendar_slug=calendar.slug,
                      slot_id=slot.id) }}"
    hx-target="#slot-{{ slot.id }}"
    hx-swap="outerHTML"
    hx-on::after-request="if (event.detail.successful) this.reset()"
  >
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <!-- Name -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="slot-name-{{ slot.id }}">
        Name
      </label>
      <input
        id="slot-name-{{ slot.id }}"
        name="name"
        placeholder="Name"
        class="w-full border p-2 rounded"
        value="{{ slot.name }}"
      />
    </div>

    <!-- Cost -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="slot-cost-{{ slot.id }}">
        Cost
      </label>
      <input
        id="slot-cost-{{ slot.id }}"
        name="cost"
        placeholder="Cost e.g. 12.50"
        class="w-full border p-2 rounded"
        value="{{ '%.2f'|format(slot.cost) if slot.cost is not none else '' }}"
      />
    </div>

    <!-- Time start -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="slot-start-{{ slot.id }}">
        Start time
      </label>
      <input
        id="slot-start-{{ slot.id }}"
        name="time_start"
        placeholder="Start HH:MM"
        class="w-full border p-2 rounded"
        value="{{ slot.time_start.strftime('%H:%M') if slot.time_start else '' }}"
      />
    </div>

    <!-- Time end -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="slot-end-{{ slot.id }}">
        End time
      </label>
      <input
        id="slot-end-{{ slot.id }}"
        name="time_end"
        placeholder="End HH:MM"
        class="w-full border p-2 rounded"
        value="{{ slot.time_end.strftime('%H:%M') if slot.time_end else '' }}"
      />
    </div>

    <!-- Description -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="slot-desc-{{ slot.id }}">
        Description
      </label>
      <textarea
        id="slot-desc-{{ slot.id }}"
        name="description"
        rows="2"
        placeholder="Description"
        class="w-full border p-2 rounded"
      >{{ slot.description or '' }}</textarea>
    </div>

    <!-- Days -->
    <div>
      <span class="block text-sm font-medium text-stone-700 mb-1">
        Days
      </span>

      {# pre-check "All" if every day is true on this slot #}
      {% set all_days_checked =
           slot|getattr('mon')
           and slot|getattr('tue')
           and slot|getattr('wed')
           and slot|getattr('thu')
           and slot|getattr('fri')
           and slot|getattr('sat')
           and slot|getattr('sun') %}

      <div
        class="flex flex-wrap gap-3 items-center text-sm"
        data-days-group
      >
        {# "All" toggle – no name so it’s not submitted #}
        <label class="flex items-center gap-1 px-2 py-1 rounded-full bg-slate-200">
          <input
            type="checkbox"
            data-day-all
            {% if all_days_checked %}checked{% endif %}
          />
          <span>All</span>
        </label>

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

    <!-- NEW: Flexible flag -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="slot-flexible-{{ slot.id }}">
        Flexible booking
      </label>
      <label class="inline-flex items-center gap-2 text-xs">
        <input
          id="slot-flexible-{{ slot.id }}"
          type="checkbox"
          name="flexible"
          value="1"
          {% if slot.flexible %}checked{% endif %}
        >
        <span>Allow bookings at any time within this band</span>
      </label>
    </div>

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

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