{% extends "base.html" %}

{% block title %}Gebruikers & rechten{% endblock %}
{% block page_title %}Gebruikers & rechten{% endblock %}

{% block extra_css %}
<style>
    .school-chip { display: inline-block; margin: 2px 4px 2px 0; }
    .user-row-inactief td { opacity: .55; }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>🔧 PIVOT-gebruikers</h2>
        <div class="actions">
            <button type="button" class="btn-success" onclick="openModal()">➕ Nieuwe gebruiker</button>
        </div>
    </div>
    <p class="muted">Eén account per persoon, voor alle scholen. Per school vink je aan op welke onderdelen iemand rechten heeft.
        {% if is_admin %}Een <strong>administrator</strong> heeft altijd alle rechten in alle scholen.{% endif %}</p>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Gebruiker</th>
                    <th>Rol</th>
                    <th>Rechten per school</th>
                    <th>Laatste login</th>
                    <th class="actions">Beheren</th>
                </tr>
            </thead>
            <tbody>
            {% for u in users %}
                <tr class="{{ '' if u.Actief else 'user-row-inactief' }}">
                    <td>
                        <strong>{{ u.Gebruikersnaam }}</strong>
                        {% if not u.Actief %}<span class="badge badge-warning">uitgeschakeld</span>{% endif %}
                        {% if u.Emailadres %}<div class="muted small">{{ u.Emailadres }}</div>{% endif %}
                    </td>
                    <td><span class="badge {{ 'badge-danger' if u.Veiligheidsgroep == ADMIN else 'badge-info' }}">{{ u.Rol }}</span></td>
                    <td>
                        {% if u.Veiligheidsgroep == ADMIN %}
                            <span class="muted small">Alle rechten in alle scholen</span>
                        {% else %}
                            {% for naam, n in u.scholen[:3] %}
                            <span class="badge school-chip" title="{{ n }} van {{ totaal_onderdelen }} onderdelen">🏫 {{ naam }} · {{ n }}</span>
                            {% else %}
                            <span class="muted small">Nog geen rechten</span>
                            {% endfor %}
                            {% if u.scholen|length > 3 %}
                            <a class="badge school-chip" href="{{ url_for('admin.gebruiker_rechten', gid=u.Gebruiker_ID) }}"
                               title="{% for naam, n in u.scholen[3:] %}{{ naam }} · {{ n }}{% if not loop.last %}&#10;{% endif %}{% endfor %}">+{{ u.scholen|length - 3 }} scholen</a>
                            {% endif %}
                        {% endif %}
                    </td>
                    <td class="nowrap small">{{ u.Last_login.strftime('%d-%m-%Y %H:%M') if u.Last_login else '–' }}</td>
                    <td class="actions">
                        <div style="display:inline-flex;gap:6px;justify-content:flex-end;white-space:nowrap">
                            {% if u.Veiligheidsgroep != ADMIN %}
                            <a class="btn btn-sm btn-secondary" href="{{ url_for('admin.gebruiker_rechten', gid=u.Gebruiker_ID) }}">🔐 Rechten</a>
                            {% endif %}
                            <a class="btn btn-sm btn-warning" href="{{ url_for('admin.gebruiker', gid=u.Gebruiker_ID) }}">👤 Account</a>
                        </div>
                    </td>
                </tr>
            {% else %}
                <tr class="empty-row"><td colspan="5">Nog geen gebruikers.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block modals %}
<div id="addUserModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h3>Nieuwe gebruiker</h3>

        <form method="POST" action="{{ url_for('admin.nieuw') }}">
            <div class="field">
                <label for="username">Gebruikersnaam</label>
                <input type="text" id="username" name="username" placeholder="Bijv. jansen_j" required autocomplete="off">
            </div>

            <div class="field">
                <label for="email">E-mailadres <span class="muted small">(optioneel – om met Google in te loggen)</span></label>
                <input type="email" id="email" name="email" placeholder="voornaam.naam@school.be" autocomplete="off">
            </div>

            <div class="field">
                <label for="password">Wachtwoord <span class="muted small">(leeg = enkel Google-login)</span></label>
                <div class="password-wrap">
                    <input type="password" id="password" name="password" placeholder="Minstens 8 tekens" autocomplete="new-password">
                    <button type="button" class="password-toggle" onclick="togglePassword('password', this)">👁️</button>
                </div>
            </div>

            <div class="field">
                <label for="password_confirm">Wachtwoord bevestigen</label>
                <div class="password-wrap">
                    <input type="password" id="password_confirm" name="password_confirm" placeholder="Wachtwoord" autocomplete="new-password">
                    <button type="button" class="password-toggle" onclick="togglePassword('password_confirm', this)">👁️</button>
                </div>
            </div>

            {% if is_admin %}
            <div class="field">
                <label for="veiligheidsgroep">Rol</label>
                <select id="veiligheidsgroep" name="veiligheidsgroep">
                    {% for nr, naam in groepen.items() %}
                    <option value="{{ nr }}" {% if nr != ADMIN %}selected{% endif %}>{{ naam }}</option>
                    {% endfor %}
                </select>
                <div class="field-hint">Een gebruiker krijgt enkel de rechten die je daarna per school aanvinkt.</div>
            </div>
            {% endif %}

            <button type="submit" class="btn-block btn-success">💾 Aanmaken en rechten instellen</button>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var modal = document.getElementById("addUserModal");
    function openModal()  { modal.style.display = "block"; }
    function closeModal() { modal.style.display = "none"; }
    window.onclick = function (event) { if (event.target == modal) closeModal(); };

    function togglePassword(fieldId, button) {
        var f = document.getElementById(fieldId);
        f.type = f.type === "password" ? "text" : "password";
        button.textContent = f.type === "password" ? "👁️" : "🙈";
    }
    {% if request.args.get('nieuw') %}openModal();{% endif %}
</script>
{% endblock %}