{% extends "base.html" %}

{% block title %}Dashboard - Mock API Admin{% endblock %}

{% block content %}
<div class="content-header">
    <h1><i class="bi bi-speedometer2"></i> Dashboard</h1>
    <p class="lead">Overview of your mock API configuration.</p>
</div>

<div class="row">
    <div class="col-md-3 mb-4">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title text-uppercase">Total Endpoints</h6>
                        <h2 class="mb-0">{{ stats.total_endpoints }}</h2>
                    </div>
                    <i class="bi bi-list-ul display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title text-uppercase">Active Endpoints</h6>
                        <h2 class="mb-0">{{ stats.active_endpoints }}</h2>
                    </div>
                    <i class="bi bi-check-circle display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title text-uppercase">Total Routes</h6>
                        <h2 class="mb-0">{{ stats.total_routes }}</h2>
                    </div>
                    <i class="bi bi-signpost display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="card bg-warning text-dark">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title text-uppercase">Methods</h6>
                        <h2 class="mb-0">{{ stats.methods_count }}</h2>
                    </div>
                    <i class="bi bi-gear display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-clock-history"></i> Recent Activity</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">Admin interface ready.</p>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-plus-circle text-success"></i> Create your first endpoint</span>
                        <a href="/admin/endpoints/new" class="btn btn-sm btn-outline-primary">Create</a>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-list-ul text-info"></i> View all endpoints</span>
                        <a href="/admin/endpoints" class="btn btn-sm btn-outline-info">Browse</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-lightning-charge"></i> Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="/admin/endpoints/new" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> New Endpoint
                    </a>
                    <a href="/admin/endpoints" class="btn btn-outline-secondary">
                        <i class="bi bi-list-ul"></i> Manage Endpoints
                    </a>
                    <a href="/admin/logout" class="btn btn-outline-danger">
                        <i class="bi bi-box-arrow-right"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}