<!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>
    {% block content %}   
 <div class="top-bar"></div>
    
    <div class="content">
        <h1>Huhu</h1>
    </div>
    
    <img class="userlogo" src="/static/icons/user.png" alt="Logo">
    <img class="logo" src="/static/icons/icon.png" alt="Logo">
    
    <!--System Informationen -->
    <img class="cpulogo" src="/static/icons/cpu.png" alt="Logo">
    <img class="ramlogo" src="/static/icons/ram.png" alt="Logo">
    <img class="temperaturlogo" src="/static/icons/temperatur.png" alt="Logo">
    <p class="cpuinfo"> %</p>
    <p class="raminfo"> %</p>
    <p class="tempinfo"> C°</p>
    
    <p class="eventinfo">Nächstes Event: </p>
    
    <p id="peter" class="peter" onclick="togglePopup()">Peter</p> 
    
    <p class="songinfo">Song: </p> 
    <div class="topnext" onclick="skipSong()"></div>
    <div class="topback" onclick="lastSong()"></div>
    <div class="toppause" onclick="pausePlaySong()"></div>
     

     <div class="button-container">
        <div class="seitenbutton" onclick="toggleDiv(1)"></div>
        <div class="seitenbutton" onclick="toggleDiv(2)"></div>
        <div class="seitenbutton" onclick="toggleDiv(3)"></div>
        <div class="seitenbutton" onclick="toggleDiv(4)"></div>
        <div class="seitenbutton" onclick="toggleDiv(5)"></div>
        <div class="seitenbutton" onclick="toggleDiv(6)"></div>
        <div class="seitenbutton" onclick="toggleDiv(7)"></div>
    </div>
    
    <!-- Div-Inhalte -->
     <!-- Home -->
    <div class="hidden-div">
        <h1>Home</h1>
        <p>Huhu</p>
    </div>
    
     <!-- Planer -->
    <div class="hidden-div">
        <h1>Planer</h1>
        <table id="events">
            <tbody>
                <tr>
                    <td>Event</td>
                    <td>Zeit</td>
                    <td>Status</td>
                    <td>Verwalten</td>
                </tr>
                <tr>
                    <td>f</td>
                    <td>f</td>
                    <td>f</td>
                </tr>
            </tbody>
        </table>

    <iframe name='hiddenIFrame' id='hiddenIFrame' style='display:none;'></iframe>
	<form action="/api/event/new" target='hiddenIFrame' method='post'>
		<input class="event_input" typ="text" name="Event" placeholder="Essen" maxlength="20" minlength="1" required>
		<input class="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>
          <button class="submit_button" type="submit">Hinzufügen</button>
	</form>
    </div>

     <!-- Games -->
    <div class="hidden-div">
        <h1>Games</h1>

        <button onclick="">Punkte</button>
        <button onclick="">Zeit</button>
        <button onclick="">Team</button>

        <div id="Team" hidden >
            <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" hidden>
            <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" >
            <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>

    </div>

     <!-- Chat -->
    <div class="hidden-div">
        <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>
    </div>

     <!-- Musik -->
    <div class="hidden-div">
        <h1>Musik</h1>
        <p>Musik lol</p>
    </div>

     <!-- Mate -->
    <div class="hidden-div">
        <div id="mate-container">
            <h1>Mate</h1>
            <table id="mate_kiste">
            </table>
            <button class="reset-kiste" onclick="resetKiste()">Reset</button>
        </div>
    </div>

     <!-- Einstellungen -->
    <div class="hidden-div">
        <h1>Einstellungen</h1>
        <p>Einstellen</p>
    </div>

    <!-- ... (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>
    
     <footer style="position: fixed; bottom: 0; width: 100%; background-color: #333; color: rgb(220, 220, 210); text-align: center; padding: 10px;">
        <div>Partycontroller Version 0.1</div>
        <div>&copy; Lostkids</div>
    </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>

