{% extends "emmaa_page_template.html" %}
{% from "path_macros.html" import path_card %}

{% block additional_scripts %}
  <script src="{{ url_for('static', filename='queryFunctions.js') }}"></script>
  <script>
    $(document).ready(function() {
      let modelSelect = new Choices('#model-select');
    })
    $(document).ready(function() {
      let modelSelect = new Choices('#dynamic-select');
    })
  </script>
{% endblock %}

{% block body %}
<style>
  label {
    margin-bottom: 0;
  }
</style>
<div class="container nav-container">
  <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      {% if tab == 'static' %}
      <a class="nav-item nav-link active" id="nav-static-tab" data-toggle="tab" href="#nav-static" role="tab" aria-controls="nav-static" aria-selected="true">Static</a>
      <a class="nav-item nav-link" id="nav-dynamic-tab" data-toggle="tab" href="#nav-dynamic" role="tab" aria-controls="nav-dynamic" aria-selected="false">Dynamic</a>
      {% else %}
      <a class="nav-item nav-link" id="nav-static-tab" data-toggle="tab" href="#nav-static" role="tab" aria-controls="nav-static" aria-selected="false">Static</a>
      <a class="nav-item nav-link active" id="nav-dynamic-tab" data-toggle="tab" href="#nav-dynamic" role="tab" aria-controls="nav-dynamic" aria-selected="true">Dynamic</a>
      {% endif %}     
    </div>
  </nav>
