<section id="ticket-{{ ticket_type.id }}" class="{{styles.list_container}}">
  <!-- Quick-edit form -->
  <div id="ticket-errors" class="mt-2 text-sm text-red-600"></div>
  <form
    class="space-y-3 mt-4"
    hx-put="{{ url_for('calendars.calendar.day.calendar_entries.calendar_entry.ticket_types.ticket_type.put',
                      slug=post.slug,
                      calendar_slug=calendar.slug,
                      year=year,
                      month=month,
                      day=day,
                      entry_id=entry.id,
                      ticket_type_id=ticket_type.id) }}"
    hx-target="#ticket-{{ ticket_type.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="ticket-name-{{ ticket_type.id }}">
        Name
      </label>
      <input
        id="ticket-name-{{ ticket_type.id }}"
        name="name"
        placeholder="e.g. Adult, Child, Student"
        class="w-full border p-2 rounded"
        value="{{ ticket_type.name }}"
        required
      />
    </div>

    <!-- Cost -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="ticket-cost-{{ ticket_type.id }}">
        Cost (£)
      </label>
      <input
        id="ticket-cost-{{ ticket_type.id }}"
        name="cost"
        type="number"
        step="0.01"
        min="0"
        placeholder="e.g. 5.00"
        class="w-full border p-2 rounded"
        value="{{ '%.2f'|format(ticket_type.cost) if ticket_type.cost is not none else '' }}"
        required
      />
    </div>

    <!-- Count -->
    <div>
      <label class="block text-sm font-medium text-stone-700 mb-1" for="ticket-count-{{ ticket_type.id }}">
        Count
      </label>
      <input
        id="ticket-count-{{ ticket_type.id }}"
        name="count"
        type="number"
        min="0"
        placeholder="e.g. 50"
        class="w-full border p-2 rounded"
        value="{{ ticket_type.count }}"
        required
      />
    </div>

    <div class="flex justify-end gap-2 pt-2">
      <button
        type="button"
        class="{{styles.cancel_button}}"
        hx-get="{{ url_for('calendars.calendar.day.calendar_entries.calendar_entry.ticket_types.ticket_type.get_view',
                          slug=post.slug,
                          calendar_slug=calendar.slug,
                          entry_id=entry.id,
                          year=year,
                          month=month,
                          day=day,
                          ticket_type_id=ticket_type.id) }}"
        hx-target="#ticket-{{ ticket_type.id }}"
        hx-swap="outerHTML"
      >
        Cancel
      </button>

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