{% extends "base.html" %}

{% block title %}Usage & Quotas{% endblock %}

{% block content %}

<!-- Plan Header -->
<div class="plan-header">
    <div class="plan-header-left">
        <div class="plan-badge"><i class="fas fa-layer-group"></i> <span data-i18n="usage_page.current_plan">Current Plan</span></div>
        <div class="plan-name">{{ current_tier.name if current_tier else 'Free Tier' }}</div>
        <div class="plan-subtitle">
            {% if current_tier and not current_tier.is_default %}
            <a href="{{ url_for(request, '/dashboard/subscription') }}" class="plan-link" data-i18n="usage_page.manage_subscription">Manage subscription</a>
            {% else %}
            <a href="{{ url_for(request, '/dashboard/pricing') }}" class="plan-link upgrade" data-i18n="usage_page.upgrade">Upgrade plan</a>
            {% endif %}
        </div>
    </div>
    <div class="plan-header-right">
        <div class="plan-stat">
            <div class="plan-stat-value">{{ "{:,}".format(requests_today) }}</div>
            <div class="plan-stat-label" data-i18n="usage_page.requests_today">requests today</div>
        </div>
        <div class="plan-stat-divider"></div>
        <div class="plan-stat">
            <div class="plan-stat-value">{{ "{:,}".format(requests_month) }}</div>
            <div class="plan-stat-label" data-i18n="usage_page.requests_month">requests this month</div>
        </div>
        <div class="plan-stat-divider"></div>
        <div class="plan-stat">
            <div class="plan-stat-value">
                {% if tokens_24h >= 1000000 %}{{ "%.1f"|format(tokens_24h / 1000000) }}M
                {% elif tokens_24h >= 1000 %}{{ "%.1f"|format(tokens_24h / 1000) }}K
                {% else %}{{ tokens_24h }}{% endif %}
            </div>
            <div class="plan-stat-label" data-i18n="usage_page.tokens_24h">tokens (24h)</div>
        </div>
    </div>
</div>

<!-- Activity Quotas -->
<div class="section-header">
    <div class="section-title"><i class="fas fa-chart-line" style="color:var(--color-link);"></i> <span data-i18n="usage_page.activity_quotas">Activity Quotas</span></div>
    <div class="section-subtitle" data-i18n="usage_page.activity_quotas_desc">Time-based limits that reset automatically</div>
</div>

