{% extends 'base.html' %}

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

{% block content %}
<div class="clearfix">
    <h2 style="float: left;">Produtos</h2>
    <a href="{% url 'produtos:create' %}" class="btn float-right">Novo Produto</a>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
    {% for produto in produtos %}
    <div class="card">
        {% if produto.thumbnail %}
        <img src="{{ produto.thumbnail.url }}" alt="{{ produto.nome }}" 
             style="width: 100%; height: 150px; object-fit: cover; border-radius: 3px;">
        {% endif %}
        
        <h3>{{ produto.nome }}</h3>
        <p><strong>Grupo:</strong> {{ produto.grupo.nome }}</p>
        <p><strong>Preço:</strong> R$ {{ produto.preco|floatformat:2 }}</p>
        <p><strong>Estoque:</strong> 
            <span style="color: {% if produto.estoque_baixo %}#dc3545{% else %}#28a745{% endif %};">
                {{ produto.estoque_atual }}
            </span>
            {% if produto.estoque_baixo %}(Baixo){% endif %}
        </p>
        
        {% if produto.descricao %}
        <p style="font-size: 0.9em; color: #666;">{{ produto.descricao|truncatewords:15 }}</p>
        {% endif %}
        
        <div style="margin-top: 15px;">
            <a href="{% url 'produtos:detail' produto.pk %}" class="btn">Ver</a>
            <a href="{% url 'produtos:update' produto.pk %}" class="btn btn-warning">Editar</a>
        </div>
    </div>
    {% empty %}
    <div class="card" style="grid-column: 1 / -1; text-align: center;">
        <h3>Nenhum produto cadastrado</h3>
        <p><a href="{% url 'produtos:create' %}" class="btn">Cadastrar primeiro produto</a></p>
    </div>
    {% endfor %}
</div>

{% if is_paginated %}
<div class="text-center">
    {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}" class="btn">Anterior</a>
    {% endif %}
    
    Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}
    
    {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" class="btn">Próxima</a>
    {% endif %}
</div>
{% endif %}
{% endblock %}