{% extends 'main_header.html' %}
{% block body %}

    {%- for tree_name, tree_obj in details.items() %}
        <div class="grid-container">
            <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>
        <div class="grid-container spacer">
            <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 -%}

{% import 'block_context_menu.html' as context_menu %}
{{ context_menu.job_menu() }}

<script type="text/javascript">
    var mx_trees = {{ details|jsonify|safe }};
</script>
<script type="text/javascript" src="{{ url_for('static', file='js/tiles.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', file='js/mx_page.js') }}"></script>

{% endblock %}