<!DOCTYPE html>
<html lang="fr">

<!-- Head -->
<head>
    {% include 'head.html' %}
</head>
<!-- End of Head -->

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    {% include 'sidebar.html' %}
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                {% include 'topbar.html' %}
            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">
                <!-- Content Row -->
                <div class="row">

                    <!-- Earnings (Monthly) Card Example -->
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Dernière
                                            mise à jour
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                                            <!-- Date et heure en JS rajouté pour connaître dernière mise à jour de la page web -->
                                            <script type="text/javascript">
                                                var ladate = new Date()
                                                var d = ladate.getDate();
                                                if (d < 10) {
                                                    d = "0" + d
                                                }
                                                var month = ladate.getMonth() + 1;
                                                if (month < 10) {
                                                    month = "0" + month
                                                }
                                                document.write(d + "/" + month + "/" + ladate.getFullYear() + " <br> à ")
                                                var h = ladate.getHours();
                                                if (h < 10) {
                                                    h = "0" + h
                                                }
                                                var m = ladate.getMinutes();
                                                if (m < 10) {
                                                    m = "0" + m
                                                }
                                                document.write(h + "h" + m)
                                            </script>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-calendar fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Earnings (Monthly) Card Example -->
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div id="alarm_cardio" class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Alarme
                                            cardio
                                        </div>
                                        <div id="state_bpm_0" class="card bg-danger text-white shadow">
                                            <div id="state_bpm_critique" class="text-center">Etat critique</div>
                                        </div>
                                        <div id="state_bpm_1" class="card bg-success text-white shadow">
                                            <div id="state_bpm_stable" class="text-center">Etat stable</div>
                                        </div>
                                        <div id="state_bpm_2" class="card bg-warning text-white shadow">
                                            <div id="state_bpm_surveiller" class="text-center">Etat à surveiller</div>
                                        </div>
                                        <div id="state_bpm_3" class="card bg-success text-white shadow display none">
                                            <div id="state_bpm_nodata" class="text-center">Pas de données</div>
                                        </div>
                                        <div id="text_bpm" class="text-center"><span id="value_bpm"></span> BPM</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-heartbeat fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Earnings (Monthly) Card Example -->
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-info shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div id="alarm_oxy" class="col mr-2">
                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Alarme
                                            oxygène
                                        </div>
                                        <div id="state_oxy_0" class="card bg-danger text-white shadow">
                                            <div id="state_oxy_critique" class="text-center">Etat critique</div>
                                        </div>
                                        <div id="state_oxy_1" class="card bg-info text-white shadow">
                                            <div id="state_oxy_stable" class="text-center">Etat stable</div>
                                        </div>
                                        <div id="state_oxy_2" class="card bg-warning text-white shadow">
                                            <div id="state_oxy_surveiller" class="text-center">Etat à surveiller</div>
                                        </div>
                                        <div id="state_oxy_3" class="card bg-info text-white shadow">
                                            <div id="state_oxy_nodata" class="text-center">Pas de données</div>
                                        </div>
                                        <!-- Stable 95 à 100% mais non viable en dessous de 95 et critique en dessous de 90% -->
                                        <div id="text_oxy" class="text-center"><span id="value_oxy"></span> %</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-bullseye fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pending Requests Card Example -->
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-warning shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div id="alarm_chute" class="col mr-2">
                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Alarme
                                            chute
                                        </div>
                                        <div id="state_chute_0" class="card bg-warning text-white shadow">
                                            <div id="state_chute_ras" class="text-center">R.A.S</div>
                                        </div>
                                        <div id="state_chute_1" class="card bg-danger text-white shadow">
                                            <div id="state_chute_down" class="text-center">Au sol</div>
                                        </div>
                                        <div id="text_town" class="text-center">{{town}}</div>
                                        <div id="state_chute_2" class="card bg-warning text-white shadow">
                                            <div id="state_chute_nodata" class="text-center">Pas de données</div>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-wheelchair fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Content Row -->
                <div class="row">

                    <div class="col-xl-12 col-lg-7">

                        <!-- Area Chart -->
                        <div class="col-xl-12 col-lg-7">
                            <div class="card border-left-secondary shadow mb-4">
                                <!-- Card Header - Dropdown -->
                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-secondary">Fréquences cardiaques et taux
                                        d'oxygène</h6>
                                </div>
                                <!-- Card Body -->
                                <div class="card-body">
                                    <div class="chart-area">
                                        <canvas id="canvas"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        {% include 'footer.html' %}
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    {% include 'auth/logout_modal.html' %}
</div>
<!-- End Logout Modal-->

<!-- Script utile à la page -->
<script src="../static/js/chart_coeur_oxy.js"></script>
<script src="../static/js/alarm_div_reload.js"></script>

</body>

</html>
