{% extends "base.html" %}

{% block title %}{{ meta_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<main class="content-section">
  <div class="container-xxl">
    <div class="page-intro">
      <div>
        <span class="eyebrow">KDS</span>
        <h1>Pantalla de cocina</h1>
        <p>Órdenes pendientes y en preparación, listas para seguir en prioridad visual.</p>
      </div>
      <div class="page-actions">
        <a href="{% url 'home' %}" class="btn btn-pos-soft">Volver al dashboard</a>
      </div>
    </div>

    {% if orders %}
    <div class="kds-grid">
      {% for order in orders %}
      <article class="kds-card">
        <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
          <div>
            <span class="eyebrow">{{ order.table.name }}</span>
            <h2>Orden #{{ order.id }}</h2>
          </div>
          <span class="status-pill {% if order.status == 'preparing' %}status-busy{% else %}status-free{% endif %}">{{ order.get_status_display }}</span>
        </div>
        <ul class="kds-items">
          {% for item in order.items.all %}
          <li>
            <strong>{{ item.quantity }} × {{ item.product.name }}</strong>
            <p>{% if item.note %}{{ item.note }}{% else %}Sin nota adicional{% endif %}</p>
          </li>
          {% endfor %}
        </ul>
        <a href="{% url 'order_detail' order.id %}" class="btn btn-pos-primary w-100">Abrir detalle</a>
      </article>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state-card centered">
      <h3>No hay órdenes pendientes</h3>
      <p>Cuando un mesero envíe una comanda, aparecerá aquí automáticamente.</p>
      <a href="{% url 'home' %}" class="btn btn-pos-primary">Volver al dashboard</a>
    </div>
    {% endif %}
  </div>
</main>
{% endblock %}