{% extends "layouts/admin.twig" %}

{% block title %}{{ ta.edit_profile|default('Profiel bewerken') }}: {{ target_user.username }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h2 class="mb-0"><i class="bi bi-person-gear"></i> {{ ta.edit_profile|default('Profiel bewerken') }}</h2>
    <a href="/admin/users" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> {{ ta.back_to_users|default('Terug naar gebruikers') }}
    </a>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <i class="bi bi-person-circle"></i> {{ ta.profile_info|default('Profiel gegevens') }}
                {% if is_self %}
                    <span class="badge bg-info ms-2">{{ ta.you|default('Jij') }}</span>
                {% endif %}
            </div>
            <div class="card-body">
                <form method="POST" action="/admin/users-edit?user={{ target_user.username }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="action" value="profile">
                    <div class="mb-3">
                        <label class="form-label">{{ ta.username|default('Gebruikersnaam') }}</label>
                        <input type="text" class="form-control" value="{{ target_user.username }}" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="profile_email" class="form-label">{{ ta.login_email|default('Login e-mail') }}</label>
                        <input type="email" class="form-control" id="profile_email" name="profile_email" value="{{ target_user.email|default('') }}">
                    </div>
                    <div class="mb-3">
                        <label for="profile_author_name" class="form-label">{{ ta.author_name|default('Auteur naam') }}</label>
                        <input type="text" class="form-control" id="profile_author_name" name="profile_author_name" value="{{ target_user.author_name|default('') }}">
                        <small class="form-text text-muted">{{ ta.author_name_help|default('Getoond als auteur op de website.') }}</small>
                    </div>
                    <div class="mb-3">
                        <label for="profile_author_email" class="form-label">{{ ta.author_email|default('Auteur e-mail') }}</label>
                        <input type="email" class="form-control" id="profile_author_email" name="profile_author_email" value="{{ target_user.author_email|default('') }}">
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg"></i> {{ ta.save|default('Opslaan') }}
                    </button>
                </form>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <i class="bi bi-key"></i> {{ ta.change_password|default('Wachtwoord wijzigen') }}
            </div>
            <div class="card-body">
                <form method="POST" action="/admin/users-edit?user={{ target_user.username }}" onsubmit="return validatePassword();">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="action" value="change_password">
                    <div class="mb-3">
                        <label for="new_password" class="form-label">{{ ta.new_password|default('Nieuw wachtwoord') }}</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" required minlength="8">
                        <small class="form-text text-muted">{{ ta.password_help|default('Minimaal 8 tekens.') }}</small>
                    </div>
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">{{ ta.confirm_password|default('Bevestig wachtwoord') }}</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="8">
                    </div>
                    <button type="submit" class="btn btn-warning">
                        <i class="bi bi-key"></i> {{ ta.change_password|default('Wachtwoord wijzigen') }}
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <i class="bi bi-shield-lock"></i> {{ ta.col_role|default('Rol') }}
            </div>
            <div class="card-body">
                <p class="mb-2"><strong>{{ ta.current_role|default('Huidige rol') }}</strong></p>
                <p>
                    <span class="badge bg-{{ target_user.role == 'admin' ? 'danger' : (target_user.role == 'content-manager' ? 'primary' : (target_user.role == 'bi-manager' ? 'success' : 'warning')) }}">
                        {{ target_user.role_label|default(target_user.role) }}
                    </span>
                </p>
                <hr>
                <form method="POST" action="/admin/users-edit?user={{ target_user.username }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="action" value="change_role">
                    <div class="mb-3">
                        <label for="new_role" class="form-label">{{ ta.new_role|default('Nieuwe rol') }}</label>
                        <select class="form-select" id="new_role" name="new_role">
                            {% for roleKey, roleLabel in roles %}
                            <option value="{{ roleKey }}" {{ target_user.role == roleKey ? 'selected' : '' }}>{{ roleLabel }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="bi bi-check-lg"></i> {{ ta.change|default('Wijzigen') }}
                    </button>
                </form>
            </div>
        </div>

        {% if not is_self %}
        <div class="card shadow-sm border-danger">
            <div class="card-header bg-danger text-white">
                <i class="bi bi-exclamation-triangle"></i> {{ ta.danger_zone|default('Gevarenzone') }}
            </div>
            <div class="card-body">
                <form method="POST" action="/admin/users-edit?user={{ target_user.username }}" onsubmit="return confirm('{{ ta.confirm_delete_user|default('Weet je zeker dat je deze gebruiker wilt verwijderen?') }}')">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="action" value="delete">
                    <button type="submit" class="btn btn-danger w-100">
                        <i class="bi bi-trash"></i> {{ ta.delete_user|default('Gebruiker verwijderen') }}
                    </button>
                </form>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<script>
function validatePassword() {
    var p1 = document.getElementById('new_password').value;
    var p2 = document.getElementById('confirm_password').value;
    if (p1 !== p2) {
        alert('{{ ta.passwords_no_match|default('Wachtwoorden komen niet overeen.') }}');
        return false;
    }
    return true;
}
</script>
{% endblock %}