{% extends 'base.html' %}

{% block title %}{% if object %}Editar{% else %}Novo{% endif %} Produto - Sistema de Comandas{% endblock %}

{% block content %}
<h2>{% if object %}Editar{% else %}Novo{% endif %} Produto</h2>

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    
    <div class="form-group">
        <label for="id_nome">Nome:</label>
        <input type="text" name="nome" id="id_nome" value="{{ form.nome.value|default:"" }}" required>
    </div>
    
    <div class="form-group">
        <label for="id_descricao">Descrição:</label>
        <textarea name="descricao" id="id_descricao" rows="3">{{ form.descricao.value|default:"" }}</textarea>
    </div>
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
        <div class="form-group">
            <label for="id_preco">Preço:</label>
            <input type="number" name="preco" id="id_preco" step="0.01" min="0" 
                   value="{{ form.preco.value|default:"" }}" required>
        </div>
        
        <div class="form-group">
            <label for="id_grupo">Grupo:</label>
            <select name="grupo" id="id_grupo" required>
                <option value="">Selecione um grupo</option>
                {% for grupo in form.grupo.field.queryset %}
                <option value="{{ grupo.pk }}" {% if form.grupo.value == grupo.pk %}selected{% endif %}>
                    {{ grupo.nome }}
                </option>
                {% endfor %}
            </select>
        </div>
    </div>
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
        <div class="form-group">
            <label for="id_estoque_atual">Estoque Atual:</label>
            <input type="number" name="estoque_atual" id="id_estoque_atual" min="0" 
                   value="{{ form.estoque_atual.value|default:"0" }}" required>
        </div>
        
        <div class="form-group">
            <label for="id_estoque_minimo">Estoque Mínimo:</label>
            <input type="number" name="estoque_minimo" id="id_estoque_minimo" min="0" 
                   value="{{ form.estoque_minimo.value|default:"0" }}" required>
        </div>
    </div>
    
    <div class="form-group">
        <label for="id_thumbnail">Imagem:</label>
        <input type="file" name="thumbnail" id="id_thumbnail" accept="image/*">
        {% if object.thumbnail %}
        <p>Imagem atual: <a href="{{ object.thumbnail.url }}" target="_blank">Ver imagem</a></p>
        {% endif %}
    </div>
    
    <div class="form-group">
        <button type="submit" class="btn">{% if object %}Atualizar{% else %}Criar{% endif %} Produto</button>
        <a href="{% url 'produtos:list' %}" class="btn btn-danger">Cancelar</a>
    </div>
</form>
{% endblock %}