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

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

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


{% block body %}

<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 'workflows' %}">workflows</a></li>
      <li class="breadcrumb-item"><a href="{% url 'workflows_by_type' workflow.type %}">{{ workflow.type }}</a></li>
      <li class="breadcrumb-item active">{{ workflow.name_short }}</li>
    </ol>
  </nav>

  <!-- Workflow name and descriptoin header -->
  <section class="pt-5 jumbotron text-center">
    <div class="container">
      <h1 class="jumbotron-heading">{{ workflow.name }}</h1>
      <p class="lead text-muted">{{ workflow.description_doc }}</p>
    </div>
  </section>

  <!-- Buttons at top -->
  <div class="container p-4">
    <h2>Extras:</h2>
    <a role="button" class="btn btn-primary btn"
      href="{% url 'workflow_submit' workflow.type workflow.name_short %}">Submit New Run</a>
    {% if flow_id %}
    <a role="button" class="btn btn-primary btn" href="https://cloud.prefect.io/simmate/flow/{{ flow_id }}"
      target="_blank">Monitor Runs on Prefect ({{ nflows_submitted }})</a>
    {% endif %}
  </div>

  <!-- Search Form -->
  {% load crispy_forms_tags %}
  <div class="container p-4">
    <h2>Filter Search Results:</h2>
    <form action="{% url 'workflow_detail' workflow.type workflow.name_short %}" method="get"
      enctype="multipart/form-data">
      {{ filter.form | crispy }}
      <button type="submit" class="btn btn-primary">Search</button>
    </form>
  </div>

  <!-- Search Results -->
  <div class="container p-4">
    <h2>Search Results:</h2>
    {% 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>Prefect State</th>
          <th>Simmate ID</th>
          <th>Final Energy (eV/atom)</th>
          <th>Full Formula</th>
          <th>Spacegroup</th>
        </tr>
      </thead>
      <tbody>
        {% for calculation in calculations %}
        <tr>
          {% if calculation.flow_run_view %}
          <td><a href="{{ calculation.prefect_cloud_link }}" target="_blank">
              {{ calculation.prefect_flow_run_name }}</a></td>
          <td>{{ calculation.prefect_state }}</td>
          {% else %}
          <td>--</td>
          <td>--</td>
          {% endif %}
          <td><a href="{{ calculation.id }}">{{ calculation.id }}</a></td>
          <td>{{ calculation.structure_final.energy_per_atom | floatformat:3 }}</td>
          <td>{{ calculation.formula_full | chemical_formula }}</td>
          <td>{{ calculation.spacegroup.number }}</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 %}