{% extends "layouts/base.html" %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/dashboard.css">
    {% block dashboard_head %}{% endblock %}
{% endblock %}

{% block content %}
<main class="dashboard-layout">
    <aside class="dashboard-sidebar">
        <div class="sidebar-menu">
            <ul>
                <li><a href="/files" {% if active_page == 'files' %}class="active"{% endif %}><img src="/static/images/icon-families.svg" alt="My Files Icon" class="icon"> My Files</a></li>
                <li><a href="/shared" {% if active_page == 'shared' %}class="active"{% endif %}><img src="/static/images/icon-professionals.svg" alt="Shared Icon" class="icon"> Shared with me</a></li>
                <li><a href="/recent" {% if active_page == 'recent' %}class="active"{% endif %}><img src="/static/images/icon-students.svg" alt="Recent Icon" class="icon"> Recent</a></li>
                <li><a href="/favorites" {% if active_page == 'favorites' %}class="active"{% endif %}><img src="/static/images/icon-families.svg" alt="Favorites Icon" class="icon"> Favorites</a></li>
                <li><a href="/trash" {% if active_page == 'trash' %}class="active"{% endif %}><img src="/static/images/icon-professionals.svg" alt="Trash Icon" class="icon"> Trash</a></li>
                <li><a href="/users" {% if active_page == 'users' %}class="active"{% endif %}><img src="/static/images/icon-students.svg" alt="Users Icon" class="icon"> Users</a></li>
            </ul>
        </div>

        <div class="sidebar-storage-quota">
            <h4>Storage Used</h4>
            <div class="storage-gauge">
                <div class="storage-gauge-bar" style="width: {{ (user.storage_used_gb / user.storage_quota_gb) * 100 }}%;"></div>
            </div>
            <div class="storage-info">
                <span>{{ user.storage_used_gb }} GB used of {{ user.storage_quota_gb }} GB</span>
                <span>{{ ((user.storage_used_gb / user.storage_quota_gb) * 100)|round(2) }}%</span>
            </div>
            <a href="/order" class="btn-primary" style="margin-top: 20px; display: block; text-align: center;">Manage Quota</a>
        </div>

        <div class="sidebar-help">
            <a href="/support" class="btn-outline" style="display: block; text-align: center;">Help & Support</a>
        </div>
    </aside>

    <section class="dashboard-content">
        <div class="dashboard-content-header">
            <h2>{% block page_title %}Dashboard{% endblock %}</h2>
            <div class="dashboard-actions">
                {% block dashboard_actions %}{% endblock %}
            </div>
        </div>

        {% block dashboard_content %}{% endblock %}
    </section>
</main>
{% endblock %}