{% extends "base.html" %}

{% block title %}{{ 'breakout_sessions'|t }} - {{ event.name }}{% endblock %}

{% block extra_styles %}
<style>
.breakout-sessions {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 40px;
}
</style>
{% endblock %}

{% block content %}
<div class="breakout-sessions">
    <h1>{{ 'breakout_sessions'|t }} - {{ event.name }}</h1>

    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div class="alert alert-info">
                {% for message in messages %}
                    <p>{{ message }}</p>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    {% if sessions %}
        <div class="sessions-list">
            {% for session in sessions %}
            <div class="session-card" data-session-code="{{ session.code }}">
                <div class="session-info">
                    <h3>{{ session.name }}</h3>
                    <p><strong>{{ 'time'|t }}:</strong> {{ session.start_time|localized_date('%H:%M') if session.start_time else '' }} - {{ session.end_time|localized_date('%H:%M') if session.end_time else '' }}</p>
                    <p><strong>{{ 'location'|t }}:</strong> {{ session.location }}</p>
                    {% if session.max_attendees %}
                        <p><strong>{{ 'capacity'|t }}:</strong> <span class="rsvp-count">{{ session.rsvp_count }}</span> / {{ session.max_attendees }}</p>
                    {% else %}
                        <p><strong>{{ 'registered'|t }}:</strong> {{ session.rsvp_count }}</p>
                    {% endif %}
                    {% if session.description %}
                        <p>{{ session.description }}</p>
                    {% endif %}
                </div>
                <div class="session-actions">
                    {% if session.my_rsvp_status == 'registered' %}
                        <button class="btn btn-secondary rsvp-btn" data-session-code="{{ session.code }}" data-action="cancel">{{ 'cancel_rsvp'|t }}</button>
                    {% elif session.my_rsvp_status == 'cancelled' %}
                        <button class="btn btn-primary rsvp-btn" data-session-code="{{ session.code }}" data-action="rsvp">{{ 'rsvp'|t }}</button>
                    {% else %}
                        {% if not session.max_attendees or session.rsvp_count < session.max_attendees %}
                            <button class="btn btn-primary rsvp-btn" data-session-code="{{ session.code }}" data-action="rsvp">{{ 'rsvp'|t }}</button>
                        {% else %}
                            <span class="full-label">{{ 'session_full'|t }}</span>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="no-sessions">{{ 'no_breakout_sessions'|t }}</p>
    {% endif %}

    <div class="back-link">
        <a href="{{ url_for('attendee_dashboard') }}" class="btn btn-outline">{{ 'back_to_dashboard'|t }}</a>
    </div>
</div>

<script>
document.querySelectorAll('.rsvp-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const sessionCode = this.dataset.sessionCode;
        const action = this.dataset.action;
        const endpoint = action === 'rsvp'
            ? `/attendee/breakout-session/${sessionCode}/rsvp`
            : `/attendee/breakout-session/${sessionCode}/cancel-rsvp`;

        try {
            const response = await fetch(endpoint, { method: 'POST' });
            const data = await response.json();

            if (data.success) {
                location.reload();
            } else {
                alert(data.error || '{{ "error_occurred"|t }}');
            }
        } catch (error) {
            alert('{{ "error_processing_request"|t }}');
        }
    });
});
</script>
{% endblock %}