{% extends "page.html" %}

{% block title %}Usage{% endblock %}

{% block stylesheet %}
{{ super() }}
<style>
    .metric-container {
        display: block;
        padding-top: 16px;
        align-items: flex-start;
    }
    .metric-resource {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        margin-bottom: 48px;
    }
    .metric-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .metric-header[aria-expanded="true"] .icon-dropdown {
        transform: rotate(180deg);
    }
    .metric-items {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 16px;
    }
    .metric-item {
        width: 100%;
        margin-bottom: 16px;
    }
    .icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }
    .icon-dropdown {
        flex-shrink: 0;
        width: 20px;
        height: 15px;
    }
    .metric-content {
        display: block;
    }
    .metric-label {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 6px 0;
    }
    .metric-usage {
        font-size: 15px;
        margin: 0 0 4px 0;
    }
    .metric-remaining {
        font-size: 15px;
        color: #10b981;
        font-weight: 500;
        margin: 0;
    }
    .progress-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 0 8px 0;
    }
    .progress-track {
        width: 256px;
        height: 5px;
        background: #f3f4f6;
        border-radius: 3px;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        background: #10b981;
        border-radius: 3px;
    }
    .progress-label {
        font-size: 12px;
        font-weight: 500;
        color: #10b981;
        white-space: nowrap;
    }
    .metric-last-updated {
        font-size: 13px;
        margin: 8px 0 0 0;
    }
    .error-message {
        color: #ef4444;
        font-size: 15px;
        margin: 0;
    }
    .subtitle {
        margin-top: 16px;
    }
    .footer-note {
        font-size: 15px;
        margin-top: 20px;
        line-height: 1.6;
    }
</style>
{% endblock %}

