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

{% macro atoms() %}
<div id="appdiv"></div>
<div class="row align-items-center">
  <div class="col-6">
    <a class="btn btn-primary btn-sm" href="/gui/{{ row.id }}">Open ASE's GUI</a>
  </div>
  <div class="col-3 px-1">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-primary dropdown-toggle btn-sm"
              data-bs-toggle="dropdown">
        Unit cell <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a onclick="repeatCell(1, 1, 1);">1x1x1</a></li>
        <li><a onclick="repeatCell({{ n1 }}, {{ n2 }}, {{ n3 }});">
            {{ n1 }}x{{ n2 }}x{{ n3 }}</a></li>
      </ul>
    </div>
  </div>
  <div class="col-3">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-primary dropdown-toggle btn-sm"
              data-bs-toggle="dropdown">
        Download <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="/atoms/{{ project.name }}/{{ row.id }}/xyz">xyz</a></li>
        <li><a href="/atoms/{{ project.name }}/{{ row.id }}/json">json</a></li>
      </ul>
    </div>
  </div>
</div>
{% endmacro %}

{% macro cell() %}
<table class="table table-striped">
  <thead>
    <tr>
      <th>Axis</th>
      <th>x</th>
      <th>y</th>
      <th>z</th>
      <th>Periodic</th>
    </tr>
  </thead>
  <tbody>
  {% for axis in dct.cell %}
    <tr>
      <td>{{ loop.index }}</td>
      {% for a in axis %} <td>{{ a }}</td>{% endfor %}
      <td>{{ row.pbc[loop.index0] }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
<table class="table table-striped">
  <tbody>
    <tr>
      <td>Lengths:</td>
      {% for L in dct.lengths %}<td>{{ L }}</td>{% endfor %}
    </tr>
    <tr>
      <td>Angles:</td>
      {% for a in dct.angles %}<td>{{ a }}</td>{% endfor %}
    </tr>
  </tbody>
</table>
{% endmacro %}


{% block title %}
Summary
{% endblock %}

{% set n1, n2, n3 = dct.size %}

{% block head %}
<script src="{{ url_for('static', filename='jsmol/JSmol.min.js') }}"></script>

<script>
jmol_isReady = function(applet)
{
    Jmol._getElement(applet, "appletdiv").style.border="1px solid lightgray";
    Jmol.script(jmolApplet0, "set displaycellparameters false;")
    Jmol.script(jmolApplet0,
    "load /atoms/{{ project.name }}/{{ row.id }}/cif { {{ n1 }} {{ n2 }} {{ n3 }} };");
    }
</script>

<script src="{{ url_for('static', filename='row.js') }}"></script>
{% endblock %}

{% block navbar %}
<li>
  <a href="/{{ project.name }}/">Back to search page</a>
</li>
{% endblock %}

{% block content %}

<div class="container-fluid">
  <h1>{{ dct.formula|safe }}</h1>

  <h4 class="card-title">Structure</h4>
  <div class="card">
    <div class="col-md-6 p-2">
      {{ atoms() }}
      <div class="col">{{ cell() }}</div>
    </div> <!--END col-md-6-->
  </div> <!--END CARD-->

  <div class="col-9">
    <h4 class="card-title mt-2">Keys and values</h4>
    <div class="card">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Key</th>
            <th>Description</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
        {% for key, desc, val in dct.table %}
          <tr>
            <td> {{ key }} </td>
            <td> {{ desc }} </td>
            <td> {{ val|safe }} </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div> <!--END Col-9-->
  </div>
</div>
{% endblock content %}
