{% extends "base.html" %}

{% block title %}{{ groep.naam }}{% endblock %}
{% block page_title %}Verzendlijst{% endblock %}

{% block extra_css %}
<style>
    .lijst-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; align-items: start; }
    @media (max-width: 900px) { .lijst-grid { grid-template-columns: 1fr; } }
    .lijst-grid .card { margin: 0; }
    .mail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
    .lid-acties { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
    .lid-acties form { margin: 0; }
    .lid-acties select { width: auto; padding: 4px 6px; font-size: .9em; }
    .toevoegen { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-bottom: 14px; }
    .toevoegen textarea { min-height: 70px; }
    .toevoegen .rechts { display: flex; flex-direction: column; gap: 8px; }
    .zoek-lid { margin-bottom: 10px; }
</style>
{% endblock %}

{% block content %}
<p style="margin:0 0 14px"><a href="{{ url_for('verzendlijsten.overzicht') }}">← Alle verzendlijsten</a></p>

<div class="lijst-grid">
    <div class="card">
        <h2 class="card-title">📮 {{ groep.naam }}</h2>
        <p class="mail" style="margin-top:-6px">{{ groep.email }}</p>
        {% if groep.aliassen %}<p class="muted small">Ook bereikbaar via: {{ groep.aliassen|join(', ') }}</p>{% endif %}

        <form method="POST" action="{{ url_for('verzendlijsten.bewerken', email=groep.email) }}" onsubmit="showLoader('Opslaan...')">
            <div class="field">
                <label for="naam">Naam</label>
                <input type="text" id="naam" name="naam" required value="{{ groep.naam }}">
            </div>
            <div class="field">
                <label for="beschrijving">Beschrijving</label>
                <textarea id="beschrijving" name="beschrijving" rows="3">{{ groep.beschrijving }}</textarea>
            </div>
            {% if huidig_wie %}
            <div class="field">
                <label for="wie_mailt">Wie mag mailen naar de lijst?</label>
                <select id="wie_mailt" name="wie_mailt">
                    {% for w, l in wie_mailt %}<option value="{{ w }}" {% if w == huidig_wie %}selected{% endif %}>{{ l }}</option>{% endfor %}
                    {% if huidig_wie not in wie_mailt|map('first') %}<option value="" selected>Andere instelling ({{ huidig_wie }}) – niet wijzigen</option>{% endif %}
                </select>
            </div>
            {% else %}
            <p class="field-hint">"Wie mag mailen" kan hier niet getoond worden: daarvoor moet de scope
                <code>apps.groups.settings</code> bij het serviceaccount staan en de Groups Settings API aan staan.</p>
            {% endif %}
            <button type="submit">💾 Opslaan</button>
        </form>
    </div>

    <div class="card">
        <div class="page-head">
            <h2 style="margin:0">👥 Leden <span class="muted small">({{ leden|length }})</span></h2>
        </div>
        <form method="POST" action="{{ url_for('verzendlijsten.leden_toevoegen', email=groep.email) }}" class="toevoegen"
              onsubmit="showLoader('Leden toevoegen...')">
            <div class="field" style="margin:0">
                <label for="adressen">Leden toevoegen</label>
                <textarea id="adressen" name="adressen" placeholder="Eén of meer e-mailadressen (ook een andere verzendlijst), gescheiden door komma's of op aparte regels"></textarea>
            </div>
            <div class="rechts">
                <select name="rol" aria-label="Rol">
                    {% for r, l in rollen %}<option value="{{ r }}">{{ l }}</option>{% endfor %}
                </select>
                <button type="submit">➕ Toevoegen</button>
            </div>
        </form>

        {% if leden|length > 10 %}
        <input type="search" id="zoekLid" class="zoek-lid" placeholder="Zoek een lid..." aria-label="Zoek een lid">
        {% endif %}
        <div class="table-wrap">
            <table>
                <thead><tr><th>E-mailadres</th><th>Soort</th><th class="actions">Rol</th></tr></thead>
                <tbody id="ledenBody">
                {% for m in leden %}
                    <tr data-zoek="{{ m.email|lower }}">
                        <td class="mail">{{ m.email }}</td>
                        <td class="muted small">{{ {'USER': 'Gebruiker', 'GROUP': 'Verzendlijst', 'CUSTOMER': 'Hele organisatie', 'EXTERNAL': 'Extern'}.get(m.soort, m.soort) }}</td>
                        <td class="actions">
                            <span class="lid-acties">
                                <form method="POST" action="{{ url_for('verzendlijsten.lid_rol', email=groep.email) }}">
                                    <input type="hidden" name="lid" value="{{ m.email }}">
                                    <select name="rol" aria-label="Rol van {{ m.email }}" onchange="showLoader('Rol aanpassen...'); this.form.submit()">
                                        {% for r, l in rollen %}<option value="{{ r }}" {% if r == m.rol %}selected{% endif %}>{{ l }}</option>{% endfor %}
                                    </select>
                                </form>
                                <form method="POST" action="{{ url_for('verzendlijsten.lid_verwijderen', email=groep.email) }}"
                                      onsubmit="return confirm('{{ m.email }} uit deze verzendlijst halen?') && (showLoader('Verwijderen...'), true)">
                                    <input type="hidden" name="lid" value="{{ m.email }}">
                                    <button type="submit" class="btn-sm btn-ghost" title="Uit de lijst halen">🗑️</button>
                                </form>
                            </span>
                        </td>
                    </tr>
                {% else %}
                    <tr class="empty-row"><td colspan="3">Deze verzendlijst heeft nog geen leden.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const zoekLid = document.getElementById('zoekLid');
    if (zoekLid) zoekLid.addEventListener('input', () => {
        const z = zoekLid.value.trim().toLowerCase();
        document.querySelectorAll('#ledenBody tr').forEach(tr => tr.style.display = !z || (tr.dataset.zoek || '').includes(z) ? '' : 'none');
    });
</script>
{% endblock %}