
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='gimmiCoffee_Logo.png') }}" type="image/png">
    <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
</head>
<body>
    <header>
        <div class="site-title">gimmiCoffee</div>
        <div class="user-actions">
            <span class="username">{{ username }}</span>
            <a onclick="logout()" class="logout">Logout</a>
        </div>
    </header>
    <div id="waterData" style="display: none;">{{ water | tojson }}</div>
    <div id="beansData" style="display: none;">{{ beans | tojson }}</div>
    <div id="machineData" style="display: none;">{{ machine | tojson }}</div>
    <div id="espData" style="display: none;">{{ esp_conn_infos | tojson }}</div>
    <main class="main-container">

        <section class="left">
            <div class="info" id="infoMain">
                <div style="flex: 1; display: flex; align-items: center;">
                  <strong>ESP-Connection Infos</strong>
                </div>
              
                <div style="flex: 1;">
                  <p><strong>Global IP:</strong> <span id="ip_global">–</span></p>
                  <p><strong>Local IP:</strong> <span id="ip_local">–</span></p>
                </div>
              
                <div style="flex: 1;">
                  <p><strong>Valid Connection:</strong> <span id="valid_connection">–</span></p>
                  <p><strong>Last Seen:</strong> <span id="last_seen">–</span></p>
                </div>
              
                <div class="validationButtonOuter">
                  <div onclick="tryValidateConnection()" class="validButt" id="validButt">Validate Connection</div>
                </div>
              </div>
            <div class="button-grid">
                <div class="grid-button deniePress" id="make-coffee-butt">
                    <div class="top-left-text">Kaffeeee</div>
                    <div class="center-number">Kaffee Machen</div>
                </div>
                <div class="grid-button deniePress" id="machine-status-butt" onclick="toggleMachine()">
                    <div class="top-left-text">Maschine</div>
                    <div class="center-number" id="machine-status">AUS</div>
                </div>
                <div class="grid-button deniePress" id="machine-error-butt">
                    <div class="top-left-text">Fehler</div>
                    <div class="center-number" id="machiene-error-text">Keiner</div>
                </div>
                <div class="grid-button deniePress initBackRed" id="machine-ready-butt">
                    <div class="top-left-text">Maschine</div>
                    <div class="center-number" id="machiene-ready-text">Nicht Bereit</div>
                </div>
                <div class="grid-button defaultGray" onclick="waterRefill()">
                    <div class="top-left-text">Wasser</div>
                    <div class="center-number">Nachgefüllt?</div>
                </div>
                <div class="grid-button defaultGray" onclick="beansRefill()">
                    <div class="top-left-text">Bohnen</div>
                    <div class="center-number">Nachgefüllt?</div>
                </div>
            </div>
        </section>

        <section class="right stats-box">
            <h2 class="stats-title">Statistiken</h2>
            <div class="clickable" onclick="showCoffeeHistory()">
                <div class="top-left-text">Coffee made</div>
                <div class="center-number">{{ coffee_count }}</div>
            </div>
            <div class="clickable" onclick=" window.location.href = '/unsecure/beans'">
                <div class="top-left-text">Bohnen Füllstand</div>
                <div class="center-number" id="beans-fill">XX%</div>
            </div>
            <div class="clickable" onclick=" window.location.href = '/unsecure/water'">
                <div class="top-left-text">Wasser Füllstand</div>
                <div class="center-number" id="water-fill">XX%</div>
            </div>
            <div class="clickable not">
                <div class="top-left-text">Bohnen nachgefüllt</div>
                <div class="center-number" id="beans-filled">XX</div>
            </div>
            <div class="clickable not">
                <div class="top-left-text">Wasser nachgefüllt</div>
                <div class="center-number" id="water-filled">XX</div>
            </div>
        </section>
        
    </main>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
    <script src="{{ url_for('static', filename='socketio.js') }}"></script>
</body>
</html>