{% extends "layout.html" %}
{% block title %}Analyses - BEx{% endblock %}
{% block content %}
  <div class="container mt-5">
    <div class="text-center mb-4">
      <h1 class="display-5 title">Liste des Analyses</h1>
      <p class="lead">Cliquer sur une analyse pour afficher les détails associés.</p>
    </div>
    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <label for="search-analyses" class="form-label small text-muted mb-1">Rechercher une analyse</label>
        <div class="input-group">
          <input list="analyses-list"
                 id="search-analyses"
                 class="form-control"
                 placeholder="Rechercher une analyse..."
                 autocomplete="off" />
          <button id="apply-btn" class="btn btn-primary" type="button" disabled>Appliquer</button>
        </div>
        <datalist id="analyses-list"></datalist>
      </div>
    </div>
    <div class="card shadow-sm">
      <div class="card-body">
        <h3 class="mb-4">Analyses disponibles :</h3>
        <ul class="list-group" id="analyses-ul">
          {% for analyse in analyses %}
            <li class="list-group-item">
              <a href="{{ url_for('routes.show_analysis_detail', analysis_id=analyse) }}"
                 class="text-decoration-none">
                <div class="d-flex justify-content-between align-items-center">
                  <span>{{ analyse }}</span>
                  <i class="bi bi-chevron-right"></i>
                </div>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
{% endblock %}
{% block page_js %}<script src="{{ url_for('static', filename='js/analyses.js') }}"></script>{% endblock %}