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

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

    <!-- List of structures for data table -->
    <div class="container p-4">
        {% if structures == None %}
        <p>Make a search for structures and the results will be shown here!</p>
        {% elif structures %}
        {% load chemical_formula_filter %}

        <div class="alert alert-success" role="alert">
            <h4 class="alert-heading"><i class="dripicons-checkmark me-2"></i>This table includes
                {{ structures | length }} out of {{ nstructures_possible }} structures that
                match your search criteria.</h4>
            <p>Search results are limited to the 50 most stable structures for
                each database.
                In cases where >50 structures are found, please either
                refine your search criteria or use the Simmate's <a
                    href="https://jacksund.github.io/simmate/simmate/database.html">python client</a> to access
                all structures.</p>
        </div>

        <div class="alert alert-warning" role="alert">
            <h4 class="alert-heading"><i class="dripicons-warning me-2"></i>
                Don't compare energies across different databases!
            </h4>
            <p>Each database provider uses different settings for their
                calculations AND they have a different pool of structures.</p>
        </div>

        <table id="SearchResultsTable" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>Source Database</th>
                    <th>Material-ID</th>
                    <th>Reduced Formula</th>
                    <th>Energy Above Hull (meV)</th>
                    <th>Number of Sites</th>
                    <th>Spacegroup</th>
                    <th>Density (g/mL)</th>
                    <th>Molar Volume (mL/mol)</th>
                </tr>
            </thead>
            <tbody>
                {% for structure in structures %}
                <tr>
                    <td>{{ structure.source }}</td>
                    <td><a href="{{ structure.external_link }}" target="_blank">{{ structure.id }}</a></td>
                    <td>{{ structure.formula_reduced | chemical_formula }}</td>
                    <!-- why won't class="text-right" work here?-->
                    <td>{{ structure.energy_above_hull | floatformat }}</td>
                    <td>{{ structure.nsites }}</td>
                    <td>{{ structure.spacegroup.number }}</td>
                    <td>{{ structure.density | floatformat:3 }}</td>
                    <td>{{ structure.volume_molar | 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 structures 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>