{% extends "base.html" %}
{% block title %}Dashboard - MT Scan{% endblock %}
{% block extra_head %}
<style>
.cat-avg-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f3f4f6}
.cat-avg-label{width:220px;font-size:13px;font-weight:600}
.cat-avg-bar-bg{flex:1;height:16px;background:#f0f0f0;border-radius:8px;overflow:hidden}
.cat-avg-bar{height:100%;border-radius:8px;transition:width .5s}
.cat-avg-val{width:50px;font-weight:700;font-size:13px;text-align:right}
</style>
{% endblock %}
{% block content %}
<div class="page-header"><h1>Dashboard</h1><p class="subtitle">Overzicht MT Scans</p></div>
<div class="stats-grid">
<div class="stat-card"><div class="stat-number">{{ total }}</div><div class="stat-label">Totaal scans</div></div>
<div class="stat-card stat-success"><div class="stat-number">{{ completed }}</div><div class="stat-label">Afgerond</div></div>
<div class="stat-card stat-info"><div class="stat-number">{{ reports }}</div><div class="stat-label">Rapporten</div></div>
<div class="stat-card"><div class="stat-number" style="color:{% if avg_score >= 4 %}#22c55e{% elif avg_score >= 3 %}#F59E0B{% else %}#FF6240{% endif %}">{{ avg_score }}</div><div class="stat-label">Gemiddelde score</div></div>
</div>
<div class="card"><div class="card-header"><h2>Categorie Scores (alle scans)</h2></div><div style="padding:24px">
{% for cat in categories %}{% if cat in cat_avgs %}
<div class="cat-avg-row"><div class="cat-avg-label">{{ cat }}</div><div class="cat-avg-bar-bg"><div class="cat-avg-bar" style="width:{{ (cat_avgs[cat]/5)*100 }}%;background:{% if cat_avgs[cat] >= 4 %}#22c55e{% elif cat_avgs[cat] >= 3 %}#F59E0B{% else %}#FF6240{% endif %}"></div></div><div class="cat-avg-val" style="color:{% if cat_avgs[cat] >= 4 %}#22c55e{% elif cat_avgs[cat] >= 3 %}#F59E0B{% else %}#FF6240{% endif %}">{{ cat_avgs[cat] }}/5</div></div>
{% endif %}{% endfor %}
</div></div>
<div class="card"><div class="card-header"><h2>Alle Scans</h2></div><div class="table-responsive"><table class="table"><thead><tr><th>Bedrijf</th><th>Branche</th><th>Datum</th><th>Status</th><th>Acties</th></tr></thead><tbody>
{% for scan in scans %}
<tr><td><strong>{{ scan.company_name }}</strong></td><td>{{ scan.org_sector or "-" }}</td><td>{{ scan.created_date[:10] }}</td><td><span class="badge badge-{{ scan.status }}">{{ scan.status }}</span></td><td><a href="{{ bp }}/admin/scan/{{ scan.id }}" class="btn btn-sm btn-outline">Bekijk</a></td></tr>
{% else %}
<tr><td colspan="5" class="text-center text-muted">Nog geen scans</td></tr>
{% endfor %}
</tbody></table></div></div>
{% endblock %}