<section id="ticket-{{ticket_type.id}}" class="{{styles.list_container}}">
  <!-- Name, Cost, and Count in a grid -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
    <div class="flex flex-col">
      <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
        Name
      </div>
      <div class="mt-1">
        {{ ticket_type.name }}
      </div>
    </div>

    <div class="flex flex-col">
      <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
        Cost
      </div>
      <div class="mt-1">
        £{{ ('%.2f'|format(ticket_type.cost)) if ticket_type.cost is not none else '0.00' }}
      </div>
    </div>

    <div class="flex flex-col">
      <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
        Count
      </div>
      <div class="mt-1">
        {{ ticket_type.count }}
      </div>
    </div>
  </div>

  <button
    type="button"
    class="{{styles.pre_action_button}}"
    hx-get="{{ url_for(
      'calendars.calendar.day.calendar_entries.calendar_entry.ticket_types.ticket_type.get_edit',
      ticket_type_id=ticket_type.id,
      slug=post.slug,
      calendar_slug=calendar.slug,
      year=year,
      month=month,
      day=day,
      entry_id=entry.id,
    ) }}"
    hx-target="#ticket-{{ticket_type.id}}"
    hx-swap="outerHTML"
  >
    Edit
  </button>
</section>
