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

{% block title %}Dashboard{% endblock %}

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

{% block content %}
<section class="dashboard-header">
    <h2>Welcome, {{ user.email }}</h2>
</section>

<section class="storage-overview">
    <h3>Storage Overview</h3>
    <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>
</section>

<section>
    <h2>My Files</h2>
    <div class="file-list">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Size</th>
                    <th>Last Modified</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>documents.zip</td>
                    <td>256 MB</td>
                    <td>2025-11-08</td>
                </tr>
                <tr>
                    <td>photos.zip</td>
                    <td>1.2 GB</td>
                    <td>2025-11-07</td>
                </tr>
                <tr>
                    <td>project_alpha.zip</td>
                    <td>512 MB</td>
                    <td>2025-11-05</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

<section>
    <h2>Order More Storage</h2>
    <form action="/order" method="post" class="order-form">
        <div class="form-group">
            <label for="storage_amount">Storage (GB)</label>
            <custom-slider min="5" max="1000" value="{{ user.storage_quota_gb }}" step="5" name="storage_amount"></custom-slider>
            {% if errors.storage_amount %}
                <p class="error">{{ errors.storage_amount }}</p>
            {% endif %}
        </div>
        <div class="price-display">
            <p>Price: <span id="price-display"></span></p>
        </div>
        <button type="submit" class="btn-primary">Order</button>
    </form>
</section>
{% endblock %}