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

{% block head %}
{{ block.super }}
<script>
    $(function () {
        let active_tables = [];

        $('.interface-checkbox:checked').each(function () {
            let iface = $(this).data('interface');
            active_tables.push(iface);
            $('#mapping-table-' + iface).show();
        });

        $('.interface-checkbox').on('change', function () {
            let iface = $(this).data('interface');
            let table_id = '#mapping-table-' + iface;

            if ($(this).is(':checked')) {
                if (!active_tables.includes(iface)) {
                    if (active_tables.length === 3) {
                        let removed = active_tables.pop();
                        $('#mapping-table-' + removed).hide();
                        $('.interface-checkbox[data-interface="' + removed + '"]').prop('checked', false);
                    }
                    active_tables.push(iface);
                    $(table_id).show();
                }
            } else {
                active_tables = active_tables.filter(function (item) {
                    return item !== iface;
                });
                $(table_id).hide();
            }
        });
    });
</script>

<style>
    #data-tools-header-tabs {
        margin-bottom: 0;
    }

    .container-fluid {
        padding-right: 0;
    }

    #data-tools-wrapper {
        display: flex;
        width: 100%;
    }

    #tables-container {
        width: 84%;
        display: flex;
        gap: 12px;
    }

    .mapping-table {
        flex: 1;
        display: none;
    }

    .mapping-header {
        margin: 0;
        text-align: center;
        height: 48px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #checkbox-container {
        width: 16%;
        overflow-y: auto;
        padding-left: 16px;
    }

    .sidebar-header {
        position: sticky;
        top: 0;
        background-color: #0096c3;
        color: #fff;
        font-weight: 600;
        padding: 6px 8px;
        text-align: left;
        z-index: 2;
    }

    .sidebar-list {
        background-color: #f9f9f9;
        padding: 8px;
    }

    .sidebar-list div {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 4px;
    }

    #checkbox-container input[type='checkbox'] {
        margin: 0;
        cursor: pointer;
    }

    #checkbox-container label {
        font-size: 12px;
        line-height: 1.2;
        cursor: pointer;
        word-break: break-word;
    }

    #checkbox-container input[type='checkbox']:checked + span {
        font-weight: 600;
        color: #0b6fa4;
    }
</style>
{% endblock %}

{% block sub-content %}
<div id="data-tools-wrapper">
    <div id="tables-container">
        {% regroup data_tag_mapping by parser_type__tag as grouped_mappings %}

        {% for iface in interface_types %}
            {% for group in grouped_mappings %}
                {% if group.grouper == iface.parser_type__tag %}
                    <div id="mapping-table-{{ iface.tag }}" class="mapping-table" style="display:none;">

                        <table class="table table-bordered table-striped">
                            <thead style="position: sticky; top: 0;">
                                <tr class="dosis-report-header">
                                    <th colspan="2">
                                        <h3 class="mapping-header">
                                            {{ iface.tag }} ({{ iface.parser_type__tag }})
                                        </h3>
                                    </th>
                                </tr>
                                <tr class="dosis-report-header">
                                    <th>Mapping</th>
                                    <th>Data Tag</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in group.list %}
                                    {% if row.mapping != row.tag__tag %}
                                    <tr>
                                        <td>{{ row.mapping }}</td>
                                        <td>{{ row.tag__tag }}</td>
                                    </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>

                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>

    <div id="checkbox-container">
        <div class="sidebar-header">Interfaces</div>
        <div class="sidebar-list">
            {% for iface in interface_types %}
                <div>
                    <label style="display:flex;align-items:center;gap:6px;">
                        <input type="checkbox" class="interface-checkbox" data-interface="{{ iface.tag }}" {% if iface.tag in active_interfaces %}checked{% endif %}>
                        <span >
                            {{ iface.tag }}
                        </span>
                    </label>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}