{% extends 'base.html' %}

{% block title %}Editar {{ member.name }} | {{ team.name }}{% endblock %}

{% block content %}
<section class="page-header">
    <div>
        {% if next_url %}
        <a class="back-link" href="{{ next_url }}" style="display:inline-block; margin-bottom:10px; color:var(--primary); text-decoration:none; font-size:.75rem; font-weight:700;">← Voltar para obra</a>
        {% elif request.GET.next %}
        <a class="back-link" href="{{ request.GET.next }}" style="display:inline-block; margin-bottom:10px; color:var(--primary); text-decoration:none; font-size:.75rem; font-weight:700;">← Voltar para obra</a>
        {% else %}
        <a class="back-link" href="{% url 'dashboard:team_detail' team.id %}" style="display:inline-block; margin-bottom:10px; color:var(--primary); text-decoration:none; font-size:.75rem; font-weight:700;">← Voltar para {{ team.name }}</a>
        {% endif %}
        <p class="eyebrow">{{ team.name|upper }} · EDIÇÃO</p>
        <h2><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> Editar colaborador</h2>
        <p class="page-description">Atualize os dados de <strong>{{ member.name }}</strong> — função, telefone, e-mail e status.</p>
    </div>
</section>

<section class="data-panel" style="padding:22px; max-width:640px;">
    <form method="post" style="display:grid; gap:14px;">
        {% csrf_token %}
        {% if next_url %}<input type="hidden" name="next" value="{{ next_url }}">{% endif %}
        {% if request.GET.next %}<input type="hidden" name="next" value="{{ request.GET.next }}">{% endif %}
        <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700; color:var(--content-text);">
            Nome completo *
            <input name="member_name" required value="{{ member.name }}" style="padding:10px 12px; border:1px solid var(--field-border); border-radius:6px; background:var(--field-bg); color:var(--field-text); font-size:.8rem;">
        </label>
        <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700; color:var(--content-text);">
            Função / Cargo *
            <select name="role" required style="padding:10px 12px; border:1px solid var(--field-border); border-radius:6px; background:var(--field-bg); color:var(--field-text); font-size:.8rem;">
                <option {% if member.role == 'Engenheiro' %}selected{% endif %}>Engenheiro</option>
                <option {% if member.role == 'Mestre de Obras' %}selected{% endif %}>Mestre de Obras</option>
                <option {% if member.role == 'Encarregado' %}selected{% endif %}>Encarregado</option>
                <option {% if member.role == 'Operador' %}selected{% endif %}>Operador</option>
                <option {% if member.role == 'Auxiliar' %}selected{% endif %}>Auxiliar</option>
                <option {% if member.role == 'Eletricista' %}selected{% endif %}>Eletricista</option>
                <option {% if member.role == 'Pedreiro' %}selected{% endif %}>Pedreiro</option>
                <option {% if member.role == 'Motorista' %}selected{% endif %}>Motorista</option>
                <option {% if member.role == 'Administrativo' %}selected{% endif %}>Administrativo</option>
                {% if member.role not in "Engenheiro Mestre de Obras Encarregado Operador Auxiliar Eletricista Pedreiro Motorista Administrativo" %}
                <option selected>{{ member.role }}</option>
                {% endif %}
            </select>
        </label>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700; color:var(--content-text);">
                Telefone
                <input name="phone" value="{{ member.phone }}" placeholder="(11) 99999-0000" style="padding:10px 12px; border:1px solid var(--field-border); border-radius:6px; background:var(--field-bg); color:var(--field-text); font-size:.8rem;">
            </label>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700; color:var(--content-text);">
                E-mail
                <input name="email" type="email" value="{{ member.email }}" placeholder="nome@obra.com" style="padding:10px 12px; border:1px solid var(--field-border); border-radius:6px; background:var(--field-bg); color:var(--field-text); font-size:.8rem;">
            </label>
        </div>
        <label style="display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; color:var(--content-text); cursor:pointer;">
            <input type="checkbox" name="active" {% if member.active %}checked{% endif %} style="width:16px; height:16px; accent-color:var(--primary);"> Ativo
            <span style="font-weight:400; color:var(--text-muted);">Desmarque para inativar o colaborador</span>
        </label>
        <div style="display:flex; gap:16px; margin-top:4px;">
            <button class="primary-button" type="submit">Salvar alterações</button>
            {% if next_url %}
            <a class="secondary-button" href="{{ next_url }}" style="text-decoration:none; display:grid; place-items:center;">Cancelar</a>
            {% elif request.GET.next %}
            <a class="secondary-button" href="{{ request.GET.next }}" style="text-decoration:none; display:grid; place-items:center;">Cancelar</a>
            {% else %}
            <a class="secondary-button" href="{% url 'dashboard:team_detail' team.id %}" style="text-decoration:none; display:grid; place-items:center;">Cancelar</a>
            {% endif %}
        </div>
    </form>
</section>

<section class="data-panel" style="margin-top:14px; padding:16px; background:var(--primary-soft); border-color:var(--border-subtle); max-width:640px;">
    <h3 style="margin:0 0 6px; font-size:.85rem; color:var(--primary);">Equipe: {{ team.name }}</h3>
    <p style="margin:0; color:var(--text-muted); font-size:.72rem;">{{ team.sector }} · {{ team.members.count }} membros · Criada em {{ team.created_at|date:"d/m/Y" }}</p>
</section>
{% endblock %}