{% extends "shared/frontend/base.html" %}

{% block title %}Tekniker Dashboard - Vælg Variant{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">🛠️ Tekniker Dashboard</h1>
            <p class="text-muted mb-0">Vælg den visning der passer bedst til {{ technician_name }} (bruger #{{ technician_user_id }})</p>
        </div>
        <form method="get" action="/ticket/dashboard/technician" class="d-flex align-items-center gap-2">
            <label for="technician_user_id" class="form-label mb-0 text-muted small">Bruger ID</label>
            <input type="number" class="form-control form-control-sm" name="technician_user_id" id="technician_user_id" value="{{ technician_user_id }}" style="width: 100px;">
            <button type="submit" class="btn btn-sm btn-outline-primary">Skift</button>
        </form>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-2">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Nye sager</div>
                    <div class="h4 mb-0">{{ kpis.new_cases_count }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Mine sager</div>
                    <div class="h4 mb-0">{{ kpis.my_cases_count }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Dagens opgaver</div>
                    <div class="h4 mb-0">{{ kpis.today_tasks_count }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Haste / over SLA</div>
                    <div class="h4 mb-0 text-danger">{{ kpis.urgent_overdue_count }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="small text-muted">Mine opportunities</div>
                    <div class="h4 mb-0">{{ kpis.my_opportunities_count }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title mb-2">Version 1: Overblik</h5>
                    <p class="text-muted small mb-3">KPI-kort + kompakte lister. God til hurtig prioritering.</p>
                    <ul class="small text-muted mb-4">
                        <li>Fokus på status og antal</li>
                        <li>Hurtig scanning af nye/mine sager</li>
                        <li>Minimal støj</li>
                    </ul>
                    <a href="/ticket/dashboard/technician/v1?technician_user_id={{ technician_user_id }}" class="btn btn-primary mt-auto">Åbn Version 1</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title mb-2">Version 2: Workboard</h5>
                    <p class="text-muted small mb-3">3 kolonner med arbejdsflow. God til daglig drift.</p>
                    <ul class="small text-muted mb-4">
                        <li>Visuel opdeling af arbejdsområder</li>
                        <li>Haste-emner centralt</li>
                        <li>God til standups</li>
                    </ul>
                    <a href="/ticket/dashboard/technician/v2?technician_user_id={{ technician_user_id }}" class="btn btn-primary mt-auto">Åbn Version 2</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title mb-2">Version 3: Power Table</h5>
                    <p class="text-muted small mb-3">Tabel-fokuseret dashboard. God til hurtig sortering og detaljevisning.</p>
                    <ul class="small text-muted mb-4">
                        <li>Høj datatæthed</li>
                        <li>Nemt at sammenligne felter</li>
                        <li>Målrettet erfarne brugere</li>
                    </ul>
                    <a href="/ticket/dashboard/technician/v3?technician_user_id={{ technician_user_id }}" class="btn btn-primary mt-auto">Åbn Version 3</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}