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

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

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

{% block page_title %}Manage Quota{% endblock %}

{% block dashboard_content %}
<div 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" data-price-per-gb="{{ price_per_gb | tojson }}"></custom-slider>
                        {% if errors.storage_amount %}
                            <p class="error">{{ errors.storage_amount }}</p>
                        {% endif %}
                    </div>
                    <div class="price-display">
                        <p>Estimated Price: <span id="total_price"></span></p>
                    </div>
                    <button type="submit" class="btn-primary">Update Quota</button>
                </form>
            </div>
        </div>
    </section>

</div>

<script src="/static/js/components/order_form.js"></script>
{% endblock %}