{% extends 'layout.html' %}

{% macro atoms() %}
{% if d.numbers|length %}
<div class="row">
    <center>
        <div id="appdiv"></div>
    {% if open_ase_gui %}
        <img src="/image/{{ d.id }}.png?project={{ project }}">
    {% endif %}
    </center>
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-4">
        {% if open_ase_gui %}
        <a class="btn" href="/gui/{{ d.id }}?project={{ project }}">
        Open ASE's GUI</a>
        {% endif %}
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-link dropdown-toggle btn-sm" data-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 class="btn-group pull-right">
            <button type="button" class="btn btn-link dropdown-toggle btn-sm" data-toggle="dropdown">
                Download <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="/xyz/{{ d.id }}?project={{ project }}">xyz</a></li>
                <li><a href="/sqlite/{{ d.id }}?project={{ project }}">db</a></li>
                <li><a href="/json/{{ d.id }}?project={{ project }}">json</a></li>
            </ul>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>
</div>
{% endif %}
{% endmacro %}

{% macro forces() %}
{% if s.forces %}
<h4>Relaxtion forces in eV/Å</h4>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>symbol</th>
<th>x</th>
<th>y</th>
<th>z</th>
</tr>
</thead>
<tbody>
                {% for f in s.forces %}
<tr>
<td>{{ f[0] }}</td>
<td>{{ f[1] }}</td>
<td>{{ f[2] }}</td>
<td>{{ f[3] }}</td>
<td>{{ f[4] }}</td>
</tr>
                {% endfor %}
</tbody>
</table>
{% endif %}
{% 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 s.cell %}
<tr>
<td>{{ loop.index }}</td>
                {% for a in axis %} <td>{{ a }}</td>{% endfor %}
<td>{{ d.pbc[loop.index0] }}</td>
</tr>
            {% endfor %}
</tbody>
</table>
<table class="table table-striped">
<tbody>
<tr><td>Lengths:</td>{% for L in s.lengths %} <td>{{ L }}</td>{% endfor %}</tr>
<tr><td>Angles:</td>{% for a in s.angles %} <td>{{ a }}</td>{% endfor %}</tr>
</tbody>
</table>
{% endmacro %}

{% macro table(thing) %}
{% set subtitle, rows = thing %}
<table class="table table-striped">
<colgroup>
<col class="col-xs-7">
<col class="col-xs-3">
<col class="col-xs-2">
</colgroup>
<thead>
<tr>
<th>{{ subtitle }}</th>
<th class="text-center">Value</th>
<th class="text-center">Unit</th>
</tr>
</thead>
<tbody>
            {% for key, value, unit in rows %}
<tr>
<td> {{ key|safe }} </td>
<td class="text-center"> {{ value|safe }} </td>
<td class="text-center"> {{ unit|safe }} </td>
</tr>
            {% endfor %}
</tbody>
</table>
{% endmacro %}

{% block title %}
{{proj}} - Summary
{% endblock %}

{% set d = s.row %}

{% block head %}
{% if not open_ase_gui %}
<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 /cif/{{ d.id }}.cif?project={{ project }} { {{ n1 }} {{ n2 }} {{ n3 }} };");
    }
</script>

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

{% block content %}

<div class="container">

<h1>
{{ s.formula|safe }}
</h1>

<div class="panel-group">

{% for title, things in s.layout %}

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a class="btn-block" data-toggle="collapse" href="#collapse{{ loop.index0 }}">
        {{ title }}
        </a>
        </h4>
    </div>

    <div id="collapse{{ loop.index0 }}" class="panel-collapse collapse {% if loop.index0 == 0 %}in{% endif %}">
        <div class="panel-body">
    {% for column in things %}
        <div class="col-md-6">
    {% for thing in column %}
            <div class="row">
        {% if thing == 'ATOMS' %}
            {{ atoms() }}
        {% elif thing == 'FORCES' %}
            {{ forces() }}
        {% elif thing == 'CELL' %}
            {{ cell() }}
        {% elif thing is none %}
        {% elif thing|length == 2 %}
            {{ table(thing) }}
        {% else %}
                    <img
                    src="/plot/{{ d.id }}-{{ thing }}?project={{ project }}" width="100%">
        {% endif %}
                </div> <!--END ROW-->
    {% endfor %}
            </div> <!--END col-md-6-->
    {% endfor %}
        </div> <!--END PANEL BODY-->
    </div> <!--END COLLAPSE-->
</div> <!--END PANEL-->
{% endfor %}
</div> <!--END PANEL GROUP-->
</div>
{% endblock content %}

