<?php
    if(!isset($_COOKIE['login'])){
        $login = $_COOKIE['login'];
        if($login!==true){
            header("Location: login.php");
        }
    }
?>

<!doctype html>
<html lang="pl" data-bs-theme="auto">
    <head>
        <script src="https://getbootstrap.com/docs/5.3/assets/js/color-modes.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Falownik EaSun</title>
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
        <link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
        <link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
        <link rel="manifest" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/manifest.json">
        <link rel="mask-icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
        <link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon.ico">
        <meta name="theme-color" content="#712cf9">
        
        <!-- Custom styles for this template -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="dashboard.css" rel="stylesheet">
    </head>
    <body onload="fetchData('[r204,r213,r217,r223]','Wykres mocy')">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="check2" viewBox="0 0 16 16">
            <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
        </symbol>
        <symbol id="circle-half" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
        </symbol>
        <symbol id="moon-stars-fill" viewBox="0 0 16 16">
            <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
            <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
        </symbol>
        <symbol id="sun-fill" viewBox="0 0 16 16">
            <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
        </symbol>
        </svg>

        <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
        <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
                id="bd-theme"
                type="button"
                aria-expanded="false"
                data-bs-toggle="dropdown"
                aria-label="Toggle theme (auto)">
            <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
            <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
            <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
                Jasny
                <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
            </button>
            </li>
            <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
                Ciemny
                <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
            </button>
            </li>
            <li>
            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
                Automatyczny
                <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
            </button>
            </li>
        </ul>
        </div>

        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="door-closed" viewBox="0 0 16 16">
                <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
                <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
            </symbol>
            <symbol id="gear-wide-connected" viewBox="0 0 16 16">
                <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
            </symbol>
            <symbol id="download">
                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
            </symbol>
            <symbol id="list" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
            </symbol>
            <symbol id="search" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </symbol>
        </svg>

        <ul class="navbar-nav flex-row d-md-none">
            <!-- <li class="nav-item text-nowrap">
            <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
                <svg class="bi"><use xlink:href="#search"/></svg>
            </button>
            </li> -->
            <li class="nav-item text-nowrap">
            <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                <svg class="bi"><use xlink:href="#list"/></svg>
            </button>
            </li>
        </ul>

        <!-- <div id="navbarSearch" class="navbar-search w-100 collapse">
            <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
        </div> -->
        </header>

        <div class="container-fluid">
            <div class="row">
                <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
                    <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r204,r213,r217,r223]','Wykres mocy')">
                                    Wykres mocy
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r202]','Efektywne napięcie sieciowe')">
                                    Efektywne napięcie sieciowe
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r203]','Częstotliwość sieciowa')">
                                    Częstotliwość sieciowa
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r204]','Średnia moc sieciowa')">
                                    Średnia moc sieciowa
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r205]','Efektywne napięcie falownika')">
                                    Efektywne napięcie falownika
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r206]','Efektywny prąd falownika')">
                                    Efektywny prąd falownika
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r207]','Częstotliwość falownika')">
                                    Częstotliwość falownika
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r208]','Średnia moc falownika')">
                                    Średnia moc falownika
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r209]','Moc ładowania falownika')">
                                    Moc ładowania falownika
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r210]','Efektywne napięcie wyjściowe')">
                                    Efektywne napięcie wyjściowe
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r211]','Efektywny prąd wyjściowy')">
                                    Efektywny prąd wyjściowy
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r212]','Częstotliwość wyjściowa')">
                                    Częstotliwość wyjściowa
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r213]','Aktywna moc wyjściowa')">
                                    Aktywna moc wyjściowa
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r214]','Całkowita moc wyjściowa')">
                                    Całkowita moc wyjściowa
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r215]','Średnie napięcie baterii')">
                                    Średnie napięcie baterii
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r216]','Średni prąd baterii')">
                                    Średni prąd baterii
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r217]','Średnia moc baterii')">
                                    Średnia moc baterii
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r219]','Średnie napięcie PV')">
                                    Średnie napięcie PV
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r220]','Średni prąd PV')">
                                    Średni prąd PV
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r223]','Średnia moc PV')">
                                    Średnia moc PV
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r224]','Średnia moc ładowania PV')">
                                    Średnia moc ładowania PV
                                </button>
                            </li>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r225]','Procent obciążenia')">
                                    Procent obciążenia
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r226]','Temperatura DCDC')">
                                    Temperatura DCDC
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r227]','Temperatura falownika')">
                                    Temperatura falownika
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r229]','Stan naładowania baterii')">
                                    Stan naładowania baterii
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r232]','Średni prąd baterii')">
                                    Średni prąd baterii
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r233]','Średni prąd ładowania falownika')">
                                    Średni prąd ładowania falownika
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link d-flex align-items-center gap-2" onclick="fetchData('[r234]','Średni prąd ładowania PV')">
                                    Średni prąd ładowania PV
                                </button>
                            </li>
                            
                        </ul>

                        <hr class="my-3">

                        <ul class="nav flex-column mb-auto">
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center gap-2" href="app/download.php">
                                    <svg class="bi"><use xlink:href="#download"/></svg>
                                    Pobierz aplikację
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center gap-2" href="energy.php">
                                    Produkcja energii
                                </a>
                            </li>
                            <!-- <li class="nav-item">
                                <a class="nav-link d-flex align-items-center gap-2" href="manage.php">
                                    Zmień ustawienia zarządzanego urządzenia
                                </a>
                            </li> -->
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center gap-2" href="energyPrice.php">
                                    Modyfikowanie cen energii
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center gap-2" href="settings.php">
                                    Ustawienia falownika
                                </a>
                            </li>
                            <!-- <li class="nav-item">
                                <a class="nav-link d-flex align-items-center gap-2" href="#">
                                    <svg class="bi"><use xlink:href="#door-closed"/></svg>
                                    Sign out
                                </a>
                            </li> -->
                        </ul>
                    </div>
                </div>
            </div>

            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2" id="title"></h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                <!-- <div class="btn-group me-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
                </div> -->
                <input type="date" name="date_picker" id="date_picker" class="btn btn-sm btn-outline-secondary">
                </div>
            </div>

            <!-- <div id="chart">
                <canvas class="my-4 w-100" id="myChart" width="1000px" height="400"></canvas>
                <!- <div id="chartContainer"></div> --
            </div> -->
            <div id="chartContainer" style="position: relative; height: 400px;">
                <canvas class="my-4 w-100" id="myChart" width="1000px" height="400"></canvas>
            </div>


            <h2>Dane na żywo</h2>
            <div class="table-responsive small">
            <div id="table-container">
                <table class="table table-striped table-sm" id="live-data"></table>

            </div>

                <!-- <thead>
                    <tr>
                    <th scope="col">#</th>
                    <th scope="col">Header</th>
                    <th scope="col">Header</th>
                    <th scope="col">Header</th>
                    <th scope="col">Header</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>1,001</td>
                    <td>random</td>
                    <td>data</td>
                    <td>placeholder</td>
                    <td>text</td>
                    </tr>
                </tbody> -->
                <!-- </table> -->
            </div>
            <h2>Dane z aktualnego dnia</h2>
            <div class="my-3 p-3 bg-body rounded shadow-sm">
                <h6 class="border-bottom pb-2 mb-0">Szczegółowe informacje</h6>
                <div class="d-flex text-body-secondary pt-3">
                    <!-- <img class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" src="" alt=""> -->
                    <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
                        <div class="d-flex justify-content-between">
                        <strong class="text-gray-dark">Status urządzenia: </strong>
                        </div>
                        <span class="d-block" id="device"></span>
                    </div>
                </div>
                <div class="d-flex text-body-secondary pt-3">
                    <!-- <img class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" src="" alt=""> -->
                    <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
                        <div class="d-flex justify-content-between">
                        <strong class="text-gray-dark">Energia całkowita ogółem:</strong>
                        </div>
                        <span class="d-block" id="total_energy_all"></span>
                    </div>
                </div>
                <div class="d-flex text-body-secondary pt-3">
                    <!-- <img class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" src="" alt=""> -->
                    <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
                        <div class="d-flex justify-content-between">
                        <strong class="text-gray-dark">Energia całkowita danego dnia: </strong>
                        </div>
                        <span class="d-block" id="total_energy"></span>
                    </div>
                </div>
                <div class="d-flex text-body-secondary pt-3">
                    <!-- <img class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" src="" alt=""> -->
                    <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
                        <div class="d-flex justify-content-between">
                        <strong class="text-gray-dark">Energia pobrana z sieci:</strong>
                        </div>
                        <span class="d-block" id="grid_energy"></span>
                    </div>
                </div>
                <div class="d-flex text-body-secondary pt-3">
                    <!-- <img class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" src="" alt=""> -->
                    <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
                        <div class="d-flex justify-content-between">
                        <strong class="text-gray-dark">Energia wyprodukowana z PV:</strong>
                        </div>
                        <span class="d-block" id="pv_energy"></span>
                    </div>
                </div>
                <div class="d-flex text-body-secondary pt-3">
                    <!-- <img class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" src="" alt=""> -->
                    <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
                        <div class="d-flex justify-content-between">
                        <strong class="text-gray-dark">Energia oddana do baterii:</strong>
                        </div>
                        <span class="d-block" id="battery_chg_energy"></span>
                    </div>
                </div>
                <div class="d-flex text-body-secondary pt-3">
                    <!-- <img class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" src="" alt=""> -->
                    <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
                        <div class="d-flex justify-content-between">
                        <strong class="text-gray-dark">Energia pobrana z baterii:</strong>
                        </div>
                        <span class="d-block" id="battery_dhg_energy"></span>
                    </div>
                </div>
            </div>
            <div class="table-responsive small" style="height: 90vh;">
                <table class="table table-striped table-sm" id="dataDay">
                    <thead id="dataDayHead" style="position: sticky; top: 0;"></thead>
                    <tbody id="dataDayBody"></tbody>
                </table>
            </div>
            </main>
        </div>
        </div>
        <script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
        <script src="dashboard.js"></script>
        <!-- <script src="labels.json"></script> -->
    </body>
</html>