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

{% block title %}Afwezigheden & activiteiten{% endblock %}
{% block page_title %}Afwezigheden & activiteiten{% endblock %}
{% block main_class %}medium{% endblock %}

{% block extra_css %}
<style>
    .new-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
    @media (max-width: 760px) { .new-grid { grid-template-columns: 1fr; } }
    .new-card { display: flex; gap: 14px; align-items: center; padding: 18px; background: var(--surface);
                border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
                text-decoration: none; color: var(--text); transition: transform .12s, box-shadow .12s, border-color .12s; }
    .new-card:hover { transform: translateY(-2px); border-color: var(--primary-color); }
    .new-card .ic { font-size: 28px; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-light); flex-shrink: 0; }
    .new-card strong { display: block; }
    .new-card span.sub { font-size: 13px; color: var(--text-muted); }
    tr.past td { opacity: .6; }
    tr.click { cursor: pointer; }
</style>
{% endblock %}

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

<div class="new-grid">
    <a class="new-card" href="{{ url_for('personeel.nieuw', soort='afwezigheid') }}">
        <span class="ic">🤒</span><span><strong>Afwezigheid melden</strong><span class="sub">Ziek of onverwacht afwezig</span></span></a>
    <a class="new-card" href="{{ url_for('personeel.nieuw', soort='nascholing') }}">
        <span class="ic">🎓</span><span><strong>Nascholing aanvragen</strong><span class="sub">Goedkeuring door de directie</span></span></a>
    <a class="new-card" href="{{ url_for('personeel.nieuw', soort='uitstap') }}">
        <span class="ic">🚌</span><span><strong>Uitstap aanvragen</strong><span class="sub">Met klassen en begeleiders</span></span></a>
</div>

<div class="card">
    <h2 class="card-title">Mijn meldingen en aanvragen</h2>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Soort</th><th>Titel</th><th>Wanneer</th><th>Status</th></tr></thead>
            <tbody>
            {% for i in items %}
                <tr class="click {{ 'past' if i.Tot_datum < vandaag }}" onclick="location.href='{{ url_for('personeel.detail', aid=i.ID) }}'">
                    <td class="nowrap">{{ soort_label(i.Soort) }}</td>
                    <td><a href="{{ url_for('personeel.detail', aid=i.ID) }}"><strong>{{ i.Titel }}</strong></a>
                        {% if i.Ingediend_door %}<div class="muted small">gemeld door {{ i.Ingediend_door }}</div>{% endif %}</td>
                    <td class="nowrap">{{ periode(i) }}</td>
                    <td>{{ status_badge(i.Status) }}</td>
                </tr>
            {% else %}
                <tr class="empty-row"><td colspan="4">Je hebt nog geen meldingen of aanvragen.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}