{% 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>
					</p>
					<p class="text-muted mb-0 hover-cursor">
						&nbsp;/&nbsp;
						<a class="student-dashbord-service" href="{{ path('traffic_laws_student_themes_list') }}">Fiches de code</a>
						&nbsp;/&nbsp;
					</p>
					<p class="text-primary mb-0 hover-cursor">{{ trafficLawsTheme }}</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="row  bloc-radius g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-sm-250 position-relative bloc-theme-detail">
            <div class="col-md-8">
                <div class="col p-4 d-flex flex-column position-static">
                    <strong class="d-inline-block mb-2">{{ trafficLawsTheme.driversLicense|upper }}</strong>
                    <h3 class="mb-0 text-primary">{{ trafficLawsTheme|upper }}</h3>
                    <div class="card-text mb-auto bloc-ellipsis">{{ trafficLawsTheme.description|raw }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="row">
            <div class="col-md-8 left-bloc">
                <div class="my-3 p-4 bg-light bloc-radius shadow">
                    <div>{{progressPercent}}% terminé</div>
                    <div class="progress my-2">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: {{progressPercent}}%;" aria-valuenow="{{progressPercent}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    {% if generalLastActivity %}
                        <div>Dernière activité le: {{ generalLastActivity|date("d/m/Y à H:i") }}</div>
                    {% endif %}
                </div>
                <article class="blog-post">
                    <h3>Contenu</h3>
                    {#<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>#}
                    <hr>
                    {{ include('traffic_laws_module/student/includes/courses_collapses.html.twig') }}
                </article>
            </div>
            <div class="col-md-4 p-0 relative-bloc">
                <div class="col-md-12 p-0 shadow bloc-radius">
                    <div class="w-100">
                        <div class="">
                            <img class="w-100 h-100 bloc-radius-top-left bloc-radius-top-right" src="{% if trafficLawsTheme.image %}{{ asset(trafficLawsTheme.image) }}{% else %} {{asset('/images/default-no-image.jpg')}}{% endif %}" alt="image">
                        </div>
                        <div class="p-4 bg-light bloc-radius-bottom-left bloc-radius-bottom-right">
                            {# <p class="mb-2 text-center"><a class="w-100 btn btn-outline-primary" href="#">En cours</a></p> #}
                            <p class="mb-2 text-center">
                                {% if trafficLawsTheme.getCountTrafficLawsChapters == 0 %}
                                    <span class="mb-2 text-light btn btn-danger">Aucun chapitre trouvé</span>
                                {% elseif generalFinished == trafficLawsTheme.getCountTrafficLawsChapters %}
                                    <span class="mb-2 text-light btn btn-success">Terminé</span>
                                {% elseif generalStarted > 0 %}
                                    <span class="mb-2 btn btn-outline-primary">En cours</span>
                                    {% if lastChpaterId %}
                                        <a class="btn btn-primary" href="{{path('traffic_laws_student_chapter',{'id' : lastChpaterId})}}">Continuer</a>
                                    {% endif %}
                                {% else %}
                                    {% if lastChpaterId %}
                                        <a class="btn btn-primary" href="{{path('traffic_laws_student_chapter',{'id' : lastChpaterId})}}">Démarrer le Cours</a>
                                    {% endif %}
                                {% endif %}
                            </p>
                            <h5>Cours inclus</h5>
                            <p class="mb-0 d-flex flex-wrap">
                                <span>
                                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                                        <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
                                    </svg>                                
                                </span>
                                <span class="mx-2">
                                    {{ trafficLawsTheme.getCountTrafficLawsCourses}} {% if trafficLawsTheme.getCountTrafficLawsCourses > 1 %} Leçons {% else %} Leçon {% endif%}
                                </span>
                            </p>
                            <p class="mb-0 d-flex flex-wrap">
                                <span>
                                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                                        <path fill="currentColor" d="M20 5L20 19L4 19L4 5H20M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M18 15H6V17H18V15M10 7H6V13H10V7M12 9H18V7H12V9M18 11H12V13H18V11Z" />
                                    </svg>
                                </span>
                                <span class="mx-2">
                                    {{ trafficLawsTheme.getCountTrafficLawsChapters}} {% if trafficLawsTheme.getCountTrafficLawsChapters > 1 %} Chapitres {% else %} Chapitre {% endif%}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                {# <div class="my-3 p-4 bg-light bloc-radius shadow">
                    <p class="mb-0 d-flex flex-wrap justify-content-between"><span>Temps passé sur le cours</span></i><span class="mx-2">00:00:15</span></p>
                </div> #}
            </div>
        </div>
    </div>
</div>
<!-- Hidden routs -->
<input type="hidden" id="route_show_traffic_laws_chapter_details" value="{{path('traffic_laws_student_chapter')}}" />
{% endblock %}
{% block pageJavascript %}
    <script>
        //row click
        $(document).on('click', '.bloc-student-chapter', function (e) {
            e.stopPropagation()
            var id = $(this).attr('data-id');
            url = $("#route_show_traffic_laws_chapter_details").val() + '/' + id;
            setTimeout(() => {
                $(location).attr('href',url);
            }, 100);
        });
    </script>
{% endblock %}