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

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Dashboard</h1>
    <p class="page-subtitle">Overview of your MyWebdav instance</p>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">Total Users</div>
        <div class="stat-value">{{ stats.total_users }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Active Users</div>
        <div class="stat-value success">{{ stats.active_users }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Total Storage Used</div>
        <div class="stat-value">{{ stats.total_storage | format_bytes }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Monthly Revenue</div>
        <div class="stat-value success">{{ stats.monthly_revenue | format_currency }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Pending Invoices</div>
        <div class="stat-value {% if stats.pending_invoices > 0 %}warning{% endif %}">{{ stats.pending_invoices }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Inactive Users</div>
        <div class="stat-value {% if stats.inactive_users > 0 %}danger{% endif %}">{{ stats.inactive_users }}</div>
    </div>
</div>

<div class="detail-grid">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Quick Actions</h2>
        </div>
        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
            <a href="/manage/users" class="btn btn-primary">Manage Users</a>
            <a href="/manage/payments" class="btn btn-outline">View Payments</a>
            <a href="/manage/settings" class="btn btn-outline">Settings</a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Recent Activity</h2>
        </div>
        {% if recent_activities %}
        <div class="activity-list">
            {% for activity in recent_activities %}
            <div class="activity-item">
                <div class="activity-icon">{{ activity.user[0] | upper }}</div>
                <div class="activity-content">
                    <div class="activity-text">
                        <strong>{{ activity.user }}</strong> {{ activity.action }}
                    </div>
                    <div class="activity-time">{{ activity.timestamp.strftime('%Y-%m-%d %H:%M') }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">📋</div>
            <div class="empty-state-text">No recent activity</div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}