{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Tables{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0">Tables</h4>
  <a class="btn btn-primary" href="{% url 'hotel:table_add' %}">Add Table</a>
  <a class="btn btn-primary" href="{% url 'hotel:tables_bulk' %}">Add Table (Bulk)</a>
</div>

<div class="table-responsive">
  <table class="table table-striped table-hover align-middle">
    <thead>
      <tr>
        <th style="width:90px">T-ID</th>
        <th>Name</th>
        <th>Type</th>
        <th>Description</th>
        <th style="width:120px">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td>{{ r.t_id }}</td>
        <td>{{ r.name }}</td>
        <td>{{ r.table_type }}</td>
        <td class="text-muted">{{ r.description|default:"—" }}</td>
        <td class="text-nowrap">
          <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
            <a class="btn btn-outline-secondary" href="{% url 'hotel:table_edit' r.pk %}">Edit</a>
            <a class="btn btn-outline-danger" href="{% url 'hotel:table_delete' r.pk %}"
               onclick="return confirm('Delete this table?');">Delete</a>
          </div>
        </td>

      </tr>
      {% empty %}
      <tr><td colspan="5" class="text-center text-muted py-4">No tables found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}