{% extends "core_components/site_base.html" %}

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

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


{% block body %}

<!-- start page title -->
<div class="row pt-3">
  <div class="col-12">
    <div class="page-title-box">
      <div class="page-title-right">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item"><a href="{% url 'workflows' %}">Workflows</a></li>
          <li class="breadcrumb-item active">{{ workflow_type }}</li>
        </ol>
      </div>
      <h4 class="page-title">Workflow Type</h4>
    </div>
  </div>
</div>
<!-- end page title -->

<!-- Header -->
<section class="pt-4 jumbotron text-center">
  <div class="container">
    <h1 class="jumbotron-heading">{{ workflow_type }}</h1>
    <p class="lead text-muted">{{ workflow_type_description }}</p>
  </div>
</section>


<h4>Available calculators:</h4>
<div class="accordion" id="accordionExample">
  {% for calculator, workflows in workflow_dict.items %}
  <div class="card mb-0">
    <div class="card-header" id="heading{{ calculator }}">
      <h5 class="m-0">
        <a class="custom-accordion-title d-block pt-2 pb-2" data-bs-toggle="collapse" href="#collapse{{ calculator }}"
          aria-expanded="true" aria-controls="collapse{{ calculator }}">
          {{ calculator }}
        </a>
      </h5>
    </div>

    <div id="collapse{{ calculator }}" class="collapse" aria-labelledby="heading{{ calculator }}"
      data-bs-parent="#accordionExample">
      <div class="card-body">
        <!-- List of Cards -->
        <div class="row">
          {% for workflow in workflows %}
          <div class="col-md-4">
            <div class="card border-primary border">
              <div class="card-body">
                <h5 class="card-title text-primary">{{ workflow.name_preset }}</h5>
                {{ workflow.description_doc_short }}
                <br><br>
                <a href="{% url 'workflow_detail' workflow_type workflow.name_calculator workflow.name_preset %}"
                  class="btn btn-primary btn-sm">Explore</a>
                <a role="button" class="btn btn-secondary btn-sm"
                  href="{% url 'workflow_submit' workflow.name_type workflow.name_calculator workflow.name_preset %}">Submit</a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}