{% extends "base.html" %}
{% block title %}Profile — Admin{% endblock %}
{% block content %}
<div class="section-header">
    <h1>SuS-Profile</h1>
    <div>
        <a href="{{ url_for('admin.profile_karten') }}" class="btn btn-secondary">PIN-Karten drucken</a>
        <a href="{{ url_for('admin.admin_logout') }}" class="btn btn-secondary">Admin-Logout</a>
    </div>
</div>

<!-- Neues Profil -->
<div class="card">
    <h2>Neues Profil anlegen</h2>
    <form method="post" action="{{ url_for('admin.profil_neu') }}"
          style="display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 1fr auto; gap: 0.6rem; align-items: end;">
        <div>
            <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Vorname</label>
            <input type="text" name="vorname" required style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
        </div>
        <div>
            <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Rolle</label>
            <select name="rolle" id="rolle-select" style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                <option value="schueler">Schueler</option>
                <option value="power">🔧 Power-User</option>
            </select>
        </div>
        <div id="tier-feld">
            <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Tier-Icon</label>
            <select name="tier" id="tier-select" style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                <option value="">— waehlen —</option>
                {% for t in tiere %}
                <option value="{{ t.slug }}">{{ t.emoji }} {{ t.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label style="display:block; font-size: 0.85rem; color: var(--text-light);">AG</label>
            <select name="ag_id" required style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                {% for ag in ags %}
                <option value="{{ ag.id }}">{{ ag.name }}</option>
                {% endfor %}
            </select>
        </div>
        <button class="btn btn-primary">Anlegen + PIN</button>
    </form>
    <p style="margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-light);">
        Eine 4-stellige PIN wird automatisch erzeugt und nach dem Speichern <strong>einmal</strong> angezeigt.
        <strong>Power-User</strong> (fortgeschrittene SuS oder du selbst) brauchen kein Tier und duerfen
        Drucker + Software verwalten + Slots fuer andere anlegen + mehrere Projekte fuehren.
    </p>
    <script>
    // Tier-Auswahl ausblenden, wenn Power-User gewaehlt wird
    (function() {
        var rolle = document.getElementById('rolle-select');
        var tierFeld = document.getElementById('tier-feld');
        var tierSelect = document.getElementById('tier-select');
        function sync() {
            var istPower = rolle.value === 'power';
            tierFeld.style.opacity = istPower ? '0.4' : '1';
            tierSelect.required = !istPower;
            tierSelect.disabled = istPower;
        }
        rolle.addEventListener('change', sync);
        sync();
    })();
    </script>
</div>

<!-- Liste -->
<div class="card">
    <h2>Alle Profile</h2>
    {% if profile %}
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Vorname</th>
                <th>Tier</th>
                <th>AG</th>
                <th>Status</th>
                <th>Reservieren</th>
                <th>Angelegt</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for p in profile %}
            <tr style="{% if not p.aktiv %}opacity: 0.5;{% endif %}">
                <td style="font-size: 1.5rem;">{% if p.rolle == 'power' %}🔧{% else %}{{ tier_emoji(p.tier) }}{% endif %}</td>
                <td><strong>{{ p.vorname }}</strong>
                    {% if p.rolle == 'power' %}<span class="badge badge-mittel" style="margin-left: 0.3rem;">Power</span>{% endif %}
                </td>
                <td>{% if p.rolle == 'power' %}<span style="color: var(--text-light);">—</span>{% else %}{{ tier_name(p.tier) }}{% endif %}</td>
                <td>{{ p.ag_name or p.ag_id }}</td>
                <td>{% if p.aktiv %}<span class="badge badge-anfaenger">aktiv</span>{% else %}<span class="badge">inaktiv</span>{% endif %}</td>
                <td>
                    <form method="post" action="{{ url_for('admin.profil_reservieren_toggle', profil_id=p.id) }}" style="display:inline;">
                        {% if p.reservieren_freigeschaltet %}
                        <button class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;"
                                title="Klicken zum Sperren">✅ freigeschaltet</button>
                        {% else %}
                        <button class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem; color: var(--text-light);"
                                title="Klicken zum Freischalten">⚪ noch nicht</button>
                        {% endif %}
                    </form>
                </td>
                <td style="font-size: 0.85rem; color: var(--text-light);">{{ p.erstellt_am[:10] if p.erstellt_am else '' }}</td>
                <td>
                    <form method="post" action="{{ url_for('admin.profil_pin_reset', profil_id=p.id) }}" style="display:inline;"
                          onsubmit="return confirm('Neue PIN fuer {{ p.vorname }} generieren?')">
                        <button class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.85rem;">PIN neu</button>
                    </form>
                    <form method="post" action="{{ url_for('admin.profil_aktiv_toggle', profil_id=p.id) }}" style="display:inline;">
                        <button class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.85rem;">
                            {% if p.aktiv %}deaktivieren{% else %}aktivieren{% endif %}
                        </button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color: var(--text-light);">Noch keine Profile. Leg oben das erste an.</p>
    {% endif %}
</div>
{% endblock %}