{% block main %}
<div style="max-width: 900px; margin: 0 auto; padding: 40px 20px 40px;">
    <h1>Usage</h1>
    <p class="subtitle">View your current resource usage and quota</p>
    <div class="metric-container">
        <div class="row">
            {% if enable_storage %}
            <div class="col">
                <div id="storage" class="metric-resource">
                    {% if storage_data.error is defined %}
                    <svg class="icon" fill="none" stroke="#ef4444" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"></path>
                    </svg>
                    <div class="metric-content">
                        <div class="metric-label"><h2>Home storage</h2></div>
                        <p class="error-message">{{ storage_data.error }}</p>
                    </div>
                    {% else %}
                    {% if storage_data.percentage >= 90 %}
                    <svg class="icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
                        <circle cx="9.5" cy="12" r="1" fill="currentColor" stroke="none"></circle>
                        <circle cx="14.5" cy="12" r="1" fill="currentColor" stroke="none"></circle>
                        <path d="M9.5 15.5q2.5-2 5 0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
                    </svg>
                    {% else %}
                    <svg class="icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
                    </svg>
                    {% endif %}
                    <div class="metric-content">
                        <div class="metric-header">
                            <div class="metric-label"><h2>Home storage</h2></div>
                        </div>
                        <div class="metric-items">
                            <div class="metric-item">
                                <div class="metric-usage">{{ "%.1f"|format(storage_data.usage_gb) }} GiB used / {{ "%.1f"|format(storage_data.quota_gb) }} GiB quota</div>
                                <div class="metric-remaining"{% if storage_data.percentage >= 90 %} style="color: #ef4444;"{% endif %}>{{ "%.1f"|format(storage_data.quota_gb - storage_data.usage_gb) }} GiB remaining</div>
                                <div class="progress-row">
                                    <div class="progress-track">
                                        <div class="progress-fill" style="width: {{ storage_data.percentage }}%;{% if storage_data.percentage >= 90 %} background: #ef4444;{% endif %}"></div>
                                    </div>
                                    <span class="progress-label"{% if storage_data.percentage >= 90 %} style="color: #ef4444;"{% endif %}>{{ "%.1f"|format(storage_data.percentage) }}%</span>
                                </div>
                                <div class="metric-last-updated">Last updated: <time datetime="{{ storage_data.last_updated }}">{{ storage_data.last_updated }}</time></div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            {% if enable_compute %}
            <div class="col">
                <div id="compute" class="metric-resource">
                    {% if compute_data.0.error is defined %}
                    <svg class="icon" fill="none" stroke="#ef4444" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"></path>
                    </svg>
                    <div class="metric-content">
                        <div class="metric-label"><h2>Compute</h2></div>
                        <p class="error-message">{{ compute_data.0.error }}</p>
                    </div>
                    {% else %}
                    <svg class="icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <rect x="3" y="3" width="15" height="15" rx="0.5"/>
                        <rect stroke-width="1.5" x="7.25" y="7.25" width="6.5" height="6.5" rx="0.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="7.5"  y1="3" x2="7.5"  y2="0.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="10.5" y1="3" x2="10.5" y2="0.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="13.5" y1="3" x2="13.5" y2="0.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="7.5"  y1="18" x2="7.5"  y2="20.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="10.5" y1="18" x2="10.5" y2="20.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="13.5" y1="18" x2="13.5" y2="20.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="3" y1="7.5"  x2="0.5" y2="7.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="3" y1="10.5" x2="0.5" y2="10.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="3" y1="13.5" x2="0.5" y2="13.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="18" y1="7.5"  x2="20.5" y2="7.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="18" y1="10.5" x2="20.5" y2="10.5"/>
                        <line stroke-width="1" stroke-linecap="round" x1="18" y1="13.5" x2="20.5" y2="13.5"/>
                    </svg>
                    <div class="metric-content">
                        <div class="metric-header" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
                            <div class="metric-label"><h2>Compute</h2></div>
                            {% if compute_data | length > 1 %}
                            <svg class="icon-dropdown" fill="none" stroke="gray" stroke-width="0.5" stroke-linecap="round" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
                                <line x1="0.5" y1="0.5" x2="2.5" y2="2.5"/>
                                <line x1="2.5" y1="2.5" x2="4.5" y2="0.5"/>
                            </svg>
                            {% endif %}
                        </div>
                        <div class="metric-items">
                            {% for result in compute_data %}
                            <div class="metric-item {% if loop.index > 1 %}collapse multi-collapse{% endif %}" id="compute-{{ loop.index }}">
                                <div class="metric-usage">{{ "%.1f"|format(result.usage) }} {{ result.unit }} used / {{ "%.1f"|format(result.quota) }} {{ result.unit }} quota over the last {{ result.window }} days</div>
                                <div class="metric-remaining"{% if result.percentage >= 90 %} style="color: #ef4444;"{% endif %}>{% if (result.quota - result.usage) < 0 %}{{ "%.1f"|format(0) }}{% else %}{{ "%.1f"|format(result.quota - result.usage) }}{% endif %} {{ result.unit }} remaining</div>
                                <div class="progress-row">
                                    <div class="progress-track">
                                        <div class="progress-fill" style="width: {{ result.percentage }}%;{% if result.percentage >= 90 %} background: #ef4444;{% endif %}"></div>
                                    </div>
                                    <span class="progress-label"{% if result.percentage >= 90 %} style="color: #ef4444;"{% endif %}>{{ "%.1f"|format(result.percentage) }}%</span>
                                </div>
                                <div class="metric-last-updated">Last updated: <time datetime="{{ result.last_updated }}">{{ result.last_updated }}</time></div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% if footer_note %}
    <div class="footer-note">{{ footer_note }}</div>
    {% endif %}
</div>
{% endblock %}

{% block script %}
<script>
    document.querySelectorAll('time[datetime]').forEach(function(el) {
        var d = new Date(el.getAttribute('datetime'));
        if (!isNaN(d)) {
            el.textContent = d.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
        }
    });
</script>
{% endblock %}