<div class="activity-grid">

    <!-- Requests Today -->
    {% set daily_pct = (requests_today / max_requests_per_day * 100) if max_requests_per_day and max_requests_per_day > 0 else -1 %}
    {% set daily_clr = '#ef4444' if daily_pct >= 90 else ('#fbbf24' if daily_pct >= 75 else 'var(--color-link)') %}
    <div class="gauge-card">
        <div class="gauge-header">
            <div class="gauge-icon" style="background:rgba(96,165,250,.12); color:var(--color-link);"><i class="fas fa-bolt"></i></div>
            <div>
                <div class="gauge-label" data-i18n="usage_page.requests_today">Requests Today</div>
                <div class="gauge-sublabel" data-reset-ts="{{ daily_reset_ts }}" data-i18n="usage_page.resets_midnight">Resets at midnight UTC</div>
            </div>
        </div>
        <div class="gauge-wrap">
            {% if max_requests_per_day == -1 or max_requests_per_day is none or max_requests_per_day <= 0 %}
            <div class="gauge-unlimited" style="color:var(--color-link);"><i class="fas fa-infinity"></i></div>
            {% else %}
            <svg class="gauge-svg" viewBox="0 0 120 120">
                <circle class="gauge-track" cx="60" cy="60" r="48"/>
                <circle class="gauge-prog" cx="60" cy="60" r="48"
                    style="stroke:{{ daily_clr }}; stroke-dashoffset:{{ (301.59 * (1 - [daily_pct, 100]|min / 100))|round(2) }}"/>
            </svg>
            {% endif %}
            <div class="gauge-center">
                <div class="gauge-big">{{ "{:,}".format(requests_today) }}</div>
                {% if max_requests_per_day and max_requests_per_day > 0 %}
                <div class="gauge-of">of {{ "{:,}".format(max_requests_per_day) }}</div>
                {% elif max_requests_per_day == -1 %}
                <div class="gauge-of" data-i18n="usage_page.unlimited">unlimited</div>
                {% endif %}
            </div>
        </div>
        <div class="gauge-footer">
            {% if daily_pct >= 0 %}
                {% set rem = max_requests_per_day - requests_today %}
                {% if rem > 0 %}<span class="gauge-remaining">{{ "{:,}".format(rem) }} remaining</span>
                {% else %}<span class="gauge-remaining" style="color:#ef4444;" data-i18n="usage_page.quota_reached">Quota reached</span>{% endif %}
                {% if daily_pct >= 90 %}<span class="usage-badge danger" data-i18n="usage_page.near_limit">Near limit</span>
                {% elif daily_pct >= 75 %}<span class="usage-badge warn" data-i18n="usage_page.getting_close">Getting close</span>{% endif %}
            {% else %}
                <span class="gauge-remaining unlim" data-i18n="usage_page.no_daily_cap">No daily cap</span>
            {% endif %}
        </div>
    </div>

    <!-- Requests This Month -->
    {% set monthly_pct = (requests_month / max_requests_per_month * 100) if max_requests_per_month and max_requests_per_month > 0 else -1 %}
    {% set monthly_clr = '#ef4444' if monthly_pct >= 90 else ('#fbbf24' if monthly_pct >= 75 else 'var(--color-link)') %}
    <div class="gauge-card">
        <div class="gauge-header">
            <div class="gauge-icon" style="background:rgba(102,126,234,.12); color:var(--color-link);"><i class="fas fa-calendar-days"></i></div>
            <div>
                <div class="gauge-label" data-i18n="usage_page.requests_month">Requests This Month</div>
                <div class="gauge-sublabel" data-reset-ts="{{ monthly_reset_ts }}" data-i18n="usage_page.resets_on_1st">Resets on the 1st</div>
            </div>
        </div>
        <div class="gauge-wrap">
            {% if max_requests_per_month == -1 or max_requests_per_month is none or max_requests_per_month <= 0 %}
            <div class="gauge-unlimited" style="color:var(--color-link);"><i class="fas fa-infinity"></i></div>
            {% else %}
            <svg class="gauge-svg" viewBox="0 0 120 120">
                <circle class="gauge-track" cx="60" cy="60" r="48"/>
                <circle class="gauge-prog" cx="60" cy="60" r="48"
                    style="stroke:{{ monthly_clr }}; stroke-dashoffset:{{ (301.59 * (1 - [monthly_pct, 100]|min / 100))|round(2) }}"/>
            </svg>
            {% endif %}
            <div class="gauge-center">
                <div class="gauge-big">{{ "{:,}".format(requests_month) }}</div>
                {% if max_requests_per_month and max_requests_per_month > 0 %}
                <div class="gauge-of">of {{ "{:,}".format(max_requests_per_month) }}</div>
                {% elif max_requests_per_month == -1 %}
                <div class="gauge-of" data-i18n="usage_page.unlimited">unlimited</div>
                {% endif %}
            </div>
        </div>
        <div class="gauge-footer">
            {% if monthly_pct >= 0 %}
                {% set rem = max_requests_per_month - requests_month %}
                {% if rem > 0 %}<span class="gauge-remaining">{{ "{:,}".format(rem) }} remaining</span>
                {% else %}<span class="gauge-remaining" style="color:#ef4444;" data-i18n="usage_page.quota_reached">Quota reached</span>{% endif %}
                {% if monthly_pct >= 90 %}<span class="usage-badge danger" data-i18n="usage_page.near_limit">Near limit</span>
                {% elif monthly_pct >= 75 %}<span class="usage-badge warn" data-i18n="usage_page.getting_close">Getting close</span>{% endif %}
            {% else %}
                <span class="gauge-remaining unlim" data-i18n="usage_page.no_monthly_cap">No monthly cap</span>
            {% endif %}
        </div>
    </div>

    <!-- Tokens 24h -->
    <div class="gauge-card">
        <div class="gauge-header">
            <div class="gauge-icon" style="background:rgba(34,211,238,.12); color:var(--color-link);"><i class="fas fa-coins"></i></div>
            <div>
                <div class="gauge-label" data-i18n="usage_page.tokens_24h">Tokens (last 24h)</div>
                <div class="gauge-sublabel" data-i18n="usage_page.tokens_combined">Input + output combined</div>
            </div>
        </div>
        <div class="gauge-wrap">
            <div class="gauge-unlimited" style="color:var(--color-link);"><i class="fas fa-infinity"></i></div>
            <div class="gauge-center">
                <div class="gauge-big" style="color:var(--color-link);">
                    {% if tokens_24h >= 1000000 %}{{ "%.1f"|format(tokens_24h / 1000000) }}M
                    {% elif tokens_24h >= 1000 %}{{ "%.1f"|format(tokens_24h / 1000) }}K
                    {% else %}{{ tokens_24h }}{% endif %}
                </div>
                <div class="gauge-of" data-i18n="usage_page.tokens_used">tokens used</div>
            </div>
        </div>
        <div class="gauge-footer">
            <span class="gauge-remaining unlim" data-i18n="usage_page.no_token_cap">No token cap on this plan</span>
        </div>
    </div>

