{% extends 'main_header.html' %}
{% block body %}
    <div class="page-title-bar">
        {% import 'block_enable_auto_refresh.html' as block_enable_refresh %}
        {{ block_enable_refresh.enable_auto_refresh() }}
    </div>

    <div class="grid-container">
        {# active_mx_page is declared in the main_header.html #}
        {% set mx_trees = details._mx_page_trees(active_mx_page[0]) %}

        {%- for tree_name, tree_obj in mx_trees.items() %}
            {% set grid_cols = tree_obj.sorted_process_names|length %}
            <div class="grid-row grid-row-{{ tree_name }} grid-columns-{{ grid_cols + 1 }}">
                <div id="grid-header-{{ tree_name }}" class="grid-header"></div>
                {% for process_name in tree_obj.sorted_process_names %}
                    <div id="grid-header-{{ process_name }}" class="grid-header"></div>
                {%- endfor %}

                <div id="grid-info-{{ tree_name }}" class="grid-info"></div>
                {% for process_name in tree_obj.sorted_process_names %}
                    <div id="grid-info-{{ process_name }}" class="grid-info context-menu"></div>
                {%- endfor %}
            </div>
        {% endfor -%}
    </div>
    {% import 'block_context_menu.html' as context_menu %}
    {{ context_menu.job_menu() }}

    <script type="text/javascript" src="{{ url_for('scheduler/static', file='js/tiles.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('scheduler/static', file='js/mx_page.js') }}"></script>

    <script>
        $(document).ready(function () {
            let grids = $('.grid-row');
            // set the height of each grid-row to the height of 5 tiles
            grids.each(function () {
                // get height of first column
                let divHeight = $(this).children('.grid-info')[0].children[0].clientHeight;
                // get height of header
                let headerRowHeight = $(this).children('.grid-header')[0].clientHeight;
                let totalHeight = divHeight * 3.5 + headerRowHeight;
                $(this).height(totalHeight);
                $(this).css(`height: ${totalHeight}`);
            })
        })
    </script>

{% endblock %}