</div>
<div class="tab-content" id="nav-tabContent">
  {% if tab == 'static' %}
  <div class="tab-pane fade show active" id="nav-static" role="tabpanel" aria-labelledby="nav-static-tab">
  {% else %}
  <div class="tab-pane" id="nav-static" role="tabpanel" aria-labelledby="nav-static-tab">
  {% endif %}
    <!-- Static Queries -->
    <div class="container" id="query-container">
      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Model Queries</h4>
        </div>
        <div class="card-body">

          <!-- model selection -->
          <h6><b>Model selection</b></h6>
          <div class="checkbox-container">
            <div class="form-select">
              <select name="model-select" id="model-select" placeholder="Select models" multiple>
              {% for model_id, config_json in model_data %}
                <option value="{{ model_id }}">{{ config_json.human_readable_name }}</option>
              {% endfor %}
              </select>
            </div>
          </div>
          <!-- stmt type select -->
          <h6 style="padding-top: 20px;"><b>Query selection</b></h6>
          <div class="form-container" style="display: inline-block; vertical-align: top;">
            <div class="text" style="display: table;">
              <form onsubmit="postQuery(document.getElementById('query-container')); return false;">
                <div class="row" style="align-items: center">
                  <div class="dropdown col" style="display: table-cell; padding-right: 2px">
                    <!-- WARNING: The id of the select tag goes into the query dictionary, do NOT change it unless it is
                      changed in the rest API and query handling -->
                    <select class="custom-select" id="typeSelection">
                      <option value="" selected="selected" disabled="disabled" hidden="hidden">select statement type</option>
                      {% for stmt_type in stmt_types %}
                      <option value="{{ stmt_type }}">{{ stmt_type }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <!-- subject -->
                  <div class="col" style="padding-right: 2px">
                    <input class="form-control" id="subjectInput" type="text" name="subjectText" placeholder="Enter subject">
                  </div>
                  <!-- object -->
                  <div class="col" style="padding-left: 2px; padding-right: 2px">
                    <input class="form-control" id="objectInput" type="text" name="objectText" placeholder="Enter object">
                  </div>
                  <!-- register -->
                  <div class="register-container col" style="padding-left: 2px; padding-right: 1px">
                    <div class="checkbox">
                      <input type="checkbox" name="register" id="register-query"><label
                        for="register-query">Subscribe To Query</label>
                    </div>
                  </div>
                </div>
                <!-- indra docs text -->
                <div class="text-container row">
                  <i class="col">To read more about statement types, read the <a
                      href="https://indra.readthedocs.io/en/latest/modules/statements.html" target="_blank">INDRA documentation</a>.</i>
                </div>
                <!-- formsubmit -->
                <div class="row">
                  <div class="container">
                    <input class="btn" style="margin-top: 10px" type="submit" text="Submit query" name="query-submit" id="query-submit">
                  </div>
                </div>
              </form>
            </div>
          </div>

          <div class="container">
            <div class="container">
              <div id="query-status-gif" style="display: none;">
                <img src="https://indralab.github.io/emmaa/emmaa_service/dashboard/images/ajax-loader.gif">
              </div>
              <span><i id="query-status"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Query results -->
    <div class="container">
      {{ path_card(immediate_query_result, 'Query Results', 'query-results', immediate_table_headers, 'queryResults') }}
    </div>
    <!-- List user queries -->
    <div class="container">
      {{ path_card(subscribed_results, 'Subscribed Queries', 'user-queries', subscribed_headers, 'old-results') }}
    </div>

  </div>
  {% if tab == 'static' %}
  <div class="tab-pane fade" id="nav-dynamic" role="tabpanel" aria-labelledby="nav-dynamic-tab">
  {% else %}
  <div class="tab-pane fade show active" id="nav-dynamic" role="tabpanel" aria-labelledby="nav-dynamic-tab">
  {% endif %}

    <!-- Dynamic queries -->
    <div class="container" id="dynamic-container">

      <div class="card">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Model Queries</h4>
        </div>
        <div class="card-body">

          <!-- model selection -->
          <h6><b>Model selection</b></h6>
          <div class="checkbox-container">
            <div class="form-select">
              <select name="dynamic-select" id="dynamic-select" placeholder="Select model" multiple>
                <option value="marm_model">MARM Model</option>
              </select>
            </div>
          </div>

          <!-- stmt type select -->
          <h6 style="padding-top: 20px;"><b>Query selection</b></h6>
          <div class="form-container" style="display: inline-block; vertical-align: top;">
            <div class="text" style="display: table;">
              <form onsubmit="postQuery(document.getElementById('dynamic-container')); return false;">
                <div class="row" style="align-items: center">
                  <!-- agent -->
                  <div class="col" style="padding-right: 2px">
                    <input class="form-control" id="agentInput" type="text" name="agentText" style="width: 400px;" placeholder="Enter agent description">
                  </div>
                  <div class="dropdown col" style="display: table-cell; padding-right: 2px">
                    <!-- WARNING: The id of the select tag goes into the query dictionary, do NOT change it unless it is
                      changed in the rest API and query handling -->
                    <select onchange="checkPattern()" class="custom-select" style="width: 300px;" id="patternSelection">
                      <option value="" selected="selected" disabled="disabled" hidden="hidden">select pattern type</option>
                      {% for pattern_type in ['always_value', 'no_change', 'eventual_value', 'sometime_value', 'sustained', 'transient'] %}
                      <option value="{{ pattern_type }}">{{ pattern_type }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="dropdown col" style="display: table-cell; padding-right: 2px">
                    <!-- WARNING: The id of the select tag goes into the query dictionary, do NOT change it unless it is
                      changed in the rest API and query handling -->
                    <select class="custom-select" id="valueSelection">
                      <option value="" selected="selected" disabled="disabled" hidden="hidden">select value</option>
                      {% for val in ['high', 'low'] %}
                      <option value="{{ val }}">{{ val }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <!-- register -->
                  <div class="register-container col" style="padding-left: 2px; padding-right: 1px">
                    <div class="checkbox">
                      <input type="checkbox" name="register" id="register-dyn-query"><label
                        for="register-query">Subscribe To Query</label>
                    </div>
                  </div>
                </div>
                <!-- formsubmit -->
                <div class="row">
                  <div class="container">
                    <input class="btn" style="margin-top: 10px" type="submit" text="Submit query" name="dyn-query-submit" id="dyn-query-submit">
                  </div>
                </div>
              </form>
            </div>
          </div>

          <div class="container">
            <div class="container">
              <div id="dyn-query-status-gif" style="display: none;">
                <img src="https://indralab.github.io/emmaa/emmaa_service/dashboard/images/ajax-loader.gif">
              </div>
              <span><i id="dyn-query-status"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      {{ path_card(immediate_dynamic_results, 'Query Results', 'dyn-query-results', dynamic_immediate_headers, 'dynQueryResults') }}
    </div>
    <div class="container">
      {{ path_card(subscribed_dynamic_results, 'Subscribed Queries', 'dyn-user-queries', subscribed_dynamic_headers, 'dyn-old-results') }}
    </div>
  </div>
</div>
{% endblock %}