{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ _('Dashboard') }}</h1>
</div>

<div class="row">
    <!-- STL Files Stats -->
    <div class="col-md-6">
        <div class="card text-white bg-primary mb-3 shadow-sm border-0">
            <div class="card-header border-0 fs-5 fw-medium">
                <i class="bi bi-box me-2"></i>{{ _('3D Model Files (STL)') }}
            </div>
            <div class="card-body mt-2">
                <h5 class="card-title mb-3">
                    {{ _('You have uploaded') }} <b class="fs-1 mx-2">{{ stl_count }}</b> {{ _('files') }}
                </h5>
                <p class="card-text mb-2">
                    <i class="bi bi-hdd-fill me-1"></i>{{ _('Total Space Used') }}: <strong>{{ format_size(stl_used_bytes) }}</strong>
                    {% if stl_quota_mb > 0 %} / <strong>{{ stl_quota_mb }} MB</strong> <small class="opacity-75">({{ _('Quota') }})</small>{% else %} <small class="opacity-75">({{ _('Unlimited') }})</small>{% endif %}
                </p>
                {% if stl_quota_mb > 0 %}
                {% set stl_percent = (stl_used_bytes / (stl_quota_mb * 1024 * 1024) * 100)|round(1) %}
                <div class="progress bg-white bg-opacity-25" style="height: 8px;">
                    <div class="progress-bar {% if stl_percent > 90 %}bg-danger{% elif stl_percent > 75 %}bg-warning{% else %}bg-info{% endif %}" role="progressbar" style="width: {{ stl_percent if stl_percent <= 100 else 100 }}%"></div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>  

    <!-- GCode Files Stats -->
    <div class="col-md-6">
        <div class="card text-white bg-success mb-3 shadow-sm border-0">
            <div class="card-header border-0 fs-5 fw-medium">
                <i class="bi bi-file-earmark-code me-2"></i>{{ _('Sliced Files (GCode)') }}
            </div>
            <div class="card-body mt-2">
                <h5 class="card-title mb-3">
                    {{ _('You have sliced or uploaded') }} <b class="fs-1 mx-2">{{ gcode_count }}</b> {{ _('files') }}
                </h5>
                <p class="card-text mb-2">
                    <i class="bi bi-hdd-network-fill me-1"></i>{{ _('Total Space Used') }}: <strong>{{ format_size(gcode_used_bytes) }}</strong>
                    {% if gcode_quota_mb > 0 %} / <strong>{{ gcode_quota_mb }} MB</strong> <small class="opacity-75">({{ _('Quota') }})</small>{% else %} <small class="opacity-75">({{ _('Unlimited') }})</small>{% endif %}
                </p>
                {% if gcode_quota_mb > 0 %}
                {% set gc_percent = (gcode_used_bytes / (gcode_quota_mb * 1024 * 1024) * 100)|round(1) %}
                <div class="progress bg-white bg-opacity-25" style="height: 8px;">
                    <div class="progress-bar {% if gc_percent > 90 %}bg-danger{% elif gc_percent > 75 %}bg-warning{% else %}bg-info{% endif %}" role="progressbar" style="width: {{ gc_percent if gc_percent <= 100 else 100 }}%"></div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}