<!-- ============================= -->
<!--           Main Content        -->
<!-- ============================= -->
<div id="main" class="columnized colscheme-2-1st-narrow">

    {% macro drawLevelSelect(level_index, data, default_selected, project_id) -%}
        <label for="levelTree_{{ level_index }}" id="label_levelTree_{{ level_index }}">Level {{ level_index }}:</label>
        <select id="levelTree_{{ level_index }}" name='levelTree_{{ level_index }}'
                onchange="updateTree('#treeStructure', {{ project_id }});" autocomplete="off">
            {% for entry in data %}
                {% for key in entry %}
                    <option value="{{ key }}" {{ 'selected' if key == default_selected }}>
                        {{ entry[key] }}
                    </option>
                {% endfor %}
            {% endfor %}
        </select>
    {%- endmacro %}

    <!--! === Box: Form controls -->
    <aside class="header-component toolbar can-extend auto-extends">
        <h3>Data Structure</h3>
        <div class="extension">
            <div class="dropdown-pane">
                <ul>
                    <li>
                        <button tabindex='50' type="submit" class="action action-upload"
                                onclick="showDataUploadOverlay({{ project.id }})"
                                title="Import ">Upload
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <section class="data-filter view-column col-1">
        <h4><mark>Filter</mark> Results Metadata</h4>
        <ul id="visibilityFiltersId">
            {% for f in filters %}
                {% if f.selected %}
                    <li id="{{ f.display_name }}" class="active">
                        <a href="#" title="'Disable this filter ...' if f.selected else 'Enable this filter ...'"
                           onclick="changedVisibilityFilter({{ project.id }}, '{{ f.display_name }}')">{{ f.display_name }}</a>
                    </li>
                {% else %}
                    <li id="{{ f.display_name }}">
                        <a href="#" title="'Disable this filter ...' if f.selected else 'Enable this filter ...'"
                           onclick="changedVisibilityFilter({{ project.id }}, '{{ f.display_name }}')">{{ f.display_name }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            <li id="tree-related-li">
                <input id="filterInput" name="filter_input" type="text" value="{{ filterInputValue }}"
                       placeholder="Search text here"/>
                <button type="button" class="action action-small action-confirm"
                        onclick="updateTree('#treeStructure', {{ project.id }});">Filter
                </button>
            </li>
        </ul>
    </section>

    <!--! Column displaying the project's data tree -->
    <section class="data-view view-column col-2">
        <h4><mark>View</mark> TVB Results</h4>
        <input id="hiddenProjectId" type="hidden" value="{{ project.id }}"/>

        <div class="specialviewer">
            <div id="tabTree">
                <ul class="toolbar-inline">
                    <li>
                        {{ drawLevelSelect(1, data, firstLevelSelection, project.id) }}
                    </li>
                    <li>
                        {{ drawLevelSelect(2, data, secondLevelSelection, project.id) }}
                    </li>
                </ul>

                <div id="treeStructure" class="left-cell-structure"></div>
            </div>
        </div>

        <script type="text/javascript" src="{{ deploy_context | safe }}/static/js/projectTree.js?{{ currentVersionJS }}"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                updateTree('#treeStructure', {{ project.id }});
            })
        </script>
    </section>
</div>

