{% extends "base.html" %}

{% block title %}{{ u.Gebruikersnaam }} – account{% endblock %}
{% block page_title %}Gebruiker: {{ u.Gebruikersnaam }}{% endblock %}

{% block extra_css %}
<style>
    .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
    .terug { margin-bottom: 14px; display: inline-block; }
</style>
{% endblock %}

{% block content %}
<a class="terug" href="{{ url_for('admin.settings') }}">← Alle gebruikers</a>

{# ---------------- Account ---------------- #}
<div class="card">
    <div class="page-head">
        <h2>👤 Account van {{ u.Gebruikersnaam }}</h2>
        {% if u.Veiligheidsgroep != ADMIN %}
        <a class="btn btn-sm btn-secondary" href="{{ url_for('admin.gebruiker_rechten', gid=u.Gebruiker_ID) }}">🔐 Rechten</a>
        {% endif %}
    </div>
    <form method="POST" action="{{ url_for('admin.gebruiker', gid=u.Gebruiker_ID) }}" autocomplete="off">
        <input type="hidden" name="actie" value="account">
        <div class="account-grid">
            <div class="field">
                <label>Gebruikersnaam</label>
                <input type="text" value="{{ u.Gebruikersnaam }}" disabled>
            </div>
            <div class="field">
                <label for="email">E-mailadres (Google-login)</label>
                <input type="email" id="email" name="email" value="{{ u.Emailadres or '' }}" placeholder="leeg = geen Google-login">
            </div>
            {% if is_admin %}
            <div class="field">
                <label for="veiligheidsgroep">Rol</label>
                <select id="veiligheidsgroep" name="veiligheidsgroep" {% if zelf %}disabled{% endif %}>
                    {% for nr, naam in groepen.items() %}
                    <option value="{{ nr }}" {% if nr == u.Veiligheidsgroep %}selected{% endif %}>{{ naam }}</option>
                    {% endfor %}
                </select>
                {% if zelf %}<input type="hidden" name="veiligheidsgroep" value="{{ u.Veiligheidsgroep }}">{% endif %}
            </div>
            {% endif %}
            <div class="field">
                <label for="new_password">Nieuw wachtwoord</label>
                <input type="password" id="new_password" name="new_password" placeholder="leeg = ongewijzigd" autocomplete="new-password">
                <div class="field-hint">Minstens {{ min_wachtwoord }} tekens.</div>
            </div>
            <div class="field">
                <label for="new_password_confirm">Nieuw wachtwoord bevestigen</label>
                <input type="password" id="new_password_confirm" name="new_password_confirm" autocomplete="new-password">
            </div>
            <div class="field">
                <label>&nbsp;</label>
                <label class="check-box"><input type="checkbox" name="actief" value="1" style="width:auto"
                    {% if u.Actief %}checked{% endif %} {% if zelf %}disabled{% endif %}> Account is actief</label>
                {% if zelf %}<input type="hidden" name="actief" value="1">{% endif %}
            </div>
        </div>
        <div class="muted small" style="margin-bottom:12px">
            Laatste login: {{ u.Last_login.strftime('%d-%m-%Y %H:%M') if u.Last_login else 'nog nooit' }}{% if u.IP_laatste_login %} vanaf {{ u.IP_laatste_login }}{% endif %}
        </div>
        <button type="submit" class="btn-warning">💾 Account opslaan</button>
    </form>

    {% if is_admin and not zelf %}
    <form method="POST" action="{{ url_for('admin.verwijderen', gid=u.Gebruiker_ID) }}" style="margin-top:18px"
          onsubmit="return confirm('Gebruiker {{ u.Gebruikersnaam }} en al zijn rechten verwijderen?')">
        <button type="submit" class="btn-danger btn-sm">🗑️ Gebruiker verwijderen</button>
    </form>
    {% endif %}
</div>
{% endblock %}