{% extends "core/site-base.html" %}

{% block tabtitle %}
Simmate
{% endblock %}

{% block banner %}
{% include "core/header.html"%}
{% endblock %}


{% block body %}

<!-- NOTE: for this section to work, be sure to read datatable.html -->


<div class="container p-4 bg-light border" id="search-results">

    <!-- Breadcrumb links -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'local_calculations' %}">Workflows</a></li>
            <li class="breadcrumb-item"><a href="{% url 'relaxations' %}">Relaxations</a></li>
            <li class="breadcrumb-item"><a href="{% url 'mit_about' %}">MIT-Project Quality</a></li>
            <li class="breadcrumb-item active">Results</li>
        </ol>
    </nav>


    <!-- List of calculations for data table -->
    <div class="container p-4">
        {% if calculations %}
        {% load chemical_formula_filter %}

        <div class="alert alert-success d-flex align-items-center p-2" role="alert">
            <i class="bi bi-check-circle-fill fs-4"></i>
            <div class="p-3">
                This table includes <b>{{ calculations | length }}</b> out of
                <b>{{ ncalculations_possible }}</b> calculations that match your search criteria.
                <br>
                <i><small>
                        Search results are limited to the 50 most recent calculations.
                        In cases where >50 calculations exist, please either
                        refine your search criteria or use the Simmate's python client to access
                        all calculations (see our <a href="#">Github page</a> for more info).
                    </small></i>
            </div>
        </div>

        <table id="SearchResultsTable" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>Prefect ID</th>
                    <th>Simmate ID</th>
                    <th>Final Energy (eV/atom)</th>
                    <th>Reduced Formula</th>
                    <th>Number of Sites</th>
                    <th>Spacegroup</th>
                    <th>Density (g/mL)</th>
                    <th>Molar Volume (mL/mol)</th>
                </tr>
            </thead>
            <tbody>
                {% for calculation in calculations %}
                <tr>
                    <td><a href="{{ calculation.prefect_cloud_link }}" target="_blank">{{
                            calculation.prefect_flow_run_name }}</a></td>
                    <td><a href="results/{{ calculation.id }}">mitrelax-{{ calculation.id }}</a></td>
                    <td>{{ calculation.structure_final.energy_per_atom | floatformat:3 }}</td>
                    <td>{{ calculation.structure_start.formula_reduced | chemical_formula }}</td>
                    <td>{{ calculation.structure_start.nsites }}</td>
                    <td>{{ calculation.structure_start.spacegroup.number }}</td>
                    <td>{{ calculation.structure_start.density | floatformat:3 }}</td>
                    <td>{{ calculation.structure_start.molar_volume | floatformat:3 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="alert alert-danger d-flex align-items-center p-2" role="alert">
            <i class="bi bi-exclamation-triangle-fill fs-4"></i>
            <div class="p-3">
                <b>No calculations found matching your search criteria!</b>
                <br><br>
                <i><small>
                        Make sure you don't have a typo in your search. If you are searching
                        for "Li-Co-O", common typos include searching "LiCoO" (missing hyphens),
                        "Li-Co-O-" (extra hyphen), or "li-co-o" (lowercase). We are working
                        to account for these common mistakes, but you'll have to fix these until then!
                        <br><br>
                        It is also possible that there just aren't any results for your search.
                        In cases such as this, please reach out to our team and we can start
                        exploring the system(s) you're interested in!
                    </small></i>
            </div>
        </div>
        {% endif %}
    </div>

</div>


{% endblock %}

{% block extrafooter %}
{% include "core/datatable.html" %}
{% endblock %}