{% extends 'base.html.twig' %}

{% block title %}Fiches{% endblock %}

{% block body %}

{% include 'include/menu.html.twig' %}
<div class="app-content content" style="background-color: white !important;">
    <div class="content-wrapper">
        <div class="content-body"><!-- Dashboard Analytics Start -->
            <section id="dashboard-search">
                <div class="container-fluid">
                    <h4>Fiches par temps</h4>
                    <div class="collapsible collapse-icon accordion-icon-rotate">
                        <div class="card collapse-header">
                            <div id="headingCollapse5" class="card-header collapsed" data-toggle="collapse" role="button" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
        <span class="collapse-title">
          <i class='bx bx-time'></i>
          <span class="align-middle">0 - 15 min</span>
        </span>
                            </div>
                            <div id="collapse5" role="tabpanel" aria-labelledby="headingCollapse5" class="collapse" style="">
                                <div class="card-content">
                                    <div class="card-body">
                                        <ul class="list-group">
                                            {% for fiche in fiches if fiche.sequenceTime >= 0 and fiche.sequenceTime <= 15 %}
                                                <li class="list-group-item"><a href="{{ path('dashboard_fiche_id', {id : fiche.id }) }}">{{ fiche.name }} ({{ fiche.sequenceTime }} minutes)</a></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card collapse-header">
                            <div id="headingCollapse6" class="card-header" data-toggle="collapse" role="button" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
        <span class="collapse-title">
          <i class='bx bx-time'></i>
          <span class="align-middle">15 - 30 min</span>
        </span>
                            </div>
                            <div id="collapse6" role="tabpanel" aria-labelledby="headingCollapse2" class="collapse">
                                <div class="card-content">
                                    <div class="card-body">
                                        <ul class="list-group">
                                            {% for fiche in fiches if fiche.sequenceTime >= 15 and fiche.sequenceTime <= 30 %}
                                                <li class="list-group-item"><a href="{{ path('dashboard_fiche_id', {id : fiche.id }) }}">{{ fiche.name }} ({{ fiche.sequenceTime }} minutes)</a></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card collapse-header">
                            <div id="headingCollapse7" class="card-header" data-toggle="collapse" role="button" data-target="#collapse7" aria-expanded="false" aria-controls="collapse7">
        <span class="collapse-title">
        <i class='bx bx-time'></i>
          <span class="align-middle">30 - 45 min</span>
        </span>
                            </div>
                            <div id="collapse7" role="tabpanel" aria-labelledby="headingCollapse7" class="collapse">
                                <div class="card-content">
                                    <div class="card-body">
                                        <ul class="list-group">
                                            {% for fiche in fiches if fiche.sequenceTime >= 30 and fiche.sequenceTime <= 45 %}
                                                <li class="list-group-item"><a href="{{ path('dashboard_fiche_id', {id : fiche.id }) }}">{{ fiche.name }} ({{ fiche.sequenceTime }} minutes)</a></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card collapse-header">
                            <div id="headingCollapse8" class="card-header" data-toggle="collapse" role="button" data-target="#collapse8" aria-expanded="false" aria-controls="collapse4">
        <span class="collapse-title">
          <i class='bx bx-time'></i>
          <span class="align-middle">45 - 60 min</span>
        </span>
                            </div>
                            <div id="collapse8" role="tabpanel" aria-labelledby="headingCollapse8" class="collapse">
                                <div class="card-content">
                                    <div class="card-body">
                                        <ul class="list-group">
                                            {% for fiche in fiches if fiche.sequenceTime >= 45 and fiche.sequenceTime <= 60 %}
                                                <li class="list-group-item"><a href="{{ path('dashboard_fiche_id', {id : fiche.id }) }}">{{ fiche.name }} ({{ fiche.sequenceTime }} minutes)</a></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
{% endblock %}