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

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

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

{% block content %}
<main class="order-management-layout">
    <section class="quota-overview-card">
        <h2>Optimize Your Team's Storage</h2>
        <p class="subtitle">Flexible cloud monitoring for teams with ease.</p>

        <div class="overview-grid">
            <div class="total-storage-chart">
                <h3>Total Storage Used:</h3>
                <div class="donut-chart-container">
                    {# Placeholder for a donut chart. For simplicity, we'll use text for now. #}
                    <div class="donut-chart-text">
                        <span class="used-gb">{{ user.storage_used_gb }} GB</span> / <span class="total-gb">{{ user.storage_quota_gb }} GB</span>
                    </div>
                    <div class="storage-gauge large">
                        <div class="storage-gauge-bar" style="width: {{ (user.storage_used_gb / user.storage_quota_gb) * 100 }}%;"></div>
                    </div>
                </div>
                <p class="plan-details">Current Plan: Business Plan ({{ user.storage_quota_gb }} GB Capacity, Unlimited Users)</p>
            </div>

            <div class="order-form-card">
                <h3>Adjust Your Quota</h3>
                <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>Estimated Price: <span id="price-display"></span></p>
                    </div>
                    <button type="submit" class="btn-primary">Update Quota</button>
                </form>
            </div>
        </div>
    </section>

    <section class="user-quotas-section">
        <div class="user-quotas-header">
            <h2>User & Department Quotas</h2>
            <button class="btn-primary">+ Add New User</button>
        </div>
        <div class="user-quota-list">
            {# Example User/Department Quota #}
            <div class="user-quota-item card">
                <div class="user-info">
                    <h4>John S.</h4>
                    <p>john.s@retoors.com</p>
                </div>
                <div class="quota-details">
                    <div class="storage-gauge small">
                        <div class="storage-gauge-bar" style="width: 75%;"></div> {# Example value #}
                    </div>
                    <p>225 GB / 300 GB (75%)</p>
                </div>
                <div class="quota-actions">
                    <button class="btn-outline">Edit Quota</button>
                    <button class="btn-outline">Delete User</button>
                </div>
            </div>
            <div class="user-quota-item card">
                <div class="user-info">
                    <h4>Marketing Team</h4>
                    <p>marketing@retoors.com</p>
                </div>
                <div class="quota-details">
                    <div class="storage-gauge small">
                        <div class="storage-gauge-bar" style="width: 50%;"></div> {# Example value #}
                    </div>
                    <p>500 GB / 1 TB (50%)</p>
                </div>
                <div class="quota-actions">
                    <button class="btn-outline">Edit Quota</button>
                    <button class="btn-outline">Delete Team</button>
                </div>
            </div>
            {# Current user's quota #}
            <div class="user-quota-item card">
                <div class="user-info">
                    <h4>{{ user.email }} (You)</h4>
                    <p>Individual Quota</p>
                </div>
                <div class="quota-details">
                    <div class="storage-gauge small">
                        <div class="storage-gauge-bar" style="width: {{ (user.storage_used_gb / user.storage_quota_gb) * 100 }}%;"></div>
                    </div>
                    <p>{{ user.storage_used_gb }} GB / {{ user.storage_quota_gb }} GB ({{ ((user.storage_used_gb / user.storage_quota_gb) * 100)|round(2) }}%)</p>
                </div>
                <div class="quota-actions">
                    <button class="btn-outline">View Details</button>
                </div>
            </div>
        </div>
    </section>
</main>
{% endblock %}