{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <h1 class="mb-4">Pastes Statistics</h1>

    <!-- Filters Section -->
    <div class="row mb-4">
        <div class="col-12">
            <form method="GET" action="{{ url_for('anonymous_stats') }}" class="row g-3">
                <div class="col-md-4">
                    <label for="start_date" class="form-label">Start Date:</label>
                    <input type="date" id="start_date" name="start_date" class="form-control" value="{{ request.args.get('start_date') }}">
                </div>
                <div class="col-md-4">
                    <label for="end_date" class="form-label">End Date:</label>
                    <input type="date" id="end_date" name="end_date" class="form-control" value="{{ request.args.get('end_date') }}">
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Metrics Section -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary mb-3">
                <div class="card-header">Total Pastes</div>
                <div class="card-body">
                    <h5 class="card-title">{{ total_pastes }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success mb-3">
                <div class="card-header">Text Pastes</div>
                <div class="card-body">
                    <h5 class="card-title">{{ total_text_pastes }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info mb-3">
                <div class="card-header">File Pastes</div>
                <div class="card-body">
                    <h5 class="card-title">{{ total_file_pastes }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning mb-3">
                <div class="card-header">Media Pastes</div>
                <div class="card-body">
                    <h5 class="card-title">{{ total_media_pastes }}</h5>
                </div>
            </div>
        </div>
    </div>

    <!-- Language Chart Section -->
    <div class="row">
        <div class="col-12">
            <h3 class="mb-4">Pastes by Language and Type</h3>
            <canvas id="languageTypeChart" style="max-height: 400px;"></canvas>
        </div>
    </div>
</div>
<!-- Incluir los datos como elementos de script en JSON -->
<script type="application/json" id="language-data">{{ languages | tojson | safe }}</script>
<script type="application/json" id="text-counts">{{ counts_text | tojson | safe }}</script>
<script type="application/json" id="file-counts">{{ counts_file | tojson | safe }}</script>
<script type="application/json" id="media-counts">{{ counts_media | tojson | safe }}</script>

<!-- Incluir Chart.js y el script externo -->
<script src="https://cdn.priet.us/cdn/js/chart.js"></script>
<script src="{{ url_for('static', filename='js/anonymous/main.js') }}"></script>

{% endblock %}
{% block footer %}
  {{ super() }}  <!-- Esto conserva el contenido original del footer definido en base.html -->
{% endblock %}