{% extends 'index.html' %}

{% block content %}
<div style="margin-left: 20px;">

    <div>

        <div id="configurationTabs">
            <ul>
                <li {% if tab=='S' : %} class="selected" {% endif %}><a href="/search_page">Search</a></li>
                <li {% if tab=='B' : %} class="selected" {% endif %}><a href="/meter_search_and_overview">Overview</a>
                </li>
                <li {% if tab=='P' : %} class="selected" {% endif %}><a href="/create_templates">Templates</a></li>

                <li {% if tab=='P1' : %} class="selected" {% endif %}><a href="/mymeters_overview">My Meters</a></li>
                <li {% if tab=='Doc' : %} class="selected" {% endif %}><a href="/startup_manual">Documentation</a>
                </li>
            </ul>
        </div>
    </div>
    <br>
    <br>

    <div class="mainBody">
        <div id="showBrowse" class="meterHeadings">
            <h2>Overview</h2>
        </div>

        <div class="pannel pannel-row-container">

            <div class="pannel-row-item">
                <p class="pannel-row-item-title">Total</p>
                <div class="pannel-row-item-value">
                    <div id="meters-numMeters" class="pannel-row-item-contained">
                        {{meters["numMeters"]}}
                    </div>
                </div>
            </div>
            <div class="pannel-row-item">
                <p class="pannel-row-item-title">Verified</p>
                <div class="pannel-row-item-value">
                    <div id="meters-verified" class="pannel-row-item-contained">
                        {{meters["verified"]}}/{{meters["numMeters"]}}
                    </div>
                </div>
            </div>
            <div class="pannel-row-item">
                <p class="pannel-row-item-title">Wired</p>
                <div class="pannel-row-item-value">
                    <div id="meters-wired" class="pannel-row-item-contained">
                        {{meters["wired"]}}/{{meters["numMeters"]}}
                    </div>
                </div>
            </div>
            <div class="pannel-row-item">
                <p class="pannel-row-item-title">Wireless</p>
                <div class="pannel-row-item-value">
                    <div id="meters-wireless" class="pannel-row-item-contained">
                        {{meters["wireless"]}}/{{meters["numMeters"]}}
                    </div>
                </div>
            </div>
            <div class="pannel-row-item">
                <p class="pannel-row-item-title">Nodes</p>
                <div class="pannel-row-item-value">
                    <div id="meters-nodes" class="pannel-row-item-contained">
                        {{meters["nodes"]}}/{{meters["numMeters"]}}
                    </div>
                </div>
            </div>
            <div class="pannel-row-item">
                <p class="pannel-row-item-title">Han</p>
                <div class="pannel-row-item-value">
                    <div id="meters-han" class="pannel-row-item-contained">
                        {{meters["han"]}}/{{meters["numMeters"]}}
                    </div>
                </div>
            </div>
        </div>

        <div class="meterHeadings" id="showBrowse">
            <h2>Meter List Parameters</h2>
        </div>
        <!-- meterlist parameters -->
        <section class="grid container">
            <!-- test,read all,add wireless,add wired -->
            <div class="grid-two-column">
                <div class="overview-card grid">
                    <button id="verify-meterlist" class="overview-btn">
                        <div id="verify-meterlist-text" class="plus-text">Test unverified meters</div>
                        <div id="verify-meters-icon" class="icon original-minus"></div>
                    </button>
                    <button id="read-meterlist" class="overview-btn">
                        <div id="read-meterlist-text" class="plus-text">Read all meters</div>
                        <div id="read-meters-icon" class="icon original-minus"></div>
                    </button>
                </div>

                <div class="overview-card grid">
                    <button class="overview-btn" onclick="addWireless();">
                        <div class="plus-text">Add wireless meters</div>
                        <div id="add-wireless-icon" class="icon original-minus"></div>
                    </button>
                    <button class="overview-btn" onclick="addWired();">
                        <div class="plus-text">Add wired meters</div>
                        <div id="add-wired-icon" class="icon original-minus"></div>
                    </button>
                </div>
            </div>

            <!-- upload meterlist,download meterlist ,download tmpl,remove meterlist -->
            <section class="grid-two-column">
                <div class="overview-card grid">
                    <button class="overview-btn" onclick="showUploadModal();">
                        <p id="upload-meterlist" class="plus-text">Upload meterlist</p>
                        <div class=" icon original-minus original-color file-upload"></div>
                    </button>
                    <span id="upload-result"></span>

                    <button class="overview-btn" onclick="downloadCsvFile();">
                        <div class="plus-text">Download meterlist</div>
                        <div class="icon original-minus original-color file-download"></div>
                    </button>

                    <button class="overview-btn" onclick="downloadTemplate();">
                        <div class="plus-text">Download meterlist template</div>
                        <div class="icon original-minus original-color download-template"></div>
                    </button>

                    <button class="overview-btn" onclick="removeMeterList();">
                        <div class="plus-text">Remove meterlist</div>
                        <div class="icon original-minus original-color trash-alt"></div>
                    </button>
                </div>
                <!-- upload encryption, download encryption, download template -->
                <div class="overview-card grid">
                    <button class="overview-btn" onclick="uploadEncryptionKeys();">
                        <span class="icon original-minus original-color key"></span>
                        <span id="upload-encryption-keys" class="plus-text">Upload encryption keys</span>
                    </button>

                    <div class="upload-content">
                        <input class="upload-button" id="upload-encryption-key-input" type="file" accept=".csv,.txt"
                            name="upload-encryption-key-file" size="70" />
                        
                    </div>

                    <button class="overview-btn" onclick="downloadEncryptionKeys();">
                        <div class="plus-text">Download encryption keys</div>
                        <div class="icon original-minus original-color file-download"></div>
                    </button>
                    <button class="overview-btn" onclick="downloadEncryptionTemplate();">
                        <div class="plus-text">Download encryption keys template</div>
                        <div class="icon original-minus original-color download-template"></div>
                    </button>
                </div>
            </section>

            <section class="grid">
                <section class="overview-card">

                    <!-- auto create myconfig -->
                    <div class="grid-two-column" style="align-items: center;">
                        <button onclick="autoCreateMyConfig();" class="overview-btn">
                            <div class="plus-text">Auto-Create myconfig files</div>
                            <div id="auto-create-icon" class="icon original-minus original-color play-circle"></div>
                        </button>
                        <!-- telegram readout count -->
                        <div class="">
                            <label for="number_of_telegrams" class="plus-text">Number of maximum telegrams:</label>
                            <select id="number_of_telegrams">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option selected value="3">3</option>
                                <option value="4">4</option>
                            </select>
                        </div>
                    </div>
                </section>
                <section class="grid-two-column overview-card" style="align-items: center;">
                    <!-- create meterlist pdf -->
                    <button id="btPrint" class="overview-btn" onclick="createPDF();">
                        <div class="plus-text">Create PDF</div>
                        <div id="pdf-icon" class="icon original-minus"></div>
                    </button>
                    <!-- view config -->
                    <div class="">
                        <div class="plus-text">Show configuration file:</div>
                        <div>
                            <select name="show-config-file" id="show-config-file">
                                <option value="myconfig.csv">myconfig.csv</option>
                                <option value="masterport_Mbus2Modbus.csv">masterport_Mbus2Modbus.csv</option>
                                <option value="slaveport_Mbus2Modbus.csv">slaveport_Mbus2Modbus.csv</option>
                            </select>
                            <button class="save-edit-button" id="show-config-file-button" onclick="showCsvFile();">Show config
                                file</button>
                        </div>
                </div>
                </section>

            </div>
        </div>


        <div id="upload-encryption-key-div"></div>
        <div id="upload-encryption-keys-errorlist"></div>

        <div id="duplicate-info-div"></div>
        <form name="templateItem" action="/show_browse_result" method="post" enctype="multipart/form-data">
                
                <div class="meterHeadings" id="showBrowse">
                    <h2>Meters</h2>
                </div>
                <section class="flow">
                    <div class="search-input" id="searchInput">
                        <div class="search-container">
                            <input class="meter-search-input" autocomplete="off" placeholder="Search meters..." id="mfct-str-input"
                            name="mfct_str" type="text" onkeyup="matchInput('mfct-str-input');"
                            onpaste="matchInput('mfct-str-input');" />
                        </div>
                        <!-- add internal meter -->
                        <div class="plus-container" onclick="addInternalMeter();">
                            <div class="plus-text">Add internal Meter</div>
                            <div id="add-internal-meter-icon" class="icon original-minus original-color plus-square"></div>
                        </div>
                        <div class="plus-container" onclick="commitMeterlist();">
                            <div class="plus-text">Remove selected meters</div>
                            <div class="icon original-plus original-color minus-square"></div>
                        </div>
                        <div class="plus-container" onclick="editMeter(0, 'true')">
                        <div class="plus-text">Add single meter</div>
                        <div id="add-single-meter-icon" class="icon original-plus"></div>
                    </div>

                </div>
                <div class="search-container" id="loaderDiv">
                    <div class="loader" id="list-loader"></div>
                    <h2 class="search-progress" id="search-progress">Loading Meterlist...</h2>
                </div>
            </section>
            <div id="min-height-div">
                <div id="tab">
                    <table class="pdf-table" id="showBrowse">
                    <tr>
                        <th>#</th>
                        <th class="cb" onclick="sortThis('type');">MeterType</th>
                        <th class="cb" onclick="sortThis('id');">Ident. nr</th>
                        <th class="cb" onclick="sortThis('med');">Medium</th>
                        <th class="cb" onclick="sortThis('mfct');">Manufacturer</th>
                        <th class="cb" onclick="sortThis('fab');">Fab. Num</th>
                        <th class="cb" onclick="sortThis('prim');">Prim. Add</th>
                        <th class="cb" onclick="sortThis('status');">Verified</th>
                        <th class="cb" onclick="sortThis('timestamp');">Verified at</th>
                        <th class="cb" onclick="sortThis('description');">Description</th>
                        <th class="not_pdf">wl.key</th>
                        <th class="not_pdf">Edit</th>
                        <th class="not_pdf">Remove</th>
                    </tr>
                    <tbody id="meterDiv">

                    </tbody>
                    </table>
                </div> 
            </div>
        </form>

        <br>
        <br>

        <div class="modal" id="edit-modal">
            <div id="modal-content" class="modal-content">
                <span id="modal-close" class="modal-close">&times;</span>
                <p class="edit-meter-header">Meter Parameters</p>
            </div>
        </div>

        <div id="upload-meterlist-modal" class="modal">
            <div class="modal-content">
                <span class="modal-close" onclick="closeUploadModal()">&#120;</span>
                <div>
                    <p>Upload your meterlist.</p>
                    <div style="padding-block: .5rem;">
                        <label for="csvDelimiterSelect">Separator</label>
                        <select name="csvDelimiterSelect" id="csvDelimiterSelect">
                            <option selected value=",">&comma;</option>
                            <option value=";">&semi;</option>
                        </select>
                    </div>
                    <div style="padding-block: .5rem;">
                        <label for="csvEncodingSelect">Encoding</label>
                        <select name="csvEncodingSelect" id="csvEncodingSelect">
                            <option selected value="latin-1">Latin 1 (ISO-8859-1)</option>
                            <option value="utf-8">UTF-8</option>
                        </select>
                    </div>
                </div>
                <input class="upload-button" id="meterlistfile" type="file" accept=".csv,.txt" name="meterlistfile" size="70" />
                <button class="" onclick="uploadMeterList()">Upload</button>
            </div>
        </div>
    </div>
</div>



{% endblock content %}

{% block scripts %}
<script src="js/overview.js"></script>
{% endblock scripts %}