{% extends 'ase/db/templates/layout.html' %}

{% block title %}
Browse ASE Database
{% endblock %}

{% block head %}
<script src="{{ url_for('static', filename='search.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded',
                          function() {
                              update_table({{ session_id }}, 'query', '0');
                              },
                          false);
</script>
{% endblock %}

{% block content %}

<div class="container">
  {% block contenttitle %}
  <div class="row">
    <h1>{{project.title}}</h1>
  </div>
  {% endblock %}

  <div class="card text-bg-light shadow-sm mt-2">
    <form id="mainFormID" class="navbar-form navbar-default mt-2"
          role="search"
          action="javascript:update_table({{ session_id }}, 'query', '0')">
      <div class="form-group d-flex align-items-center col-auto" style="margin-top:5px;">
        <input type="text" name="query" id="formula-result"
               class="form-control mx-2 ase-input"
               value="{{ q }}"
               placeholder="Search formula e.g. MoS2" size="60">
        <button type="submit" class="btn btn-secondary mx-2">
          Search
        </button>
      </div><br/>
      {% block search %}
      {% endblock search %}
      <div class="form-group col-auto mx-2 col-form-label" style="margin-bottom:10px;">
        <small class="form-text">
          <a href="https://ase-lib.org/ase/db/db.html#querying"
             target="_blank">
            Help with constructing advanced search queries ...
          </a>
        </small>
      </div><br/>

      {# Flash query messages #}
      {% with messages = get_flashed_messages() %}
        {% if messages %}
          <ul class="list-group">
          {% for message in messages %}
            <li class="list-group-item list-group-item-warning">{{ message }}
            </li>
          {% endfor %}
          </ul>
        {% endif %}
      {% endwith %}

      <small class="form-text mx-2 mb-2">
      <a data-bs-toggle="collapse" role="button" href="#collapse1" aria-controls="collapse1">Toggle list of keys ...</a>
      </small><br/>
      <div id="collapse1" class="collapse">
        <table class="table table-striped">
        {% for key, keydesc in project.key_descriptions|dictsort %}
          <tr><td>{{ key }}</td><td>{{ keydesc.longdesc }}</td><td>{{ keydesc.unit|safe }}</td></tr>
        {% endfor %}
        </table>
      </div>
    </form>
  </div>

  <div id="database1"></div>

</div> <!-- class="container" -->

{% endblock content %}
