{# Component for displaying people count/attendance charts and tables #}
{# Expects: event, people_count_by_day, all_days, all_times, people_count_table, people_count_by_place, people_counts_by_event_day #}

{# People count over time - all days in one graph #}
{% if people_count_by_day %}
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Personenzahlen über Zeit</h5>
    </div>
    <div class="card-body">
        <canvas id="peopleCountChart" height="100"></canvas>
    </div>
</div>

{# Stacked area charts - one per day #}
{% for day in all_days %}
<div class="card mb-4">
    <div class="card-header">
        <h6 class="mb-0">{{ day }} - Nach Ort</h6>
    </div>
    <div class="card-body">
        <canvas id="peopleCountStackedChart{{ day | replace(' ', '') }}" height="80"></canvas>
    </div>
</div>
{% endfor %}

{# Table 1: Aggregated sums #}
<div class="card mb-4">
    <div class="card-header">
        <h6 class="mb-0">Personenzahlen - Summen</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>Tag</th>
                        {% for time in all_times %}
                        <th>{{ time }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for day in all_days %}
                    <tr>
                        <td><strong>{{ day }}</strong></td>
                        {% for time in all_times %}
                        <td class="text-end">
                            {% if people_count_table.get(day, {}).get(time) %}
                                {{ people_count_table[day][time] }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{# Table 2: By place/room #}
<div class="card mb-4">
    <div class="card-header">
        <h6 class="mb-0">Personenzahlen - Nach Ort</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>Tag</th>
                        {% for time in all_times %}
                        <th>{{ time }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for day in all_days %}
                    <tr>
                        <td><strong>{{ day }}</strong></td>
                        {% for time in all_times %}
                        <td style="font-size: 0.85em;">
                            {% if people_count_by_place.get(day, {}).get(time) %}
                                {% for entry in people_count_by_place[day][time] %}
                                    <div>{{ entry.place }}: {{ entry.count }}</div>
                                {% endfor %}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{# Cross-event people count comparison #}
{% if people_counts_by_event_day %}
<div class="card mb-4">
    <div class="card-header">
        <h6 class="mb-0">Personenzahlen über Zeit - Vergleich aller Events</h6>
    </div>
    <div class="card-body">
        <canvas id="peopleCountEventComparisonChart" height="100"></canvas>
    </div>
</div>
{% endif %}
{% endif %}