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

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

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

{% block page_title %}User Details{% endblock %}

{% block dashboard_actions %}
    <a href="/users/{{ user_data.email }}/edit" class="btn-primary">Edit Quota</a>
{% endblock %}

{% block dashboard_content %}
<div class="order-management-layout">
    <section class="quota-overview-card">
        <h2>{{ user_data.full_name }}</h2>
        <p class="subtitle">{{ user_data.email }}</p>

        <div class="overview-grid">
            <div class="total-storage-chart">
                <h3>Storage 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>Account Information</h3>
                <div style="margin-top: 20px;">
                    <p><strong>Full Name:</strong> {{ user_data.full_name }}</p>
                    <p><strong>Email:</strong> {{ user_data.email }}</p>
                    <p><strong>Storage Used:</strong> {{ user_data.storage_used_gb }} GB</p>
                    <p><strong>Storage Quota:</strong> {{ user_data.storage_quota_gb }} GB</p>
                    <p><strong>Parent Email:</strong> {{ user_data.parent_email if user_data.parent_email else 'N/A' }}</p>
                </div>
                <div style="display: flex; gap: 10px; margin-top: 30px;">
                    <a href="/users/{{ user_data.email }}/edit" class="btn-primary">Edit Quota</a>
                    <form action="/users/{{ user_data.email }}/delete" method="post" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this user?');">
                        <button type="submit" class="btn-danger">🗑️</button>
                    </form>
                    <a href="/users" class="btn-outline">Back to Users</a>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}