{% extends 'base.html' %}

{% block title %}Dashboard | {{ project_name }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="display-4">Dashboard</h1>
    <p class="lead">Real-time operational overview of emergency response units.</p>
</div>

<div class="row">
    <div class="col-lg-8 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">Live Unit Map</h5>
            </div>
            <div class="card-body">
                <div id="map-placeholder" class="bg-light" style="height: 500px; display: flex; align-items: center; justify-content: center;">
                    <p class="text-muted">Map visualization will be implemented here.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Key Performance Indicators</h5>
            </div>
            <div class="card-body">
                <div class="kpi-grid">
                    <div class="kpi-card">
                        <h6>Avg. Response Time</h6>
                        <p class="kpi-value">-- min</p>
                    </div>
                    <div class="kpi-card">
                        <h6>Active Hotspots</h6>
                        <p class="kpi-value">--</p>
                    </div>
                    <div class="kpi-card">
                        <h6>Available Units</h6>
                        <p class="kpi-value">-- / 15</p>
                    </div>
                    <div class="kpi-card">
                        <h6>Dispatches (24h)</h6>
                        <p class="kpi-value">--</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
