{% extends 'base.html' %}

{% block title %}Editar {{ equipment.name }} | Equipamento{% endblock %}

{% block content %}
<section class="page-header" style="background:var(--surface); border:1px solid var(--border-subtle); border-radius:12px; padding:20px 24px; box-shadow:var(--shadow-sm); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;">
    <div style="flex:1; min-width:300px;">
        <a href="{% url 'dashboard:equipamento_detail' equipment.code %}" style="display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:var(--surface-hover); border:1px solid var(--border-subtle); color:var(--text-muted); font-size:.75rem; font-weight:700; text-decoration:none; margin-bottom:10px;">← Voltar ao detalhe</a>
        <p class="eyebrow" style="color:var(--primary); font-weight:700; letter-spacing:.06em; margin:8px 0 0;">EDIÇÃO PATRIMONIAL · {{ equipment.code }}</p>
        <h2 style="font-size:1.6rem; font-weight:700; letter-spacing:-.03em; color:var(--text-main); margin:6px 0;">Editar {{ equipment.name }}</h2>
        <p style="color:var(--text-muted); font-size:.75rem; line-height:1.5; margin:0;">Altere os dados patrimoniais — código deve permanecer único, quantidade e disponibilidade são validadas.</p>
    </div>
    <div style="display:flex; align-items:center; gap:8px;">
        <span style="padding:6px 10px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg> Edição</span>
        <span style="padding:6px 10px; border-radius:6px; background:var(--surface-hover); border:1px solid var(--border-subtle); color:var(--text-muted); font-size:.75rem; font-weight:700;">{{ equipment.code }}</span>
    </div>
</section>

{% if error %}
<div style="margin:14px 0; padding:12px 14px; border-radius:10px; background:var(--rose-soft); border:1px solid var(--rose-border); color:var(--rose); font-size:.75rem; font-weight:700; text-align:center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> {{ error }}</div>
{% endif %}

<section class="data-panel" style="padding:0; overflow:hidden; border-radius:8px; border-top:3.5px solid var(--primary);">
    <div style="padding:20px; border-bottom:1px solid var(--border-subtle); background:var(--surface);">
        <div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.10em;">FORMULÁRIO</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.95rem;">Dados do equipamento</div>
        <div style="color:var(--text-muted); font-size:.75rem; margin-top:4px;">Campos com * são obrigatórios · alterações salvas imediatamente</div>
    </div>
    <form method="post" style="display:grid; gap:14px; padding:18px 20px 20px;">
        {% csrf_token %}
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:14px;">
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Nome do equipamento *<input name="name" required value="{{ equipment.name }}" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"></label>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Código *<input name="code" required value="{{ equipment.code }}" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text); text-transform:uppercase;"></label>
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px;">
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Categoria<select name="category" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"><option {% if equipment.category == 'Geral' %}selected{% endif %}>Geral</option><option {% if equipment.category == 'Acesso e Andaimes' %}selected{% endif %}>Acesso e Andaimes</option><option {% if equipment.category == 'Corte e Acabamento' %}selected{% endif %}>Corte e Acabamento</option><option {% if equipment.category == 'Energia' %}selected{% endif %}>Energia</option><option {% if equipment.category == 'Compactação' %}selected{% endif %}>Compactação</option><option {% if equipment.category == 'Concretagem' %}selected{% endif %}>Concretagem</option><option {% if equipment.category == 'Elevação' %}selected{% endif %}>Elevação</option><option {% if equipment.category == 'Ferramentas' %}selected{% endif %}>Ferramentas</option></select></label>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Quantidade total<input name="quantity" type="number" min="1" value="{{ equipment.quantity }}" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"></label>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Disponível<input name="available_quantity" type="number" min="0" value="{{ equipment.available_quantity }}" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"></label>
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:14px;">
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Função / Tipo<input name="funcao" value="{{ equipment.funcao }}" list="funcoesListEdit" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"></label>
            <datalist id="funcoesListEdit"><option value="Furadeira"><option value="Martelete"><option value="Parafusadeira"><option value="Serra Mármore"><option value="Esmerilhadeira"><option value="Betoneira"><option value="Gerador"><option value="Andaime"><option value="Compactador"><option value="Plataforma"></option></datalist>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Voltagem<select name="voltage" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"><option value="" {% if not equipment.voltage %}selected{% endif %}>Não se aplica / Manual</option><option {% if equipment.voltage == '110V' %}selected{% endif %}>110V</option><option {% if equipment.voltage == '220V' %}selected{% endif %}>220V</option><option {% if equipment.voltage == 'Bivolt' %}selected{% endif %}>Bivolt</option><option {% if equipment.voltage == 'Trifásico 220V' %}selected{% endif %}>Trifásico 220V</option><option {% if equipment.voltage == 'Trifásico 380V' %}selected{% endif %}>Trifásico 380V</option><option {% if equipment.voltage == 'Bateria' %}selected{% endif %}>Bateria</option></select></label>
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:14px;">
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Status<select name="status" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"><option value="AVAILABLE" {% if equipment.status == 'AVAILABLE' %}selected{% endif %}>Disponível</option><option value="RENTED" {% if equipment.status == 'RENTED' %}selected{% endif %}>Em locação</option><option value="MAINTENANCE" {% if equipment.status == 'MAINTENANCE' %}selected{% endif %}>Em manutenção</option><option value="RESERVED" {% if equipment.status == 'RESERVED' %}selected{% endif %}>Reservado</option></select></label>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Localização<input name="location" value="{{ equipment.location }}" placeholder="Ex: Estoque Central, Oficina" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"></label>
        </div>
        <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Data de cadastro<input name="data_cadastro" type="date" value="{% if equipment.data_cadastro %}{{ equipment.data_cadastro|date:'Y-m-d' }}{% endif %}" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);"></label>
        <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Descrição<textarea name="description" rows="3" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg); color:var(--field-text);">{{ equipment.description }}</textarea></label>
        <div style="display:flex; gap:16px; justify-content:flex-end; border-top:1px solid var(--border-subtle); padding-top:14px; margin-top:4px;">
            <a href="{% url 'dashboard:equipamento_detail' equipment.code %}" class="secondary-button" style="border-radius:10px; padding:10px 16px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;">Cancelar</a>
            <button class="primary-button" type="submit" style="border-radius:10px; padding:10px 18px; font-weight:700;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><polyline points="20 6 9 17 4 12"></polyline></svg> Salvar alterações</button>
        </div>
    </form>
</section>
{% endblock %}