{# Component for displaying feedback count and percentage charts #}
{# Expects: event, event_feedback_count, events_with_feedback, feedback_counts_by_event, max_attendee_count, feedback_percentage, feedback_percentage_by_event #}

<div class="mb-5">
    <h2 class="h4" id="section-feedback-count">Anzahl Feedback-Einträge</h2>
    <div class="row g-3 align-items-stretch">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Dieses Event</div>
                <div class="card-body">
                    <p class="mb-1">Nicht-legacy Feedback-Einträge für dieses Event:</p>
                    <p class="display-6 mb-3">{{ event_feedback_count }}</p>
                    <canvas id="chart-count-event" height="120"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Vergleich mit anderen Events</div>
                <div class="card-body">
                    <canvas id="chart-count-compare" height="180"></canvas>
                </div>
                <div class="card-footer p-0">
                    <table class="table table-sm table-bordered mb-0">
                        <thead>
                            <tr>
                                <th>Event</th>
                                <th class="text-end">Feedback-Einträge</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ev in events_with_feedback %}
                            <tr>
                                <td>{{ ev.name }}</td>
                                <td class="text-end">{{ feedback_counts_by_event.get(ev.id, 0) }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mb-5">
    <h2 class="h4">Feedback-Beteiligung (% der Besucher:innen)</h2>
    <div class="row g-3 align-items-stretch">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Dieses Event</div>
                <div class="card-body">
                    {% if max_attendee_count > 0 %}
                    <p class="mb-1">Höchste Personenzahl: <strong>{{ max_attendee_count }}</strong></p>
                    <p class="mb-1">Feedback-Einträge: <strong>{{ event_feedback_count }}</strong></p>
                    <p class="mb-3">Beteiligungsquote:</p>
                    <p class="display-6 mb-3">{{ feedback_percentage }}%</p>
                    <canvas id="chart-feedback-percentage" height="120"></canvas>
                    {% else %}
                    <p class="text-muted">Keine Personenzahlen für dieses Event erfasst.</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Vergleich mit anderen Events</div>
                <div class="card-body">
                    {% if feedback_percentage_by_event %}
                    <canvas id="chart-feedback-percentage-compare" height="180"></canvas>
                    {% else %}
                    <p class="text-muted">Keine Vergleichsdaten verfügbar.</p>
                    {% endif %}
                </div>
                <div class="card-footer p-0">
                    {% if feedback_percentage_by_event %}
                    <table class="table table-sm table-bordered mb-0">
                        <thead>
                            <tr>
                                <th>Event</th>
                                <th class="text-end">Max Besucher</th>
                                <th class="text-end">Feedback</th>
                                <th class="text-end">Quote</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ev_id, ev_data in feedback_percentage_by_event.items()|sort(attribute='1.event_name') %}
                            <tr>
                                <td>{{ ev_data.event_name }}</td>
                                <td class="text-end">{{ ev_data.max_attendees }}</td>
                                <td class="text-end">{{ ev_data.feedback_count }}</td>
                                <td class="text-end"><strong>{{ ev_data.percentage }}%</strong></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>