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

{% block title %}Fiches de code{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-end flex-wrap">
                <div class="d-flex">
                    <i class="mdi mdi-home text-muted hover-cursor"></i>
                    <p class="text-muted mb-0 hover-cursor">
                        &nbsp;/&nbsp;
                        <a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord</a>
                        &nbsp;/&nbsp;
                    </p>
                    <p class="text-primary mb-0 hover-cursor">fiches de code</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    {% if "now"|date('Y-m-d') > app.user.fichesCoursesDeadline|date('Y-m-d') %}
        <div class="col-sm-6">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span>Votre accès aux fiches de code a expiré le <b>{{app.user.fichesCoursesDeadline|date('d/m/Y')}}</b>, veuillez contacter votre agence.</span>
            </div>
        </div>
    {% else %} 
        {# common flash messages bloc #}
        {{ include('common/flash_messages_bloc.html.twig') }}
        <div class="col-md-12 grid-margin text-center">
            <div class="col-md-4 badge rounded-pill bg-success">Votre abonnement fiches de code expire le {{app.user.fichesCoursesDeadline|date('d/m/Y')}}</div>
        </div>
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
            <div class="card-body">
                <div id="content-table" class="row">
                    {% for key, trafficLawsTheme in trafficLawsThemes %}
                        <div class="col-xs-6 col-sm-6 col-md-4 mb-3">
                            <div class="shadow bloc-wraper-theme border bloc-radius" data-id={{trafficLawsTheme['theme'].id}}>
                                <div class="bloc-theme-img" data-id={{trafficLawsTheme['theme'].id}} style="background: url('{% if trafficLawsTheme['theme'].image %}{{ asset(trafficLawsTheme['theme'].image) }}{% else %} {{asset('/images/default-no-image.jpg')}}{% endif %}')  no-repeat top left; background-size: cover;">
                                    <div class="w-100 ">
                                    </div>
                                </div>
                                <div class="bloc-theme-content" data-id={{trafficLawsTheme['theme'].id}} >
                                    <div class="p-3 w-100 ">
                                        <h3 class="py-3 mb-2 bloc-title-ellipsis" style="height:40px">{{ trafficLawsTheme['theme']|capitalize }}</h3>
                                        <div class="progress">
                                            <div class="progress-bar bg-danger" role="progressbar" style="width: {{trafficLawsTheme['progressPercent']}}%;" aria-valuenow="{{trafficLawsTheme['progressPercent']}}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-between">
                                            <p>{{trafficLawsTheme['progressPercent']}}% terminé</p>
                                            <p class="bloc-title-ellipsis">Dernière activité le: {{ trafficLawsTheme['lastActivityAt']|date("d/m/Y à H:i") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>                
                        </div>
                    {% endfor %}
                    
                    <div class="navigation">
                        {{ knp_pagination_render(trafficLawsThemes) }}
                    </div>            
                </div>
            </div>
            </div>
        </div>
  {% endif %}
</div>
<!-- Hidden routs -->
<input type="hidden" id="route_show_traffic_laws_student_theme_details" value="{{path('traffic_laws_student_theme')}}" />
<!-- Modal delete trafficLawsTheme -->
<div>
<!-- Modal reutilisable -->
<div {{ stimulus_controller('modal')}}>
  <a data-action="modal#openModal" id="btnDeletetrafficLawsTheme" class="hidden"></a>
  {{ include('common/_modal.html.twig',{
    modalTitle: 'Supprimer un thème',
    btnTitle: 'Confirmer la suppression',
    btnId: 'confirm_delete_traffic_laws_theme',
    btnCancelId: 'btn_traffic_laws_theme_cancel_delete',
    modalContent: '
        <div>
            <p>
                Vous êtes sur le point de supprimer définitivement le thème <span id="deletetrafficLawsThemeName"></span>.
            </p>
            <p>
                Sa suppression entraînera la destruction de toutes les données associées à ce thème.
            </p>
            <p>
                <strong style="color:#D84A38">Cette action est irréversible.</strong>
            </p>
        </div>'
  }) }}  
</div>

{% endblock %}
{% block pageJavascript %}
    <script>
        //row click
        $(document).on('click', '.bloc-wraper-theme', function (e) {
            e.stopPropagation()
            var id = $(this).attr('data-id');
            url = $("#route_show_traffic_laws_student_theme_details").val() + '/' + id;
            setTimeout(() => {
                $(location).attr('href',url);
            }, 100);
        });
    </script>
{% endblock %}