</div>

<!-- Configuration Limits -->
<div class="section-header" style="margin-top:32px;">
    <div class="section-title"><i class="fas fa-sliders" style="color:var(--color-link);"></i> <span data-i18n="usage_page.config_limits">Configuration Limits</span></div>
    <div class="section-subtitle" data-i18n="usage_page.config_limits_desc">Persistent resource allocations for your account</div>
</div>

<div class="resource-grid">

    <!-- AI Providers -->
    {% set prov_pct = (providers_count / max_providers * 100) if max_providers and max_providers > 0 else -1 %}
    <div class="resource-card">
        <div class="resource-top">
            <div class="resource-icon" style="background:rgba(74,222,128,.12); color:#4ade80;"><i class="fas fa-plug"></i></div>
            <div class="resource-info">
                <div class="resource-label" data-i18n="usage_page.ai_providers">AI Providers</div>
                <div class="resource-sublabel" data-i18n="usage_page.ai_providers_desc">Configured provider integrations</div>
            </div>
            <div class="resource-count">
                <span class="resource-used">{{ providers_count }}</span>
                {% if max_providers == -1 %}<span class="resource-max">/ ∞</span>
                {% elif max_providers and max_providers > 0 %}<span class="resource-max">/ {{ max_providers }}</span>{% endif %}
            </div>
        </div>
        {% if max_providers and max_providers > 0 %}
        <div class="resource-bar-wrap">
            <div class="resource-bar" style="width:{{ [prov_pct, 100]|min }}%; background:{{ '#ef4444' if prov_pct >= 90 else ('#fbbf24' if prov_pct >= 75 else '#4ade80') }};"></div>
        </div>
        {% set free = max_providers - providers_count %}
        <div class="resource-bar-label">{{ "%.0f"|format([prov_pct, 100]|min) }}% used &middot; {{ free }} slot{{ 's' if free != 1 else '' }} free</div>
        {% else %}
        <div class="resource-bar-wrap unlimited-bar"></div>
        <div class="resource-bar-label unlim" data-i18n="usage_page.unlimited_slots">Unlimited slots available</div>
        {% endif %}
    </div>

    <!-- Rotations -->
    {% set rot_pct = (rotations_count / max_rotations * 100) if max_rotations and max_rotations > 0 else -1 %}
    <div class="resource-card">
        <div class="resource-top">
            <div class="resource-icon" style="background:rgba(251,146,60,.12); color:#fb923c;"><i class="fas fa-rotate"></i></div>
            <div class="resource-info">
                <div class="resource-label" data-i18n="usage_page.rotations">Rotations</div>
                <div class="resource-sublabel" data-i18n="usage_page.rotations_desc">Load balancing configurations</div>
            </div>
            <div class="resource-count">
                <span class="resource-used">{{ rotations_count }}</span>
                {% if max_rotations == -1 %}<span class="resource-max">/ ∞</span>
                {% elif max_rotations and max_rotations > 0 %}<span class="resource-max">/ {{ max_rotations }}</span>{% endif %}
            </div>
        </div>
        {% if max_rotations and max_rotations > 0 %}
        <div class="resource-bar-wrap">
            <div class="resource-bar" style="width:{{ [rot_pct, 100]|min }}%; background:{{ '#ef4444' if rot_pct >= 90 else ('#fbbf24' if rot_pct >= 75 else '#fb923c') }};"></div>
        </div>
        {% set free = max_rotations - rotations_count %}
        <div class="resource-bar-label">{{ "%.0f"|format([rot_pct, 100]|min) }}% used &middot; {{ free }} slot{{ 's' if free != 1 else '' }} free</div>
        {% else %}
        <div class="resource-bar-wrap unlimited-bar"></div>
        <div class="resource-bar-label unlim" data-i18n="usage_page.unlimited_slots">Unlimited slots available</div>
        {% endif %}
    </div>

    <!-- Autoselections -->
    {% set auto_pct = (autoselects_count / max_autoselections * 100) if max_autoselections and max_autoselections > 0 else -1 %}
    <div class="resource-card">
        <div class="resource-top">
            <div class="resource-icon" style="background:rgba(192,132,252,.12); color:#c084fc;"><i class="fas fa-wand-magic-sparkles"></i></div>
            <div class="resource-info">
                <div class="resource-label" data-i18n="usage_page.autoselections">Autoselections</div>
                <div class="resource-sublabel" data-i18n="usage_page.autoselections_desc">Smart routing configurations</div>
            </div>
            <div class="resource-count">
                <span class="resource-used">{{ autoselects_count }}</span>
                {% if max_autoselections == -1 %}<span class="resource-max">/ ∞</span>
                {% elif max_autoselections and max_autoselections > 0 %}<span class="resource-max">/ {{ max_autoselections }}</span>{% endif %}
            </div>
        </div>
        {% if max_autoselections and max_autoselections > 0 %}
        <div class="resource-bar-wrap">
            <div class="resource-bar" style="width:{{ [auto_pct, 100]|min }}%; background:{{ '#ef4444' if auto_pct >= 90 else ('#fbbf24' if auto_pct >= 75 else '#c084fc') }};"></div>
        </div>
        {% set free = max_autoselections - autoselects_count %}
        <div class="resource-bar-label">{{ "%.0f"|format([auto_pct, 100]|min) }}% used &middot; {{ free }} slot{{ 's' if free != 1 else '' }} free</div>
        {% else %}
        <div class="resource-bar-wrap unlimited-bar"></div>
        <div class="resource-bar-label unlim" data-i18n="usage_page.unlimited_slots">Unlimited slots available</div>
        {% endif %}
    </div>

