{% extends "engineering-tools-container.html" %}

{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $('.variable-btn').on('click', function (e) {
                e.preventDefault();

                let variable_id = $(this).data('variable-id');

                $('.variable-block').hide();
                $('#variable-' + variable_id).show();

                $('#variable-header-tabs li').removeClass('active');
                $(this).closest('li').addClass('active');

                window.location.hash = 'variable-' + variable_id;
            });

            let hash = window.location.hash;
            if (hash) {
                let variable_id = hash.replace('#variable-', '');
                let variable_btn = $('.variable-btn[data-variable-id="' + variable_id + '"]');

                if (!variable_btn.length) {
                    variable_btn = $('.variable-btn[data-variable-id="1"]');
                }

                if (variable_btn.length) {
                    variable_btn.trigger('click');
                }
            }
        });
    </script>

    <style>
        pre {
            background-color: #f8f8f8;
            padding: 15px;
            border: 1px solid #ccc;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        .meta-table td {
            padding: 4px 10px 4px 0;
            vertical-align: top;
        }

        .no-variables {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60vh;
        }
    </style>
{% endblock %}

{% block sub-content %}

{% if variables %}
    <ul id="variable-header-tabs" class="nav nav-tabs">
        {% for variable in variables %}
            <li {% if variable.id == 1 %}class="active"{% endif %}>
                <a class="variable-btn" data-variable-id="{{ variable.id }}">
                    {{ variable.custom_name }}
                </a>
            </li>
        {% endfor %}
    </ul>
{% else %}
    <div class="no-variables">
        <h1>No Logged Variables</h1>
    </div>
{% endif %}

{% for variable in variables %}
    <div class="variable-block" id="variable-{{ variable.id }}" {% if variable.id != 1 %}style="display:none;"{% endif %}>
        <h2>
            {{ variable.custom_name }}
        </h2>

        <p><strong>Logged At:</strong> {{ variable.time_logged|date:"Y-m-d H:i:s A" }}</p>

        <h3>Metadata</h3>
        <table class="meta-table">
            <tr><td><strong>Type:</strong></td><td>{{ variable.type }}</td></tr>
            <tr><td><strong>Module:</strong></td><td>{{ variable.module }}</td></tr>
            <tr><td><strong>Object ID:</strong></td><td>{{ variable.object_id }}</td></tr>
            <tr><td><strong>Length:</strong></td><td>{{ variable.length }}</td></tr>
            <tr><td><strong>Size (bytes):</strong></td><td>{{ variable.size_bytes }}</td></tr>
            <tr><td><strong>Is None:</strong></td><td>{{ variable.is_none }}</td></tr>
        </table>

        {% if variable.attributes %}
            <h3>
                Attributes
            </h3>
            <pre id="attr-pre-{{ variable.id }}">{{ variable.attributes|join:", " }}</pre>
        {% endif %}

        <h3>
            Value
        </h3>
        <pre id="value-pre-{{ variable.id }}">{{ variable.value }}</pre>
    </div>
{% endfor %}

{% endblock %}