<!DOCTYPE html>
<html>
<head>
    <title>Partycontroller</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/session.css">
</head>
<body>
    <header>
        <ul>
            <li>
                <img class="logo" src="/static/icons/icon.png" alt="Logo">
            </li>
            <li>
                <p>Nächstes Event: </p>
            </li>
            <li>
                <p>Song: </p> 
            </li>
            <li>
                <button class="song_button" id="previous_song_button" onclick="previous_song()"></button>
            </li>
            <li>
                <button class="song_button" id="toggle_play_button" onclick="toggle_play()"></button>
            </li>
            <li>
                <button class="song_button" id="skip_song_button" onclick="skip_song()"></button>
            </li>
            <li>
                <span id="tempstat"> temp</span>
            </li>
            <li>
                <span id="ramstat">ram</span>
            </li>
            <li>
                <span id="cpustat">cpu</span>
            </li>
            <li>
                <span id="uhrzeit">zeit</span>
            </li>
            <li>
                <span id="username" onclick="togglePopup()">Peter</span>
            </li>
        </ul>
        
    </header>
    <main>
    {% block content %}   
    <input class="nav_button" type="radio" name="navigation" id="home_button" checked></input>
    <label for="home_button"></label><br/>
    <input class="nav_button" type="radio" name="navigation" id="planer_button" ></input>
    <label for="planer_button"></label><br/>
    <input class="nav_button" type="radio" name="navigation" id="games_button" ></input>
    <label for="games_button"></label><br/>
    <input class="nav_button" type="radio" name="navigation" id="chat_button" ></input>
    <label for="chat_button"></label><br/>
    <input class="nav_button" type="radio" name="navigation" id="music_button" ></input>
    <label for="music_button"></label><br/>
    <input class="nav_button" type="radio" name="navigation" id="mate_button" ></input>
    <label for="mate_button"></label><br/>
    <input class="nav_button" type="radio" name="navigation" id="settings_button" ></input>
    <label for="settings_button"></label><br/>
    
    <!-- Div-Inhalte -->
     <!-- Home -->
    <section id="home">
        <h1>Home</h1>
        <p>
            Willkommen zur diesjährigen 24-stündigen LAN-Party! Wir haben ein spannendes Line-up mit Spiel 1, Spiel 2 und Spiel 3 vorbereitet. Lasst uns gemeinsam unvergessliche Gaming-Momente schaffen! Möge die Party beginnen, und möge die Beste Person gewinnen!</p>
    </section>
    
     <!-- Planer -->
    <section id="planer">
        <h1>Planer</h1>
        <table id="events">
            <thead>
                <tr>
                    <th>Event</th>
                    <th>Zeit</th>
                    <th>Status</th>
                    <th>Verwalten</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>f</td>
                    <td>f</td>
                    <td>f</td>
                    <td>f</td>
                </tr>
            </tbody>
        </table>

        <button id="add_event_button" onclick="document.getElementById('new_event_form_dialog').open = true;">+</button>

        <dialog id="new_event_form_dialog">
            <form id="event_form" action="/api/event/new" target='hiddenIFrame' method='post'>
                <input id="event_input" type="text" name="Event" placeholder="Event Name" maxlength="20" minlength="1" required><br/>
                <input id="event_time" type="datetime-local" id="meeting-time"
                   name="meeting-time" value="2023-12-31T12:00"
                                       min="2023-12-31T00:00"
                                       max="2024-01-01T18:00" required><br/>
              <button class="dialog_control" onclick="document.getElementById('new_event_form_dialog').open = false" type="submit">Hinzufügen</button>
              <button class="dialog_control" onclick="document.getElementById('new_event_form_dialog').open = false">Abbrechen</button>
            </form>
        </dialog>

        <iframe name='hiddenIFrame' id='hiddenIFrame' hidden></iframe>
    </section>

     <!-- Games -->
    <section id="games">
        <h1>Games</h1>

        <input type="radio" name="game_info_select" id="punkte_button">
        <label for="punkte_button">Punkte</label>
        <input type="radio" name="game_info_select" id="zeit_button">
        <label for="zeit_button">Zeit</label>
        <input type="radio" name="game_info_select" id="team_button">
        <label for="team_button">Team</label>

        <div id="team" class="hidden1" >
            <p>Du bist in Team</p>
            <table id="team_member">
                <tbody>
                    <tr>
                        <td>Team</td>
                        <td>Game</td>
                        <td>Points</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>f</td>
                        <td>f</td>
                    </tr>
                </tbody>
            </table>
        </div>
      
        <div id="punkt" class="hidden1">
            <table id="point_game">
                <tbody>
                    <tr>
                        <td>User</td>
                        <td>Game</td>
                        <td>Points</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>f</td>
                        <td>f</td>
                    </tr>
                </tbody>
            </table>
            <button class="submit_button" type="submit">Add</button>
        </div>
       
        <div id="zeit" class="hidden1" >
            <center>
            <table id="time_game">
                <tbody>
                    <tr>
                        <td>User</td>
                        <td>Game</td>
                        <td>Time</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>f</td>
                        <td>f</td>
                    </tr>
                </tbody>
            </table>
            <button class="submit_button" type="submit">Add</button>
        </center>
        </div>

    </section>

     <!-- Chat -->
    <section id="chat">
        <div id="chat-container">
            <h1>Chat</h1>
            <div id="chatBox">
            </div>
            <div id="chatInput">
                <input id="chatInputField" type="text" placeholder="Nachricht">
                <button class="submit_button" id="chatInputButton" onclick="sendMessage()">Senden</button>
            </div>
        </div>
    </section>

     <!-- Musik -->
    <section id="music">
        <h1>Musik</h1>
        <button id="back"></button>
        <button id="play"></button>
        <button id="next"></button>
    </section>

     <!-- Mate -->
    <section id="mate">
        <div id="mate-container">
            <h1>Mate</h1>
            <table id="mate_kiste">
            </table>
            <button id="mate_reset" class="reset-kiste" onclick="resetKiste()">Reset</button>
            <button id="mate_hinzu">Kasten Hinzufügen</button>
        </div>
    </section>

     <!-- Einstellungen -->
    <section id="settings">
        <h1>Einstellungen</h1>
        <label for="position_select">Menü Position: </label>
        <select id="position_select">
            <option value="left">Links</option>
            <option value="right">Rechts</option>
            <option value="down">Unten</option>
            <option value="top">Oben</option>
        </select>
    </br>
        <label for="color_select">LED Streifen: </label>
        <input id="color_select" type="color"></input>
        <p>Uptime: </p>
        <p>Administrator: </p>
        <p>Anzahl User: </p>
        <p>Uptime: </p>
        <button id="save_settings">Speichern</button>
        <button id="abort_settings">abbrechen</button>
        <button id="reset_settings">reset</button>
    </section>

    <!-- ... (Dein vorhandener HTML-Code) ... -->
     <!-- Hinzugefügter HTML-Code für den ausfahrbaren Kasten -->
    <div class="popup" id="popup">
        <div class="popup-content">
            <span onclick="togglePopup()" class="close-button">Close</span>
            <p>Hier könntest du logout machen</p>
        </div>
    </div>
    </main>
    
    <footer>
        <p>Partycontroller Version 0.1<br/></p>
        &copy; Lostkids</p>
    </footer>
    {% endblock %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.js"></script>
    <script src="/static/js/session.js"></script>
    <script src="/static/js/chat.js"></script>
    <script src="/static/js/planer.js"></script>
    <script src="/static/js/mate.js"></script>
</body>
</html>

