{% extends 'base.html' %}
{% block content %}
<div class="container" style="background-color: rgba(255,255,255,0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(15px); padding:2rem; margin-top: 5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
    <!-- Header -->
    <div class="header-cta">
        <h2 style="text-align: center; color: #172f01; margin-bottom: 1rem;">¡Hazte mapista y pon tu granito de fotoevidencia!</h2>
        <p style="text-align: center; margin-bottom: 2rem;">Cada contribución cuenta. Mira lo que estamos logrando y sé parte del cambio.<br></p>
    </div>
    
    <!-- Grid container for side-by-side layout -->
    <div class="grid">
        <!-- Table column -->
        <div>
            <div style="display: flex; align-items: center; height: 300px;">
                <table id="mapistas" style="color: rgba(202,216,3,0.7); width: 100%;">
                    <thead>
                        <tr style="color: rgba(202,216,3,0.7);">
                            <th scope="col">Mapista</th>
                            <th scope="col">Marcador</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for leader in leaders %}
                        <tr style="color: rgba(202,216,3,0.7);">
                            <td scope="row">{{leader.username}}</td>
                            <td scope="row">{{leader.count}}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Chart column -->
        <div style="text-align: center;">
            <h3>Porcentaje de usuarios activos</h3>
            <div class="chart-container" style="display:block ruby; position: relative; height:300px; width:100%; margin: 0 auto;">
            <canvas id="activeUsersChart"></canvas>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('activeUsersChart').getContext('2d');
        const activePercentage = {{ percentage }};
        const inactivePercentage = 100 - activePercentage;
        
        new Chart(ctx, {
            type: 'pie',
            data: {
                // Append percentages directly to the legend labels
                labels: [
                    'Usuarios Activos (' + activePercentage + '%)',
                    'Usuarios Inactivos (' + inactivePercentage + '%)'
                ],
                datasets: [{
                    data: [activePercentage, inactivePercentage],
                    backgroundColor: [
                        'rgba(202,216,3,0.7)',
                        'rgba(87, 90, 91, 0.8)'
                    ],
                    borderColor: [
                        'rgba(202,216,3,0.7)',
                        'rgb(87, 90, 91)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Distribución de Usuarios Activos'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                var label = context.label || '';
                                var value = context.parsed;
                                return label + ': ' + value + '%';
                            }
                        }
                    }
                }
            }
        });
    });
</script>
</div>
</div>
{% endblock %}