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

{% block title %}Dashboard - {{ block.super }}{% endblock %}

{% block content %}
<div class="stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 3rem;">
    <div class="card">
        <div class="card-header">
            <h3 style="display: flex; align-items: center; color: var(--primary-color);">
                {% include "icons/jobs.html" %}
                Total Jobs
            </h3>
        </div>
        <div style="font-size: 2.5rem; text-align: center; color: var(--primary-color); font-weight: bold;">
            {{ total_jobs }}
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 style="display: flex; align-items: center; color: var(--primary-color);">
                {% include "icons/users.html" %}
                Total Candidates
            </h3>
        </div>
        <div style="font-size: 2.5rem; text-align: center; color: var(--primary-color); font-weight: bold;">
            {{ total_candidates }}
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 style="display: flex; align-items: center; color: var(--primary-color);">
                {% include "icons/meeting.html" %}
                Avg. Applications per Job
            </h3>
        </div>
        <div style="font-size: 2.5rem; text-align: center; color: var(--primary-color); font-weight: bold;">
            {{ average_applications|floatformat:1 }}
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2 style="display: flex; align-items: center; color: var(--primary-color);">
            <svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; height: 2rem; margin-right: 1rem;">
                <path d="M3 7v10c0 .5 .4 .9.9 .9h16.2c.4 0 .8 -.4.8 -.9V7c0 -.5 -.4 -.9 -.9 -.9H3.9c-.5 0 -.9 .4 -.9 .9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M3 7h16.2c.5 0 .9 .4.9 .9v8.2c0 .5 -.4 .9 -.9 .9H3.9a.9 .9 0 0 1 -.9 -.9V7.9c0 -.5 .4 -.9.9 -.9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            Applications per Job
        </h2>
    </div>
    <div style="padding: 2rem;">
        <canvas id="applicationsChart" style="max-height: 400px;"></canvas>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('applicationsChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ job_titles|safe }},
            datasets: [{
                label: 'Applications',
                data: {{ job_app_counts|safe }},
                backgroundColor: 'rgba(27, 131, 84, 0.8)', // Green theme
                borderColor: 'rgba(27, 131, 84, 1)',
                borderWidth: 1,
                barThickness: 50
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    labels: {
                        color: '#333333'
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: '#333333'
                    },
                    grid: {
                        color: '#e0e0e0'
                    }
                },
                x: {
                    ticks: {
                        color: '#333333'
                    },
                    grid: {
                        color: '#e0e0e0'
                    }
                }
            }
        }
    });
</script>
{% endblock %}