{% extends "base.html" %}

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

{% block content %}
<div class="breakout-sessions">
    <div class="page-header">
        <h1>{{ 'breakout_sessions'|t }} - {{ event.name }}</h1>
        <a href="{{ url_for('create_breakout_session', event_id=event.id) }}" class="btn btn-primary">{{ 'create_breakout_session'|t }}</a>
    </div>

    {% if sessions %}
        <div class="sessions-list">
            {% for session in sessions %}
            <div class="session-card">
                <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> {{ session.rsvp_count }} / {{ 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">
                    <a href="{{ url_for('view_breakout_session', code=session.code) }}" class="btn btn-secondary">{{ 'view_attendees'|t }}</a>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="no-sessions">{{ 'no_breakout_sessions_yet'|t }}</p>
    {% endif %}

    <div class="back-link">
        <a href="{{ url_for('event_detail', code=event.code) }}" class="btn btn-outline">{{ 'back_to_event'|t }}</a>
    </div>
</div>
{% endblock %}