{% extends "base_nav.html" %}

{% block title %}{{ block.super }} : Define{% endblock %}

{% block styles %}
    {{ block.super }}
    <link rel="stylesheet" href="{{ CILANTRO_CSS_URL }}aristo/jquery-ui.css">
    <link rel="stylesheet" href="{{ CILANTRO_CSS_URL }}define.css">
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script>require(['cilantro/pages/define/main']);</script>
{% endblock %}

{% block content %}

    <div id="left-pane" class="container">

        <div id="report-name" class="title"></div>

        <div class="content">

            {% spaceless %}
            <div id="tabs">
                <input id="concept-search" type="text" name="q" autocomplete="off" placeholder="Search...">
                <div id="domains"></div>
            </div>
 
            <div id="subdomains" class="tabs"></div>
            {% endspaceless %}
        
            <div id="center-pane" class="clearfix">
                {# The "option-detail" panel displays information about a particular query option and the means #}
                {# to interact with it.  #}
                <section id="plugin-panel">

                    {# This toolbar will contain the dynamically generated tabs based on a query option's #}
                    {# initial response from the server. Tabs are context-specific and do not have cross #}
                    {# query option interaction. #}
                    <div id="plugin-tabs" class="toolbar header tabs hidden"></div>

                    <div class="content">                
                        {# Content associated with a particular "view" (one-to-one with a tab). This is considered #}
                        {# dynamic content because it changes within the context of a query option. #}
                        <div id="plugin-dynamic-content"></div>
                
                        {# Content associated with a query option, independent of the tabs and there content. This is #}
                        {# considered static content because it persists during the lifetime of the query option #}
                        {# context. #}
                        <div id="plugin-static-content"></div>
                
                    </div>
                </section>
                
                <section id="criteria-wrap">
                    <div id="criteria">
                        <em id="no-results"></em>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <div id="right-pane" class="clearfix">

        <div id="condition-list-pane" class="container">

            <div class="title">
                <button id="clear-conditions">Clear</button>
                <span>Conditions</span>
            </div>

            <div class="content">
                <div id="no-conditions" class="message warning">You have not defined any conditions</div>
                <div id="condition-list"></div>
                <div class="controls">
                    <button id="get-report">Get Report</button>
                </div>
            </div>
        </div>

    </div>

{% endblock %}

{% block extra_markup %}
    {{ block.super }}
    <div id="concept-description" class="popover right">
        <div class="arrow"></div>
        <div class="inner">
            <h4 class="title"></h4>
            <div class="content"></div>
        </div>
    </div>

    <div id="concept-search-results" class="popover below">
        <div class="arrow"></div>
        <div class="inner">
            <h4 class="title">Query Concept Search</h4>
            <div class="content"></div>
        </div>
    </div>
{% endblock %}

