<form
  hx-post="{{ url_for('calendars.calendar.day.calendar_entries.calendar_entry.ticket_types.post',
                      slug=post.slug,
                      calendar_slug=calendar.slug,
                      entry_id=entry.id,
                      year=year,
                      month=month,
                      day=day,
            ) }}"
  hx-target="#tickets-table"
  hx-select="#tickets-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-3 gap-3">
    <div>
      <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"
        placeholder="e.g. Adult, Child, Student"
        required
      >
    </div>

    <div>
      <label class="block text-xs font-semibold mb-1">Cost (£)</label>
      <input
        type="number"
        name="cost"
        step="0.01"
        min="0"
        class="w-full border rounded px-2 py-1 text-sm"
        placeholder="e.g. 5.00"
        required
      >
    </div>

    <div>
      <label class="block text-xs font-semibold mb-1">Count</label>
      <input
        type="number"
        name="count"
        min="0"
        class="w-full border rounded px-2 py-1 text-sm"
        placeholder="e.g. 50"
        required
      >
    </div>
  </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.add_button',
                         slug=post.slug,
                         calendar_slug=calendar.slug,
                         entry_id=entry.id,
                         year=year,
                         month=month,
                         day=day,
              ) }}"
      hx-target="#ticket-add-container"
      hx-swap="innerHTML"
    >
      Cancel
    </button>

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