<section id="slot-{{slot.id}}" class="{{styles.list_container}}">
  <!-- Days -->
  <div class="flex flex-col">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Days
    </div>
    <div class="mt-1">
      {% set days = slot.days_display.split(', ') %}
      {% if days and days[0] != "—" %}
        <div class="flex flex-wrap gap-1">
          {% for day in days %}
            <span class="px-2 py-0.5 rounded-full text-xs bg-slate-200">
              {{ day }}
            </span>
          {% endfor %}
        </div>
      {% else %}
        <span class="text-xs text-slate-400">No days</span>
      {% endif %}
    </div>
  </div>

  <!-- Flexible -->
  <div class="flex flex-col">
    <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
      Flexible
    </div>
    <div class="mt-1">
      {{ 'yes' if slot.flexible else 'no' }}
    </div>
  </div>

  <!-- Time & Cost (still "up-down" per field, but can sit side-by-side on wide screens) -->
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
    <div class="flex flex-col">
      <div class="text-xs font-semibold uppercase tracking-wide text-stone-500">
        Time
      </div>
      <div class="mt-1">
        {{ slot.time_start.strftime('%H:%M') }} — {{ slot.time_end.strftime('%H:%M') }}
      </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(slot.cost)) if slot.cost is not none else '' }}
      </div>
    </div>
  </div>
  <button
    type="button"
    class="{{styles.pre_action_button}}"
    hx-get="{{ url_for(
      'calendars.calendar.slots.slot.get_edit',
      slot_id=slot.id,
      slug=post.slug,
      calendar_slug=calendar.slug,
    ) }}"
    hx-target="#slot-{{slot.id}}"
    hx-swap="outerHTML"
  >
    Edit
  </button>
</section>

{% if oob %}
  {% from '_types/slot/__description.html' import description %}
  {{description(slot, oob=True)}}

{% endif %}