{% extends 'apppage.html' %}

{% block scripts %}
{{ parent() }}
<script src="{{ base_uri }}/js/datatables.min.js?v={{ version }}"></script>
<script src="{{ base_uri }}/js/datatableslocale.js?v={{ version }}"></script>
<script src="{{ base_uri }}/js/moment-with-locales.js?v={{ version }}"></script>
<script src="{{ base_uri }}/js/photoswipe/photoswipe.min.js?v={{ version }}"></script>
<script src="{{ base_uri }}/js/photoswipe/photoswipe-ui-default.min.js?v={{ version }}"></script>
<script src="{{ base_uri }}/js/photo.js?v={{ version }}"></script>
<script src="{{ base_uri }}/js/obj.js?v={{ version }}"></script>

{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="{{ base_uri }}/css/datatables.min.css?v={{ version }}" type="text/css" rel="stylesheet">
<link href="{{ base_uri }}/js/photoswipe/photoswipe.css?v={{ version }}" type="text/css" rel="stylesheet">
<link href="{{ base_uri }}/js/photoswipe/aster-skin/default-skin.css?v={{ version }}" type="text/css" rel="stylesheet">
<link href="{{ base_uri }}/css/obj.css?v={{ version }}" type="text/css" rel="stylesheet">
{% endblock %}

{% block content %}

<div class="col-12 p-0" id="content">

    <div class="row pt-2">

        <div class="col-12 col-md-6">

            <div class="col-12 d-flex overflow-auto flex-nowrap mb-1" id="pg">
                <button title="{% trans" Photo gallery
                " %}" data-toggle="tooltip" data-boundary="viewport" data-container="body" data-placement="auto"
                class="btn btn-primary btn-sm picture" type="submit"><i class="fa fa-camera" aria-hidden="true"></i>
                </button>
            </div>

            <div id="circuit" style="user-select: none;" class="col-12 p-0">
            </div>
            <div class="col-12 p-0">
                <button id="btnLive" class="btn btn-sm btn-outline-primary mb-2">
                    🔄 Live
                </button>
            </div>

            <!добавление заголовка к журналу состояния с открытием полного журнала в новой вкладке>
            <strong><a id="stlink" target="_blank">{% trans "State Log" %}</a> </strong>
            <table id="stlog" class="table table-hover table-sm" data-order="[]">
                <thead>
                <tr>
                    <th></th>
                    <th>{% trans "Time" %}</th>
                    <th>{% trans "Mode" %}</th>
                    <th>{% trans "St" %}</th>
                    <th>{% trans "Status" %}</th>
                    <th>{% trans "Event" %}</th>
                </tr>
                </thead>
            </table>

        </div>

        <div class="col-12 col-md-6">
            <div class="pl-1">
                <strong>{% trans "Serial number" %}:</strong> <span id="CustomNum"></span><br>
                <strong>{% trans "Name" %}:</strong> <span id="Name"></span><br>
                <strong>{% trans "SN" %}:</strong> <span id="sn"></span><br>
                <strong>{% trans "Phone number" %}:</strong> <span id="Phone"></span><br>
                <strong>{% trans "Default mode" %}:</strong> <span id="Mode"></span><br>
                <strong>{% trans "Shedule profile" %}:</strong> <span id="DimProfile_Name"></span><br>
                <strong>{% trans "Notification time" %}:</strong> <span id="ControlTime"></span><br>
                <strong>{% trans "Place" %}:</strong> <span id="Location"></span><br>
                <strong>{% trans "Station" %}:</strong> <span id="Station"></span><br>
            </div>

            <div class="pl-1 mt-2">
                <strong>{% trans "State determination time" %}:</strong> <span id="StateTime"></span><br>
                <strong id="strongState">{% trans "Switch State" %}:</strong> <span id="SwState"></span><br>
                <strong>{% trans "Current Mode" %}:</strong> <span id="CurrentMode"></span><br>
                <strong>{% trans "Daily schedule" %}:</strong> <br>
            </div>

            <table id="dimDetail" class="table table-sm table-responsive table-hover">
                <thead>
                <tr class="text-center">
                    {% for i in 1..dim_width %}
                    <th scope="col">
                        <div class="badge badge-light">{% trans "Step" %} {{ i }}</div>
                    </th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
            </table>
            <div class="pl-1 mb-3" id="shiftdiv">
                <strong>{% trans "Shedule Shift" %}:</strong> <span id="shiftstr"></span>
            </div>
            <div class="pl-1 mb-3">
                <strong>{% trans "Door status" %}:</strong> <span id="DoorStatus"></span><br>
                <strong>{% trans "Profile sync" %}:</strong> <span id="SyncStatus"></span><br>
            </div>


            <div class="col-12 pl-1" id="manualDiv">
                <strong>{% trans "Manual control" %}:</strong>
                <form class="form-inline">
                    <div class="input-group mb-1 col-12 p-0">

                        <select id="cmd" class="form-control" onchange="">
                        </select>

                        <div class="input-group-append">
                            <button id="btnCmd" class="btn btn-primary" type="button" onclick="runCmd();">{% trans
                                "Send" %}</i></button>
                        </div>

                    </div>
                </form>
            </div>

            <div id="meterstat">
                <div class="col-12 text-center mt-2">
                    <!открытие новой вкладки для журнала учёта>
                    <strong><a id="meterlink" target="_blank">{% trans "Meter readings"%}</a> {% trans "as of" %}:
                    </strong><span id="metertime"></span>
                </div>

                <table id="meterlog" class="table table-hover table-sm" data-order="[]" style="min-width:100%">
                    <thead>
                    <tr>
                        <th>{% trans "Counter parameter" %}</th>
                        <th>{% trans "Value" %}</th>
                    </tr>
                    </thead>
                </table>

            </div>

            <div id="divstat" class="mb-1">
                <div class="col-12 text-center mt-2">
                    <!открытие новой вкладки для журнала сигнализации>
                    <strong><a id="statlink" target="_blank">{% trans "Received" %}:</a> </strong><span
                        id="iptime"></span>
                </div>
                <div id="ipdata" class="text-monospace col-12 border border-gray rounded text-break">
                </div>
            </div>

        </div>

    </div>


</div>

<div class="d-none d-md-block" id="descktop-visible"></div>


{% endblock %}