<section id="entry-{{ entry.id }}" class="{{styles.list_container}}">
  
  <!-- Entry Name -->
  <div class="flex flex-col mb-4">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Name
    </div>
    <div class="mt-1 text-lg font-medium">
      {{ entry.name }}
    </div>
  </div>

  <!-- Slot -->
  <div class="flex flex-col mb-4">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Slot
    </div>
    <div class="mt-1">
      {% if entry.slot %}
        <span class="px-2 py-1 rounded text-sm bg-blue-100 text-blue-700">
          {{ entry.slot.name }}
        </span>
        {% if entry.slot.flexible %}
          <span class="ml-2 text-xs text-stone-500">(flexible)</span>
        {% else %}
          <span class="ml-2 text-xs text-stone-500">(fixed)</span>
        {% endif %}
      {% else %}
        <span class="text-sm text-stone-400">No slot assigned</span>
      {% endif %}
    </div>
  </div>

  <!-- Time Period -->
  <div class="flex flex-col mb-4">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Time Period
    </div>
    <div class="mt-1">
      {{ entry.start_at.strftime('%H:%M') }}
      {% if entry.end_at %}
        – {{ entry.end_at.strftime('%H:%M') }}
      {% else %}
        – open-ended
      {% endif %}
    </div>
  </div>

  <!-- State -->
  <div class="flex flex-col mb-4">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      State
    </div>
    <div class="mt-1">
      <div id="entry-state-{{entry.id}}">
        {% include '_types/entry/_state.html' %}
      </div>
    </div>
  </div>

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

  <!-- Ticket Configuration -->
  <div class="flex flex-col mb-4">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Tickets
    </div>
    <div class="mt-1" id="entry-tickets-{{entry.id}}">
      {% include '_types/entry/_tickets.html' %}
    </div>
  </div>

  <!-- Date -->
  <div class="flex flex-col mb-4">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Date
    </div>
    <div class="mt-1">
      {{ entry.start_at.strftime('%A, %B %d, %Y') }}
    </div>
  </div>

  <!-- Associated Posts -->
  <div class="flex flex-col mb-4">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Associated Posts
    </div>
    <div class="mt-1" id="entry-posts-{{entry.id}}">
      {% include '_types/entry/_posts.html' %}
    </div>
  </div>

  <!-- Options and Edit Button -->
  <div class="flex gap-2 mt-6">
    {% include '_types/entry/_options.html' %}
    
    <button
      type="button"
      class="{{styles.pre_action_button}}"
      hx-get="{{ url_for(
        'calendars.calendar.day.calendar_entries.calendar_entry.get_edit',
        entry_id=entry.id,
        slug=post.slug,
        calendar_slug=calendar.slug,
        day=day,
        month=month,
        year=year,
      ) }}"
      hx-target="#entry-{{entry.id}}"
      hx-swap="outerHTML"
    >
      Edit
    </button>
  </div>

</section>