<section id="slots-table" class="{{styles.list_container}}">
  <table class="w-full text-sm border table-fixed">
    <thead class="bg-stone-100">
      <tr>
        <th class="p-2 text-left w-1/6">Name</th>
        <th class="p-2 text-left w-1/6">Flexible</th>
        <th class="text-left p-2 w-1/6">Days</th>
        <th class="text-left p-1/6">Time</th>
        <th class="text-left p-2 w-1/6">Cost</th>
        <th class="text-left p-2 w-1/6">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for s in slots %}
        {% include '_types/slots/_row.html' %}
      {% else %}
        <tr><td colspan="5" class="p-3 text-stone-500">No slots yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- This is what HTMX will swap between button and form -->
  <div id="slot-add-container" class="mt-4">
    {% include '_types/slots/_add_button.html' %}
  </div>
</section>
