{% extends "base.html" %}

{% block content %}
<main role="main">

    {% if DEMO %}
      <section class="jumbotron text-center">
        <div class="container">
          <br>
          <h1 class="jumbotron-heading">SHARPIE website</h1>
          <p class="lead text-muted">Shared Human-AI Reinforcement Learning Platform for Interactive Experiments</p>
          <p>
            <a href="https://arxiv.org/abs/2501.19245" target="_blank" class="btn btn-primary my-2">Check out our paper</a>
            <a href="https://github.com/hybrid-intelligence/SHARPIE" target="_blank" class="btn btn-secondary my-2">Check out our code</a>
          </p>
        </div>
      </section>
    {% endif %}

    <div class="album py-5 bg-adaptive">
      <div class="container">

        <div class="row">
          {% for experiment in experiments %}
            {% if experiment.enabled %}
              <div class="col-md-4">
                <div class="card mb-4 box-shadow">
                  <div class="card-body">
                    <h5 class="card-title">{{ experiment.name }}</h5>
                    <p class="card-text">{{ experiment.short_description }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                      <div class="btn-group">
                        <a href="/experiment/{{ experiment.link }}/config" class="btn btn-sm btn-outline-primary">Start experiment</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>

  </main>
{% endblock %}