{% extends "base.html" %}
{% load static %}

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

{% block head %}
<meta name="description" content="Analytics Dashboard for Invoice and Vendor Data.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid dashboard-container">
    <header class="d-flex justify-content-between align-items-center p-3 mb-4">
        <h1 class="dashboard-title">Analytics Overview</h1>
    </header>

    <main>
        <div class="row">
            <!-- Total Spend YTD -->
            <div class="col-md-3 mb-4">
                <div class="card metric-card">
                    <div class="card-body">
                        <h5 class="card-title">Total Spend (YTD)</h5>
                        <p class="card-text">${{ total_spend_ytd|floatformat:2 }}</p>
                    </div>
                </div>
            </div>

            <!-- Total Invoices Processed -->
            <div class="col-md-3 mb-4">
                <div class="card metric-card">
                    <div class="card-body">
                        <h5 class="card-title">Total Invoices Processed</h5>
                        <p class="card-text">{{ total_invoices }}</p>
                    </div>
                </div>
            </div>

            <!-- Documents Uploaded -->
            <div class="col-md-3 mb-4">
                <div class="card metric-card">
                    <div class="card-body">
                        <h5 class="card-title">Documents Uploaded</h5>
                        <p class="card-text">{{ documents_uploaded }}</p>
                    </div>
                </div>
            </div>

            <!-- Average Invoice Value -->
            <div class="col-md-3 mb-4">
                <div class="card metric-card">
                    <div class="card-body">
                        <h5 class="card-title">Average Invoice Value</h5>
                        <p class="card-text">${{ avg_invoice_value|floatformat:2 }}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Charts and tables will go here in the next iteration -->
    </main>
</div>
{% endblock %}
