{% import 'macros/links.html' as links %}
<tr class="{{ styles.tr }}">
  <td class="p-2 align-top w-1/6">
    <div class="font-medium">
      {% call links.link(
        url_for('calendars.calendar.slots.slot.get', slug=post.slug, calendar_slug=calendar.slug, slot_id=s.id),
        hx_select_search,
        aclass=styles.pill
      ) %}
        {{ s.name }}
      {% endcall %}
    </div>
    {% set slot = s %}
    {% include '_types/slot/_description.html' %}
  </td>
  <td class="p-2 align-top w-1/6">
    {{ 'yes' if s.flexible else 'no' }}
  </td>
  <td class="p-2 align-top w-1/6">
    {% set days = s.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 %}
  </td>
  <td class="p-2 align-top w-1/6">
    {{ s.time_start.strftime('%H:%M') }} - {{ s.time_end.strftime('%H:%M') }}
  </td>
  <td class="p-2 align-top w-1/6">
    {{ ('%.2f'|format(s.cost)) if s.cost is not none else '' }}
  </td>
  <td class="p-2 align-top w-1/6">
    <button
      class="{{styles.action_button}}"
      data-confirm="true"
      data-confirm-title="Delete slot?"
      data-confirm-text="This action cannot be undone."
      data-confirm-icon="warning"
      data-confirm-confirm-text="Yes, delete it"
      data-confirm-cancel-text="Cancel"
      data-confirm-event="confirmed"
      hx-delete="{{ url_for('calendars.calendar.slots.slot.slot_delete',
                            slug=post.slug,
                            calendar_slug=calendar.slug,
                            slot_id=s.id) }}"
      hx-target="#slots-table"
      hx-select="#slots-table"
      hx-swap="outerHTML"
      hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
      hx-trigger="confirmed"
      type="button"
    >
      <i class="fa-solid fa-trash"></i>
    </button>
  </td>
</tr>
