{% extends 'base.html' %}

{% block title %}Mesas - Sistema de Comandas{% endblock %}

{% block content %}
<div class="clearfix">
    <h2 style="float: left;">Mesas</h2>
    <a href="{% url 'controler:mesa_create' %}" class="btn float-right">Nova Mesa</a>
</div>

<table class="table">
    <thead>
        <tr>
            <th>Número</th>
            <th>Descrição</th>
            <th>Capacidade</th>
            <th>Status</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody>
        {% for mesa in mesas %}
        <tr>
            <td><strong>Mesa {{ mesa.numero }}</strong></td>
            <td>{{ mesa.descricao|default:"-" }}</td>
            <td>{{ mesa.capacidade }} pessoas</td>
            <td>
                {% if mesa.id in mesas_ocupadas %}
                    <span style="color: #ffc107;">Ocupada</span>
                {% else %}
                    <span style="color: #28a745;">Livre</span>
                {% endif %}
            </td>
            <td>
                <a href="{% url 'controler:mesa_update' mesa.pk %}" class="btn btn-warning">Editar</a>
                <a href="{% url 'controler:mesa_delete' mesa.pk %}" class="btn btn-danger" 
                   onclick="return confirm('Tem certeza?')">Excluir</a>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="5" class="text-center">Nenhuma mesa cadastrada.</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}