{% extends "base.html" %}
{% from "_personeel.html" import subnav, status_badge, soort_label, periode with context %}

{% block title %}Te beoordelen{% endblock %}
{% block page_title %}Te beoordelen{% endblock %}
{% block main_class %}medium{% endblock %}

{% block extra_css %}
<style>
    .req { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
    .req h3 { margin: 0; font-size: 1.05rem; }
    .req .meta { color: var(--text-muted); font-size: 14px; }
    .req .desc { grid-column: 1 / -1; font-size: 14px; white-space: pre-line; }
    .quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); }
    .quick input[type=text] { flex: 1 1 240px; width: auto; }
    .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
    .chips span { padding: 1px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary-color); font-size: 12px; font-weight: 600; }
</style>
{% endblock %}

{% block content %}
{{ subnav('beoordelen') }}

{% for i in open_items %}
<div class="card">
    <div class="req">
        <div>
            <h3><a href="{{ url_for('personeel.detail', aid=i.ID) }}">{{ soort_label(i.Soort) }}: {{ i.Titel }}</a></h3>
            <div class="meta"><strong>{{ i.Naam }}</strong> · {{ periode(i) }}{% if i.Kost %} · € {{ '%.2f'|format(i.Kost)|replace('.', ',') }}{% endif %}</div>
            {% if i.Klassen %}<div class="chips" style="margin-top:6px">{% for k in i.Klassen.split(',') %}<span>{{ k.strip() }}</span>{% endfor %}</div>{% endif %}
        </div>
        <div>{{ status_badge(i.Status) }}</div>
        {% if i.Omschrijving %}<div class="desc">{{ i.Omschrijving }}</div>{% endif %}
        <form class="quick" method="POST" action="{{ url_for('personeel.beslissing', aid=i.ID) }}" onsubmit="showLoader()">
            <input type="hidden" name="volgende" value="1">
            <input type="text" name="tekst" placeholder="Commentaar (verplicht bij weigeren of vraag)">
            <button type="submit" name="actie" value="goedgekeurd" class="btn-success btn-sm">✓ Goedkeuren</button>
            <button type="submit" name="actie" value="vraag" class="btn-warning btn-sm">❓ Vraag</button>
            <button type="submit" name="actie" value="geweigerd" class="btn-danger btn-sm">✕ Weigeren</button>
        </form>
    </div>
</div>
{% else %}
<div class="card text-center"><p style="margin:0">🎉 Er wacht niets op een beslissing.</p></div>
{% endfor %}

{% if recent %}
<div class="card">
    <h3 class="card-title">Recent beslist</h3>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Soort</th><th>Wie</th><th>Titel</th><th>Wanneer</th><th>Beslissing</th></tr></thead>
            <tbody>
            {% for i in recent %}
                <tr>
                    <td class="nowrap">{{ soort_label(i.Soort) }}</td>
                    <td>{{ i.Naam }}</td>
                    <td><a href="{{ url_for('personeel.detail', aid=i.ID) }}">{{ i.Titel }}</a></td>
                    <td class="nowrap">{{ periode(i) }}</td>
                    <td>{{ status_badge(i.Status) }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}
{% endblock %}