{% load auth_extras %}

<h2 class="title-page">Perform Search</h2>

<p>
   {{ data.description }}
</p>
<div class="row">
    <div id="queryBuilder">
        <h3 class="title-text">{{ data.title }}</h3>
        {% if data.query_form%}
            {{data.query_form|safe}}
            {%else%}
            <div id="queryForm">
            {% include data.query_builder_interface|safe %}
            </div>
        {% endif %}
        <form>
            <button type="button" class="btn btn-danger" onclick="clearCriteria()">Clear</button>
            {% if user|has_perm:'core_explore_example_app.save_query' %}
            <button type="button" class="btn btn-secondary" onclick="saveQuery()">Save Query</button>
            {%endif%}
            <button type="button" class="btn btn-primary" onclick="submit_query()">Submit Query</button>
        </form>
    </div>
    <div class="pull-right">
        {% include data.data_sources_selector_template %}
    </div>
</div>
{% if user.is_authenticated %}
<hr>
<div id="queries">
    <h3 class="title-text">Saved Queries</h3>
    <div id="queriesTable">
        <table class="table">
            <thead>
                <tr>
                    <th><b>Queries</b></th>
                    <th class="col-md-2"><b>Actions</b></th>
                </tr>
            </thead>
            <tbody>
            {% if data.queries %}
                {% for query in data.queries %}
                <tr>
                    <td>
                        {{ query.displayed_query|safe }}
                    </td>
                    <td>
                        {% if user|has_perm:'core_explore_example_app.delete_query' %}
                        <span class="btn btn-danger delete-query"
                              onclick="deleteQuery('query{{ query.id }}')">Delete</span>
                        {%endif%}
                        <span class="btn btn-primary add-query"
                              onclick="addSavedQueryToForm('query{{ query.id }}')">Add to Query</span>
                    </td>
                </tr>
                {% endfor %}
            {% else %}
                <tr><td colspan='2' class="text-danger">No Saved Queries for now.</td></tr>
            {% endif %}
            </tbody>
        </table>
    </div>
    <form>
        {% if user|has_perm:'core_explore_example_app.delete_query' %}
        <button type="button" class="btn btn-danger" onclick="clearQueries()" >Delete All</button>
        {%endif%}
    </form>
</div>
{% endif %}


<div id="template_id" class="hidden">{{data.template_id}}</div>