{% extends "base.html" %}

{% block title %}Inloggen{% endblock %}
{% block body_class %}auth-page{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}auth-wrap{% endblock %}
{% block flashes %}{% endblock %}

{% block content %}
<img class="auth-logo" src="{{ url_for('static', filename='pivot_logo.png') }}" alt="PIVOT – Platform voor de Inventarisatie en Verbinding tussen Onderwijs Tools">

<form class="card auth-card" method="POST" action="{{ url_for('auth.login') }}">
    <h2>🔐 Inloggen</h2>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category if category != 'error' else 'danger' }}">{{ message }}</div>
      {% endfor %}
    {% endwith %}

    {% if school_vast %}
        <p class="muted" style="text-align:center;margin-top:-6px">🏫 {{ gekozen.naam }}</p>
    {% endif %}

    <div class="field">
        <label for="username">Gebruikersnaam</label>
        <input type="text" id="username" name="username" required autocomplete="username" autofocus>
    </div>
    <div class="field">
        <label for="password">Wachtwoord</label>
        <input type="password" id="password" name="password" required autocomplete="current-password">
    </div>
    <button type="submit" class="btn-block btn-lg">Aanmelden</button>

    {% if google_aan %}
    <div class="separator">of</div>

    <a href="{{ url_for('auth.google_login', school=gekozen.code if school_vast else None) }}" class="google-btn" id="google-btn">
        <img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" alt="">
        Inloggen met Google
    </a>
    {% endif %}
</form>
{% endblock %}

{% block footer %}
<footer class="app-footer">
    PIVOT – Versie {{ version }} – Kristof Verbruggen
</footer>
{% endblock %}