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

{% block title %}Dashboard - Retoor's Cloud Solutions{% endblock %}

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

{% block content %}
<main class="dashboard-layout">
    <aside class="dashboard-sidebar">
        <div class="sidebar-menu">
            <ul>
                <li><a href="#" class="active"><img src="/static/images/icon-families.svg" alt="My Files Icon" class="icon"> My Files</a></li> {# Placeholder icon #}
                <li><a href="#"><img src="/static/images/icon-professionals.svg" alt="Shared Icon" class="icon"> Shared with me</a></li> {# Placeholder icon #}
                <li><a href="#"><img src="/static/images/icon-students.svg" alt="Recent Icon" class="icon"> Recent</a></li> {# Placeholder icon #}
                <li><a href="#"><img src="/static/images/icon-families.svg" alt="Favorites Icon" class="icon"> Favorites</a></li> {# Placeholder icon #}
                <li><a href="#"><img src="/static/images/icon-professionals.svg" alt="Trash Icon" class="icon"> Trash</a></li> {# Placeholder icon #}
            </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>
    </aside>

    <section class="dashboard-content">
        <div class="dashboard-content-header">
            <h2>Your Data, Organized and Accessible</h2>
            <div class="dashboard-actions">
                <button class="btn-primary">+ New</button>
                <button class="btn-outline">Download</button>
                <button class="btn-outline">Upload</button>
                <button class="btn-outline">Share</button>
                <button class="btn-outline">Delete</button>
            </div>
        </div>

        <input type="text" class="file-search-bar" placeholder="Search your files...">

        <div class="file-list-table">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Owner</th>
                        <th>Last Modified</th>
                        <th>Size</th>
                        <th></th> {# For action ellipsis #}
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon"> documents.zip</td> {# Placeholder icon #}
                        <td>{{ user.email }}</td>
                        <td>2025-11-08</td>
                        <td>256 MB</td>
                        <td><span class="action-ellipsis">...</span></td>
                    </tr>
                    <tr>
                        <td><img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon"> photos.zip</td> {# Placeholder icon #}
                        <td>{{ user.email }}</td>
                        <td>2025-11-07</td>
                        <td>1.2 GB</td>
                        <td><span class="action-ellipsis">...</span></td>
                    </tr>
                    <tr>
                        <td><img src="/static/images/icon-students.svg" alt="File Icon" class="file-icon"> project_alpha.zip</td> {# Placeholder icon #}
                        <td>{{ user.email }}</td>
                        <td>2025-11-05</td>
                        <td>512 MB</td>
                        <td><span class="action-ellipsis">...</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
</main>
{% endblock %}