{% extends "base.html" %}

{% block title %}Scholen{% endblock %}

{% block page_title %}Scholen in PIVOT{% endblock %}

{% block extra_css %}
<style>
    tr.groep-kop td { background: var(--surface-muted); padding: 0; }
    tr.groep-kop button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%;
                          padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: .82em; letter-spacing: .06em;
                          text-transform: uppercase; color: var(--text-muted, #475569); }
    tr.groep-kop button:hover { color: var(--primary-color); }
    tr.groep-kop button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
    tr.groep-kop .pijl { display: inline-block; transition: transform .15s; }
    tbody.dicht tr.groep-kop .pijl { transform: rotate(-90deg); }
    tbody.dicht tr.school-rij { display: none; }
    tr.groep-kop .aantal { font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--surface);
                           border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; }
    td.school-naam { width: 100%; }
    td.school-naam .badge { margin-left: 6px; }
    td.koppelingen { white-space: nowrap; }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>🏫 Scholen</h2>
        <div class="actions">
            <form method="POST" action="{{ url_for('scholen.alles_testen') }}" style="margin:0"
                  onsubmit="showLoader('Koppelingen van alle scholen testen...')">
                <button type="submit" class="btn-light" title="Test de koppelingen van alle actieve scholen">🩺 Alle scholen testen</button>
            </form>
            <a href="{{ url_for('scholen.nieuw') }}" class="btn btn-success">➕ Nieuwe school</a>
        </div>
    </div>

    <div class="table-wrap">
        <table>
            {% for g in groepen %}
            <tbody class="groep" data-groep="{{ g.code }}">
                <tr class="groep-kop"><td colspan="3">
                    <button type="button" aria-expanded="true"><span class="pijl">▾</span> {{ g.label }}
                        <span class="aantal">{{ g.scholen|length }}</span></button>
                </td></tr>
            {% for s in g.scholen %}
                <tr class="school-rij">
                    <td class="school-naam">
                        <strong>{{ s.naam }}</strong>
                        {% if not s.actief %}<span class="badge badge-warning">inactief</span>{% endif %}
                        {% if school and school.code == s.code %}<span class="badge badge-info">huidige</span>{% endif %}
                    </td>
                    <td class="koppelingen">
                        {% for b in badges[s.code] %}
                        <span class="badge {{ {'ok': 'badge-success', 'fout': 'badge-danger', 'ongetest': 'badge-warning'}.get(b.toestand, '') }}"
                              title="{{ b.titel }}">{{ {'ok': '✓', 'fout': '✗', 'ongetest': '?'}.get(b.toestand, '–') }} {{ b.label }}</span>
                        {% endfor %}
                    </td>
                    <td class="actions nowrap">
                        {% if s.actief %}
                        <a href="{{ url_for('scholen.wissel', code=s.code) }}" class="btn btn-sm btn-secondary" title="Werken in deze school">↪ Openen</a>
                        {% endif %}
                        <a href="{{ url_for('scholen.bewerken', code=s.code) }}" class="btn btn-sm btn-light">✏️ Bewerken</a>
                        <form method="POST" action="{{ url_for('scholen.test', code=s.code) }}" style="display:inline;margin:0" onsubmit="showLoader('Verbindingen testen...')">
                            <button type="submit" class="btn-sm btn-light">🩺 Testen</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
            {% else %}
            <tbody>
                <tr class="empty-row"><td colspan="3">Nog geen scholen. Voeg er een toe, of importeer de oude config.ini met <code>python beheer.py importeer-config</code>.</td></tr>
            </tbody>
            {% endfor %}
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Groepen in- en uitklappen; de keuze wordt in deze browser onthouden
    document.querySelectorAll('tbody.groep').forEach(tb => {
        const sleutel = 'pivot.scholen.dicht.' + tb.dataset.groep;
        const knop = tb.querySelector('tr.groep-kop button');
        const zet = dicht => {
            tb.classList.toggle('dicht', dicht);
            knop.setAttribute('aria-expanded', String(!dicht));
        };
        try { zet(localStorage.getItem(sleutel) === '1'); } catch (e) { /* geen opslag */ }
        knop.addEventListener('click', () => {
            const dicht = !tb.classList.contains('dicht');
            zet(dicht);
            try { localStorage.setItem(sleutel, dicht ? '1' : '0'); } catch (e) { /* negeren */ }
        });
    });
</script>
{% endblock %}