{% extends 'layouts/crud_list.html.twig' %}

{% set page_title = 'Liste des QRs' %}
{% set page_icon = 'bi-patch-question' %}

{% block list %}

	<div class="image-preview-overlay" data-image-preview-target="container">
		<img src="" alt="Aperçu" data-image-preview-target="image">
	</div>

	<h2 class='text-center h5'>{{ faq.name }}</h2>

	<div class="container">
		{% if (couples|length) != 0 %}
			<div class="table-responsive">
				<table class="table table-dark table-hover text-center">
					<thead>
						<tr>
							<th>Id</th>
							<th>Position</th>
							<th>Question</th>
							<th>Réponse</th>
							<th></th>
							<th></th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						{% for couple in couples %}
							<tr>
								<td class='id-record'>(*&nbsp;{{couple.id}})</td>
								<td>{{ couple.num }}</td>
								<td>{{ couple.question }}</td>
								<td>

									{% if couple.reponse != '' %}
										<p>{{ couple.reponse }}</p>
									{% endif %}

									{% for image in couple.images %}
										<a href="#" class="preview-link" data-image-preview-url="{{ asset(image.name,'images_directory') }}" data-action="mouseenter->image-preview#show mouseleave->image-preview#hide">
											{{ image.id }}
										</a>
									{% endfor %}

								</td>
								<td>
									{% for rule in couple.rules %}
										{{ rule.name }}
									{% endfor %}
								</td>
								<td>
									<a href="{{ path('app_couples_update', { 'from' : 'list','id_faq' : faq.id, 'id_couple': couple.id }) }}" class="btn btn-primary">Modifier la QR</a>
								</td>
								<td>
									{% include "couples/_delete_form.html.twig" %}
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		{% else %}
			<p>Il n'y a pas de QR dans cette Faq</p>
		{% endif %}
	</div>

{% endblock %}

{% block actions %}

	<a class="btn btn-primary mt-4" href="{{ path('app_couples_new', { 'id_faq': faq.id }) }}">
		<i class="bi bi-plus-circle me-2"></i>
		Créer une nouvelle QR
	</a>

{% endblock %}