{% extends 'index.html' %}
{% block content %}
<div style="margin-left: 20px;">


    <!-- Secondary Search Result -->
    <div id="showBrowseHead" style="background-color: #eee;">
       <p>Template name: {{data['device']['name']}}   Manufacturer: {{mfctString}} </p>
        <p>Secondary Address: {{data['device']['adress']}}   Meter type: {{theDeviceType}}   Date: {{data['device']['time']}}</p>
        <p>Status: {{data['device']['statusByte']}} {{data['device']['statusText']}}</p>
        <p>Signature: {{data['device']['configWord']}}</p>
    </div>
         <br>
        <br>
        <div id="showBrowse"  style="overflow-x:auto;">
            <table>
            <thead>
                <tr>
                    <td>#</td>
                    <td>Type Of Value</td>
                    <td>
                        Value
                        <span class="flex">
                            <label for="scientific-view-toggle">View scientific values:</label>
                            <input type="checkbox" id="scientific-view-toggle">
                        </span>
                    </td>
                    <td>Datatype</td>
                    <td>Physical Quantity</td>
                </tr>
            </thead>
            <tbody>
                {% for i in range(data['tag']|length) %}
                {% if data['tag'][i]['function'] == "Value during error state" %}
                    <tr style="background-color:rgba(255,148,120,0.2)">
                {% else %}
                    <tr>
                {% endif %}
                    <td>{{data['tag'][i]['record']}}</td>
                    <td>{{data['tag'][i]['function']}}</td>
                    <td>
                        <span class="scientific-value">
                            {{data['tag'][i]['value']}}{{data['tag'][i]['exponent']}}
                        </span>
                        <span class="human-readable-value">
                            {{data['tag'][i]['humanvalue']}}
                        </span>

                    </td>
                    <td>{{data['tag'][i]['datatype']}}</td>
                    <td>{{data['tag'][i]['name']}}</td>
                </tr>
                {% endfor %}
            </tbody>
            </table>
        </div>
        <br>


    <br>
    <button id="showBrowse" onclick="goBack();">Go Back</button>
</div>
{% endblock content %}
<input type="checkbox">

{% block scripts %}
    
<script type="text/javascript">
    
    
    function toggleValueMode (isChecked) {
        const scientificValues = document.getElementsByClassName('scientific-value')
        const readableValues = document.getElementsByClassName('human-readable-value')

        const len = scientificValues.length;
        if (isChecked) {
            for (let i = 0; i < len; ++i) {
                scientificValues[i].style.display = 'contents'
                readableValues[i].style.display = 'none'  
            }
        } else {
            for (let i = 0; i < len; ++i) {
                scientificValues[i].style.display = 'none'
                readableValues[i].style.display = 'contents'  
            }
        }
    }

    toggleValueMode(false) // set scientfic mode to false by default when page loads
    
    document.getElementById('scientific-view-toggle').onchange = e => toggleValueMode(e.target.checked)
    
    function showBrowseCsvFile()
    {
        var val = 'template.csv';
        window.open("/showBrowseCsvFile?FILE="+val);
    }
    function goBack()
    {
        window.history.back();
    }
</script>
{% endblock scripts %}