breakpilot-pwa/backend/frontend/meetings/pages/breakout.py

"""
Meetings Module - Breakout Rooms Page
Breakout rooms management
"""

from ..templates import ICONS, render_base_page


def breakout_rooms_page() -> str:
    """Breakout rooms management"""
    content = f'''
    <div class="page-header">
      <div>
        <h1 class="page-title">Breakout-Rooms</h1>
        <p class="page-subtitle">Gruppenräume für Workshops und Übungen verwalten</p>
      </div>
    </div>

    <!-- Active Meeting Warning -->
    <div class="card" style="background: var(--bp-primary-soft); border-color: var(--bp-primary); margin-bottom: 2rem;">
      <div style="display: flex; align-items: center; gap: 1rem;">
        <div class="card-icon primary">{ICONS['video']}</div>
        <div style="flex: 1;">
          <div style="font-weight: 600;">Kein aktives Meeting</div>
          <div style="font-size: 0.875rem; color: var(--bp-text-muted);">
            Breakout-Rooms können nur während eines aktiven Meetings erstellt werden.
          </div>
        </div>
        <button class="btn btn-primary" onclick="window.location.href='/meetings/quick'">
          Meeting starten
        </button>
      </div>
    </div>

    <!-- How it works -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">So funktionieren Breakout-Rooms</span>
      </div>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem;">
        <div style="text-align: center;">
          <div class="card-icon primary" style="margin: 0 auto 1rem;">{ICONS['grid']}</div>
          <h4 style="margin-bottom: 0.5rem;">1. Räume erstellen</h4>
          <p style="font-size: 0.875rem; color: var(--bp-text-muted);">
            Erstellen Sie mehrere Breakout-Rooms für Gruppenarbeit.
          </p>
        </div>
        <div style="text-align: center;">
          <div class="card-icon info" style="margin: 0 auto 1rem;">{ICONS['users']}</div>
          <h4 style="margin-bottom: 0.5rem;">2. Teilnehmer zuweisen</h4>
          <p style="font-size: 0.875rem; color: var(--bp-text-muted);">
            Weisen Sie Teilnehmer manuell oder automatisch zu.
          </p>
        </div>
        <div style="text-align: center;">
          <div class="card-icon accent" style="margin: 0 auto 1rem;">{ICONS['play']}</div>
          <h4 style="margin-bottom: 0.5rem;">3. Sessions starten</h4>
          <p style="font-size: 0.875rem; color: var(--bp-text-muted);">
            Starten Sie alle Räume gleichzeitig oder einzeln.
          </p>
        </div>
        <div style="text-align: center;">
          <div class="card-icon warning" style="margin: 0 auto 1rem;">{ICONS['clock']}</div>
          <h4 style="margin-bottom: 0.5rem;">4. Timer setzen</h4>
          <p style="font-size: 0.875rem; color: var(--bp-text-muted);">
            Setzen Sie einen Timer für automatisches Beenden.
          </p>
        </div>
      </div>
    </div>

    <!-- Breakout Configuration Preview -->
    <div class="card" style="margin-top: 2rem;">
      <div class="card-header">
        <span class="card-title">Breakout-Konfiguration (Vorschau)</span>
        <button class="btn btn-secondary" disabled>
          {ICONS['plus']} Raum hinzufügen
        </button>
      </div>

      <div class="breakout-grid" style="margin-top: 1rem;">
        <div class="breakout-room" style="opacity: 0.5;">
          <div class="breakout-room-header">
            <span class="breakout-room-title">Raum 1</span>
            <span class="breakout-room-count">0 Teilnehmer</span>
          </div>
          <div class="breakout-participants">
            <span style="color: var(--bp-text-muted); font-size: 0.875rem;">Keine Teilnehmer</span>
          </div>
        </div>

        <div class="breakout-room" style="opacity: 0.5;">
          <div class="breakout-room-header">
            <span class="breakout-room-title">Raum 2</span>
            <span class="breakout-room-count">0 Teilnehmer</span>
          </div>
          <div class="breakout-participants">
            <span style="color: var(--bp-text-muted); font-size: 0.875rem;">Keine Teilnehmer</span>
          </div>
        </div>

        <div class="breakout-room" style="opacity: 0.5;">
          <div class="breakout-room-header">
            <span class="breakout-room-title">Raum 3</span>
            <span class="breakout-room-count">0 Teilnehmer</span>
          </div>
          <div class="breakout-participants">
            <span style="color: var(--bp-text-muted); font-size: 0.875rem;">Keine Teilnehmer</span>
          </div>
        </div>
      </div>

      <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bp-border);">
        <div class="form-group">
          <label class="form-label">Automatische Zuweisung</label>
          <select class="form-select" disabled>
            <option>Gleichmäßig verteilen</option>
            <option>Zufällig zuweisen</option>
            <option>Manuell zuweisen</option>
          </select>
        </div>

        <div class="form-group">
          <label class="form-label">Timer (Minuten)</label>
          <input type="number" class="form-input" value="15" disabled>
        </div>

        <div class="btn-group">
          <button class="btn btn-primary" disabled>Breakout-Sessions starten</button>
          <button class="btn btn-secondary" disabled>Alle zurückholen</button>
        </div>
      </div>
    </div>
    '''

    return render_base_page("Breakout-Rooms", content, "breakout")