</div>

{% if upgrade_tiers %}
<div class="upgrade-cta">
    <div class="upgrade-cta-content">
        <i class="fas fa-rocket upgrade-cta-icon"></i>
        <div>
            <div class="upgrade-cta-title" data-i18n="usage_page.need_higher_limits">Need higher limits?</div>
            <div class="upgrade-cta-sub" data-i18n="usage_page.upgrade_desc">Upgrade your plan to unlock more requests, providers, and autoselections.</div>
        </div>
    </div>
    <a href="{{ url_for(request, '/dashboard/pricing') }}" class="upgrade-cta-btn">
        <i class="fas fa-arrow-up"></i> <span data-i18n="usage_page.view_plans">View Plans</span>
    </a>
</div>
{% endif %}

{% endblock %}

{% block extra_css %}
<style>
/* ── Plan header ─────────────────────────────────── */
.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--bg-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-accent);
    color: var(--color-link);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px;
    margin-bottom: 8px;
}
.plan-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
}
.plan-subtitle { margin-top: 6px; }
.plan-link { font-size: 13px; color: var(--color-link); text-decoration: none; }
.plan-link:hover { color: var(--color-link-hover); }
.plan-link.upgrade { color: var(--color-link); }
.plan-link.upgrade:hover { color: var(--color-link-hover); }

.plan-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.plan-stat { padding: 0 24px; text-align: center; }
.plan-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); line-height: 1; }
.plan-stat-label { font-size: 11px; color: var(--color-subtle); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.plan-stat-divider { width: 1px; height: 40px; background: var(--color-border); flex-shrink: 0; }

/* ── Section headers ─────────────────────────────── */
.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    border-left: 3px solid var(--color-border);
    padding-left: 12px;
}
.section-title { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.section-subtitle { font-size: 13px; color: var(--color-subtle); }

/* ── Activity gauge cards ────────────────────────── */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 0;
}
.gauge-card {
    background: var(--bg-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .2s, transform .2s;
}
.gauge-card:hover { border-color: var(--color-link); transform: translateY(-2px); }

.gauge-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gauge-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.gauge-label { font-size: .9rem; font-weight: 600; color: var(--color-text); }
.gauge-sublabel { font-size: .72rem; color: var(--color-subtle); margin-top: 2px; }

.gauge-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin: 8px 0;
}
.gauge-svg { width: 140px; height: 140px; }
.gauge-track { fill: none; stroke: var(--bg-accent); stroke-width: 10; }
.gauge-prog {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 301.59;
    transform: rotate(-90deg);
    transform-origin: 60px 60px;
    transition: stroke-dashoffset .6s ease;
}
.gauge-center { position: absolute; text-align: center; }
.gauge-big { font-size: 1.4rem; font-weight: 700; color: var(--color-text); line-height: 1; }
.gauge-of { font-size: .72rem; color: var(--color-subtle); margin-top: 3px; }

