{% 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">Delete User</button>
</form>
<a href="/users" class="btn-outline">Back to Users</a>
</div>
</div>
</div>
</section>
</div>
{% endblock %}