{% extends "base.html" %}

{% block title %}{{ 'create_breakout_session'|t }} - NetEvents{% endblock %}

{% block content %}
<div class="form-container" style="padding: 20px;">
    <h1>{{ 'create_breakout_session'|t }}</h1>
    <p class="event-info">{{ 'event'|t }}: {{ event.name }}</p>

    <form method="POST" action="{{ url_for('create_breakout_session', event_id=event.id) }}" class="session-form">
        <div class="form-group">
            <label for="name">{{ 'session_name'|t }}</label>
            <input type="text" id="name" name="name" required>
        </div>

        <div class="form-group">
            <label for="description">{{ 'description'|t }}</label>
            <textarea id="description" name="description" rows="3"></textarea>
        </div>

        <div class="form-group">
            <label for="start_time">{{ 'start_time'|t }}</label>
            <input type="datetime-local" id="start_time" name="start_time" required value="{% if prefilled_date %}{{ prefilled_date }}T09:00{% endif %}">
        </div>

        <div class="form-group">
            <label for="end_time">{{ 'end_time'|t }}</label>
            <input type="datetime-local" id="end_time" name="end_time" required value="{% if prefilled_date %}{{ prefilled_date }}T10:00{% endif %}">
        </div>

        <div class="form-group">
            <label for="location">{{ 'location'|t }}</label>
            <input type="text" id="location" name="location" required>
        </div>

        <div class="form-group">
            <label for="max_attendees">{{ 'max_attendees_event_hint'|t }} {{ event.max_attendees or 'unlimited' }})</label>
            <input type="number" id="max_attendees" name="max_attendees" min="1"{% if event.max_attendees %} max="{{ event.max_attendees }}"{% endif %}>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">{{ 'create_session'|t }}</button>
            <a href="{{ url_for('list_breakout_sessions', event_id=event.id) }}" class="btn btn-outline">{{ 'cancel'|t }}</a>
        </div>
    </form>
</div>
{% endblock %}