{% 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="/files" class="active"><img src="/static/images/icon-families.svg" alt="My Files Icon" class="icon"> My Files</a></li>
                <li><a href="/shared"><img src="/static/images/icon-professionals.svg" alt="Shared Icon" class="icon"> Shared with me</a></li>
                <li><a href="/recent"><img src="/static/images/icon-students.svg" alt="Recent Icon" class="icon"> Recent</a></li>
                <li><a href="/favorites"><img src="/static/images/icon-families.svg" alt="Favorites Icon" class="icon"> Favorites</a></li>
                <li><a href="/trash"><img src="/static/images/icon-professionals.svg" alt="Trash Icon" class="icon"> Trash</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-notifications">
            <h4>Notifications</h4>
            {% if user.notifications %} {# Assuming user object has a notifications attribute #}
                <ul>
                    {% for notification in user.notifications %}
                        <li>{{ notification }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>No new notifications.</p>
            {% endif %}
        </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>Welcome back, {{ user.full_name }}!</h2>
            <div class="dashboard-actions">
                <button class="btn-primary" onclick="alert('+ New feature coming soon!')">+ New</button>
                <button class="btn-outline" onclick="alert('Download feature coming soon!')">Download</button>
                <button class="btn-outline" onclick="alert('Upload feature coming soon!')">Upload</button>
                <button class="btn-outline" onclick="alert('Share feature coming soon!')">Share</button>
                <button class="btn-outline" onclick="alert('Delete feature coming soon!')">🗑️</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>
                        <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>
                        <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>
                        <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 %}