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

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

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

{% block page_title %}Edit User Quota{% endblock %}

{% block dashboard_content %}
<div class="order-management-layout">
    <section class="quota-overview-card">
        <h2>Edit User Storage Quota</h2>
        <p class="subtitle">Adjust storage quota for {{ user_data.full_name }} ({{ user_data.email }}).</p>

        {% if errors %}
        <div class="alert alert-error">
            <ul>
            {% for field, error in errors.items() %}
                <li>{{ error }}</li>
            {% endfor %}
            </ul>
        </div>
        {% endif %}

        {% if success_message %}
        <div class="alert alert-success">
            {{ success_message }}
        </div>
        {% endif %}

        <div class="overview-grid">
            <div class="total-storage-chart">
                <h3>Current Usage:</h3>
                <div class="donut-chart-container">
                    <div class="donut-chart-text">
                        <span class="used-gb">{{ user_data.storage_used_gb }} GB</span> / <span class="total-gb">{{ user_data.storage_quota_gb }} GB</span>
                    </div>
                    <div class="storage-gauge large">
                        <div class="storage-gauge-bar" style="width: {{ (user_data.storage_used_gb / user_data.storage_quota_gb * 100) if user_data.storage_quota_gb > 0 else 0 }}%;"></div>
                    </div>
                </div>
                <p class="plan-details">{{ ((user_data.storage_used_gb / user_data.storage_quota_gb) * 100)|round(2) if user_data.storage_quota_gb > 0 else 0 }}% used</p>
            </div>

            <div class="order-form-card">
                <h3>Update Quota</h3>
                <form action="/users/{{ user_data.email }}/edit" method="post" class="order-form">
                    <div class="form-group">
                        <label for="storage_quota_gb">Storage Quota (GB)</label>
                        <custom-slider min="1" max="1000" value="{{ user_data.storage_quota_gb }}" step="1" name="storage_quota_gb"></custom-slider>
                    </div>
                    <div style="display: flex; gap: 10px; margin-top: 20px;">
                        <button type="submit" class="btn-primary">Update Quota</button>
                        <a href="/users" class="btn-outline">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
{% endblock %}