.gauge-unlimited {
    font-size: 3rem;
    opacity: .2;
    display: flex; align-items: center; justify-content: center;
    width: 140px; height: 140px;
}

.gauge-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    min-height: 30px;
}
.gauge-remaining { font-size: .8rem; color: var(--color-muted); flex: 1; }
.gauge-remaining.unlim { color: #4ade80; font-weight: 500; }

/* ── Resource cards (config limits) ─────────────── */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.resource-card {
    background: var(--bg-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 20px;
    transition: border-color .2s;
}
.resource-card:hover { border-color: var(--color-link); }

.resource-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.resource-icon {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.resource-info { flex: 1; min-width: 0; }
.resource-label { font-size: .9rem; font-weight: 600; color: var(--color-text); }
.resource-sublabel { font-size: .72rem; color: var(--color-subtle); margin-top: 2px; }

.resource-count { text-align: right; flex-shrink: 0; }
.resource-used { font-size: 1.5rem; font-weight: 700; color: var(--color-text); line-height: 1; display: block; }
.resource-max { font-size: .78rem; color: var(--color-subtle); display: block; text-align: right; }

.resource-bar-wrap {
    height: 6px;
    background: var(--bg-accent);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.resource-bar-wrap.unlimited-bar {
    background: repeating-linear-gradient(
        90deg,
        rgba(74,222,128,.15) 0px, rgba(74,222,128,.15) 4px,
        transparent 4px, transparent 8px
    );
}
.resource-bar { height: 100%; border-radius: 3px; transition: width .6s ease; }
.resource-bar-label { font-size: .75rem; color: var(--color-subtle); }
.resource-bar-label.unlim { color: #4ade80; font-weight: 500; }

/* ── Badges ──────────────────────────────────────── */
.usage-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
}
.usage-badge.warn  { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.35); }
.usage-badge.danger { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.35); }

/* ── Upgrade CTA ─────────────────────────────────── */
.upgrade-cta {
    margin-top: 28px;
    background: var(--bg-accent);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.upgrade-cta-content { display: flex; align-items: center; gap: 16px; }
.upgrade-cta-icon { font-size: 1.4rem; color: var(--color-link); flex-shrink: 0; }
.upgrade-cta-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.upgrade-cta-sub { font-size: 13px; color: var(--color-muted); }
.upgrade-cta-btn {
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .2s;
}
.upgrade-cta-btn:hover { opacity: .85; color: white; }

@media (max-width: 600px) {
    .plan-header { flex-direction: column; }
    .plan-header-right { flex-wrap: wrap; }
    .plan-stat { padding: 8px 16px; }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    function ordinalSuffix(n) {
        var v = n % 100;
        if (v >= 11 && v <= 13) return 'th';
        switch (n % 10) {
            case 1: return 'st';
            case 2: return 'nd';
            case 3: return 'rd';
            default: return 'th';
        }
    }

    function resetDateLabel(date) {
        var day = date.getDate();
        var month = date.toLocaleString(undefined, {month: 'long'});
        var hh = String(date.getHours()).padStart(2, '0');
        var mm = String(date.getMinutes()).padStart(2, '0');
        return 'and the ' + day + ordinalSuffix(day) + ' of ' + month + ' at ' + hh + ':' + mm;
    }

    function formatCountdown(ms) {
        var h = Math.floor(ms / 3600000);
        var m = Math.floor((ms % 3600000) / 60000);
        if (h < 48) {
            return window.i18n.interpolate(window.i18n.t('usage_page.resets_in'), {h: h, m: m});
        }
        var days = Math.ceil(ms / 86400000);
        return window.i18n.interpolate(days !== 1 ? window.i18n.t('usage_page.resets_in_days_plural') : window.i18n.t('usage_page.resets_in_days'), {n: days});
    }

    function updateTimers() {
        var now = new Date();
        document.querySelectorAll('[data-reset-ts]').forEach(function (el) {
            var reset = new Date(parseInt(el.getAttribute('data-reset-ts'), 10));
            var ms = reset - now;
            if (ms <= 0) return;
            el.textContent = formatCountdown(ms) + ' ' + resetDateLabel(reset);
        });
    }

    updateTimers();
    setInterval(updateTimers, 30000);
})();
</script>
{% endblock %}
