{% extends "shared/frontend/base.html" %}
{% block title %}Fravær · status og rapport · BMC Hub{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="/static/vendor/flatpickr/flatpickr.min.css"><link rel="stylesheet" href="/static/css/planning-dates.css?v=20261018-1">{% endblock %}
{% block content %}
<main id="absenceReport">
 <header class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3"><div><h1 class="h3 mb-1">Fravær · status og rapport</h1><p class="text-secondary mb-0">Ferie, sygdom og andet fravær for de medarbejdere, du har adgang til.</p></div><a href="/planning" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1" aria-hidden="true"></i>Planlægning</a></header>
 <section class="card mb-3"><div class="card-body"><form id="absenceFilters" class="row g-3 align-items-end"><div class="col-sm-3"><label class="form-label" for="absenceFrom">Fra og med</label><input id="absenceFrom" name="start_date" type="date" class="form-control" required></div><div class="col-sm-3"><label class="form-label" for="absenceTo">Til og med</label><input id="absenceTo" name="end_date" type="date" class="form-control" required></div><div class="col-sm-3"><label class="form-label" for="absenceEmployee">Medarbejder</label><select id="absenceEmployee" name="user_id" class="form-select"><option value="">Alle tilladte medarbejdere</option></select></div><div class="col-sm-3 d-flex gap-2"><button class="btn btn-primary" type="submit">Vis rapport</button><button id="absenceExport" class="btn btn-outline-secondary" type="button" disabled><i class="bi bi-download me-1" aria-hidden="true"></i>CSV</button></div></form></div></section>
 <p id="absenceError" class="alert alert-danger" role="alert" hidden></p><p id="absenceStatus" class="small text-secondary" role="status" aria-live="polite"></p>
 <div id="absenceTotals" class="row g-3 mb-3"></div>
 <section class="card mb-3"><div class="card-header"><h2 class="h5 mb-0">Overblik pr. fraværstype</h2></div><div class="table-responsive"><table class="table table-hover mb-0"><thead><tr><th>Fraværstype / medarbejder</th><th>Arbejdsdage</th><th>Planlagte timer</th><th>Faktisk registreret</th></tr></thead><tbody id="absenceSummary"></tbody></table></div></section>
 <section class="card"><div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2"><h2 class="h5 mb-0">Fraværsperioder pr. type</h2><details><summary class="small">Hvordan læses rapporten?</summary><p class="small mt-2 mb-0">Perioden er inklusive begge datoer. Planlagte dage og timer beregnes i medarbejderens arbejdstid; overlap tælles kun én gang i overblikket. Inden for hver type tælles overlap kun én gang. Overlap mellem forskellige typer kan betyde, at typernes sum er større end det samlede overblik. En dag svarer til medarbejderens normale arbejdsdag. Registreret fravær vises separat og kræver en eksplicit tidsregistrering. Årsager vises kun med særskilt adgang. Private noter eksporteres aldrig.</p></details></div><div class="table-responsive"><table class="table table-hover mb-0"><thead><tr><th>Medarbejder</th><th>Fravær</th><th>Fra</th><th>Til</th><th>Arbejdsdage</th><th>Planlagte timer</th><th>Faktisk registreret</th><th>Status</th></tr></thead><tbody id="absenceRows"></tbody></table></div><nav class="card-body d-flex justify-content-between align-items-center" aria-label="Fraværsperioder"><button id="absencePrev" class="btn btn-sm btn-outline-secondary" disabled>Forrige</button><span id="absencePage" class="small text-secondary"></span><button id="absenceNext" class="btn btn-sm btn-outline-secondary" disabled>Næste</button></nav></section>
 <p class="small text-secondary mt-2">Manglende arbejdstider vises som ukendt. Rapporten er et overblik over planlagt og registreret fravær; den beregner ikke resterende feriesaldo.</p>
</main>
{% endblock %}
{% block extra_js %}<script src="/static/vendor/flatpickr/flatpickr.min.js"></script><script src="/static/vendor/flatpickr/da.js"></script><script src="/static/js/planning-dates.js?v=20261018-1"></script><script src="/static/js/absence-report.js?v=20261018-4"></script>{% endblock %}