{% if entry.ticket_price is not none %}
  {# Tickets are configured #}
  <div class="space-y-2">
    <div class="flex items-center gap-2">
      <span class="text-sm font-medium text-stone-700">Price:</span>
      <span class="font-medium text-green-600">
        £{{ ('%.2f'|format(entry.ticket_price)) }}
      </span>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-sm font-medium text-stone-700">Available:</span>
      <span class="font-medium text-blue-600">
        {% if entry.ticket_count is not none %}
          {{ entry.ticket_count }} tickets
        {% else %}
          Unlimited
        {% endif %}
      </span>
    </div>
    <button
      type="button"
      class="text-xs text-blue-600 hover:text-blue-800 underline"
      onclick="document.getElementById('ticket-form-{{entry.id}}').classList.remove('hidden'); this.classList.add('hidden');"
    >
      Edit ticket config
    </button>
  </div>
{% else %}
  {# No tickets configured #}
  <div class="space-y-2">
    <span class="text-sm text-stone-400">No tickets configured</span>
    <button
      type="button"
      class="block text-xs text-blue-600 hover:text-blue-800 underline"
      onclick="document.getElementById('ticket-form-{{entry.id}}').classList.remove('hidden'); this.classList.add('hidden');"
    >
      Configure tickets
    </button>
  </div>
{% endif %}

{# Ticket configuration form (hidden by default) #}
<form
  id="ticket-form-{{entry.id}}"
  class="{% if entry.ticket_price is not none %}hidden{% endif %} space-y-3 mt-2 p-3 border rounded bg-stone-50"
  hx-post="{{ url_for(
    'calendars.calendar.day.calendar_entries.calendar_entry.update_tickets',
    entry_id=entry.id,
    slug=post.slug,
    calendar_slug=calendar.slug,
    day=day,
    month=month,
    year=year,
  ) }}"
  hx-target="#entry-tickets-{{entry.id}}"
  hx-swap="innerHTML"
>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
  <div>
    <label for="ticket-price-{{entry.id}}" class="block text-sm font-medium text-stone-700 mb-1">
      Ticket Price (£)
    </label>
    <input
      type="number"
      id="ticket-price-{{entry.id}}"
      name="ticket_price"
      step="0.01"
      min="0"
      value="{{ ('%.2f'|format(entry.ticket_price)) if entry.ticket_price is not none else '' }}"
      class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
      placeholder="e.g., 5.00"
    />
  </div>

  <div>
    <label for="ticket-count-{{entry.id}}" class="block text-sm font-medium text-stone-700 mb-1">
      Total Tickets
    </label>
    <input
      type="number"
      id="ticket-count-{{entry.id}}"
      name="ticket_count"
      min="0"
      value="{{ entry.ticket_count if entry.ticket_count is not none else '' }}"
      class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
      placeholder="Leave empty for unlimited"
    />
  </div>

  <div class="flex gap-2">
    <button
      type="submit"
      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
    >
      Save
    </button>
    <button
      type="button"
      class="px-4 py-2 bg-stone-200 text-stone-700 rounded hover:bg-stone-300 text-sm"
      onclick="document.getElementById('ticket-form-{{entry.id}}').classList.add('hidden'); document.getElementById('entry-tickets-{{entry.id}}').querySelectorAll('button:not([type=submit])').forEach(btn => btn.classList.remove('hidden'));"
    >
      Cancel
    </button>
  </div>
</form>
