{% extends "layout.html" %}

{% block content %}
<main>
    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-xl-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-area mr-1"></i>
                        Server time
                    </div>
                    <p id="timeSrv"><span id="ServerTime"></span></p>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-bar mr-1"></i>
                        Last log time
                    </div>
                    <p id="timeLog"><span id="LoggerTime"></span></p>
                </div>
            </div>
        </div>
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table mr-1"></i>
                Channels Reading
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-3">
                        Canale 1: <span id="Chan0"></span>
                    </div>
                    <div class="col-3">
                        Canale 2: <span id="Chan1"></span>
                    </div>
                    <div class="col-3">
                        Canale 3: <span id="Chan2"></span>
                    </div>
                    <div class="col-3">
                        Canale 4: <span id="Chan3"></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-3">
                        Canale 5: <span id="Chan4"></span>
                    </div>
                    <div class="col-3">
                        Canale 6: <span id="Chan5"></span>
                    </div>
                    <div class="col-3">
                        Canale 7: <span id="Chan6"></span>
                    </div>
                    <div class="col-3">
                        Canale 8: <span id="Chan7"></span>
                    </div>
                </div>
            </div>
        </div>
            <!--pulsanti start log e stop log-->
            <center>
                <button type="button" class="btn btn-success" onclick="startLog()">Start Log</button>
                <button type="button" class="btn btn-danger" onclick="stopLog()">Stop Log</button>
            </center>
            <br>
        <div class="card mb-4">
            <div class="card-header">
                <div class="row">
                    <div class="col-6">
                        <i class="fas fa-table mr-1"></i>
                        Record Log
                    </div>
                    <div class="col-6 text-right">
                        <button type="button" class="btn btn-primary" onclick="startNewRec()">Create record File</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row" id="divNewFile">
                    <form class="col-12" method="POST" action="/api/v1/sessions">
                            <div class="input-group mb-3">
                            <span class="input-group-text">Nuova sessione</span>
                            <input type="text" class="form-control" id="NewSessionName" name="NewSessionName"></input>
                            <div class="input-group-append">
                            <input type="submit" value="Invio" class="btn btn-success"></input>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row">
                    <div class="col-2">check</div>
                    <div class="col-2">Inizio</div>
                    <div class="col-2">Durata</div>
                    <div class="col-2">Nome</div>
                    <div class="col-4">Copy</div>
                </div>
                <div class="row">
                    <div class="col-2">check</div>
                    <div class="col-2">Inizio</div>
                    <div class="col-2">Durata</div>
                    <div class="col-2">Nome</div>
                    <div class="col-4">Copy</div>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}