{% load humanize %}
{% load trend %}

<!-- Header -->
<div class="header pb-8 pt-5 pt-md-6 bg-secondary">
    <div class="container-fluid">
        <div class="header-body">
        <!-- Card stats -->
        <div class="row">
            <div class="col-xl-3 col-lg-6">
            <div class="card shadow card-stats mb-4 mb-xl-0 fade-in-top">
                <div class="card-body ">
                <div class="row">
                    <div class="col">
                    <h5 class="card-title text-uppercase text-muted mb-0">Confirmed</h5>
                    <span id="daily_confirmed_label" class="h2 font-weight-bold mb-0">0</span>
                    </div>
                    <div class="col-auto">
                    <div class="icon icon-shape bg-primary text-white rounded-circle shadow">
                        <i class="fas fa-virus"></i>
                    </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-muted text-sm">
                    <span id="trend_confirmed_label" class="mr-2">+0%</span>
                    <span class="text-nowrap">Since last week</span>
                </p>
                </div>
            </div>
            </div>
            <div class="col-xl-3 col-lg-6">
            <div class="card shadow card-stats mb-4 mb-xl-0 fade-in-top">
                <div class="card-body ">
                <div class="row">
                    <div class="col">
                    <h5 class="card-title text-uppercase text-muted mb-0">Recovered</h5>
                    <span id="daily_recovered_label" class="h2 font-weight-bold mb-0">0</span>
                    </div>
                    <div class="col-auto">
                    <div class="icon icon-shape bg-green text-white rounded-circle shadow">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-muted text-sm">
                    <span id="trend_recovered_label" class="mr-2">+0%</span>
                    <span class="text-nowrap">Since last week</span>
                </p>
                </div>
            </div>
            </div>
            <div class="col-xl-3 col-lg-6">
            <div class="card shadow card-stats mb-4 mb-xl-0 fade-in-top">
                <div class="card-body ">
                <div class="row">
                    <div class="col">
                    <h5 class="card-title text-uppercase text-muted mb-0">Deaths</h5>
                    <span id="daily_deaths_label" class="h2 font-weight-bold mb-0">0</span>
                    </div>
                    <div class="col-auto">
                    <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                        <i class="fa fa-skull-crossbones"></i>
                    </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-muted text-sm">
                    <span id="trend_deaths_label" class="mr-2">+0%</span>
                    <span class="text-nowrap">Since last week</span>
                </p>
                </div>
            </div>
            </div>
            <div class="col-xl-3 col-lg-6">
            <div class="card shadow card-stats mb-4 mb-xl-0 fade-in-top">
                <div class="card-body ">
                <div class="row">
                    <div class="col">
                    <h5 class="card-title text-uppercase text-muted mb-0">Death Rate</h5>
                    <span id="daily_death_rate_label" class="h2 font-weight-bold mb-0">0</span>
                    </div>
                    <div class="col-auto">
                    <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                        <i class="fa fa-percent"></i>
                    </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-muted text-sm">
                    <span id="trend_death_rate_label" class="mr-2">+0</span>
                    <span class="text-nowrap">Since last week</span>
                </p>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>