{% extends "base.html" %}

{% block title %}{% if usuario %}Editar{% else %}Novo{% endif %} Usuário{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="bi bi-{% if usuario %}pencil{% else %}plus-circle{% endif %}"></i> 
        {% if usuario %}Editar{% else %}Novo{% endif %} Usuário
    </h1>
    <a href="{{ url_for('usuarios') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label class="form-label">Nome de Usuário *</label>
                        <input type="text" class="form-control" name="username" 
                               value="{% if usuario %}{{ usuario.username }}{% endif %}" 
                               placeholder="Ex: joao.silva"
                               required>
                        <small class="text-muted">Usado para fazer login no sistema</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">E-mail *</label>
                        <input type="email" class="form-control" name="email" 
                               value="{% if usuario %}{{ usuario.email }}{% endif %}" 
                               placeholder="usuario@empresa.com.br"
                               required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Senha {% if not usuario %}*{% endif %}</label>
                        <input type="password" class="form-control" name="senha" 
                               placeholder="{% if usuario %}Deixe em branco para manter a senha atual{% else %}Digite a senha{% endif %}"
                               {% if not usuario %}required{% endif %}>
                        {% if usuario %}
                            <small class="text-muted">Preencha apenas se desejar alterar a senha</small>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Perfil de Acesso *</label>
                        <select class="form-select" name="perfil" required>
                            <option value="operador" {% if usuario and usuario.perfil == 'operador' %}selected{% endif %}>
                                Operador - Acesso básico
                            </option>
                            <option value="gestor" {% if usuario and usuario.perfil == 'gestor' %}selected{% endif %}>
                                Gestor - Acesso a relatórios e aprovações
                            </option>
                            <option value="admin" {% if usuario and usuario.perfil == 'admin' %}selected{% endif %}>
                                Administrador - Acesso total
                            </option>
                        </select>
                    </div>

                    {% if usuario %}
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" name="ativo" id="ativo"
                               {% if usuario.ativo %}checked{% endif %}>
                        <label class="form-check-label" for="ativo">
                            Usuário ativo
                        </label>
                        <small class="d-block text-muted">
                            Desmarque para desativar o acesso deste usuário sem excluí-lo
                        </small>
                    </div>
                    {% endif %}

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> {% if usuario %}Atualizar{% else %}Cadastrar{% endif %}
                        </button>
                        <a href="{{ url_for('usuarios') }}" class="btn btn-secondary">
                            Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-lightbulb"></i> Dicas de Segurança</h5>
            </div>
            <div class="card-body">
                <h6><i class="bi bi-shield-check"></i> Senha Forte</h6>
                <ul>
                    <li>Mínimo de 8 caracteres</li>
                    <li>Misture letras e números</li>
                    <li>Use caracteres especiais</li>
                    <li>Evite dados pessoais</li>
                </ul>

                <h6 class="mt-3"><i class="bi bi-person-badge"></i> Perfis</h6>
                <p class="small">
                    <strong>Operador:</strong> Cadastros e lançamentos básicos<br>
                    <strong>Gestor:</strong> Relatórios e aprovações<br>
                    <strong>Admin:</strong> Controle total do sistema
                </p>

                {% if usuario %}
                <div class="alert alert-warning mt-3">
                    <i class="bi bi-exclamation-triangle"></i>
                    <strong>Atenção:</strong> Alterações no perfil entram em vigor no próximo login.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}