{% load auth_extras %}

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

<p>
   {{ data.description }}
</p>
<div class="row">
    <div id="queryBuilder" class="col-sm-8">
        <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 class="{% if BOOTSTRAP_VERSION|first == "4" %}ml-4{% elif BOOTSTRAP_VERSION|first == "5"  %}ms-4{% endif %}">
            <button type="button" class="btn btn-danger" onclick="clearCriteria()">
                <i class="fas fa-eraser"></i> Clear
            </button>
            {% if user|has_perm:'core_explore_example_app.save_query' %}
            <button type="button" class="btn btn-secondary" onclick="saveQuery()">
                <i class="fas fa-save"></i> Save Query
            </button>
            {% endif %}
            <button type="button" class="btn btn-primary" onclick="submit_query()">
                <i class="fas fa-search"></i> Submit Query
            </button>
        </form>
    </div>
    <div class="col-sm-4">
        {% 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="w-25 p-3 action-min-width"><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 }}')">
                            <i class="fas fa-trash"></i>  Delete
                        </span>
                        {% endif %}
                        <span class="btn btn-primary add-query"
                              onclick="addSavedQueryToForm('query{{ query.id }}')">
                            <i class="fas fa-arrow-circle-up"></i> 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()">
            <i class="fas fa-trash"></i> Delete All
        </button>
        {% endif %}
    </form>
</div>
{% endif %}


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