{% set active = 'repair' %}


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

{% block title %}Réparer - Micro76
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('css/repair_item.css') }}">
{% endblock %}

{% block body %}

	<main>

		<section class="home">
			{{ categorie.image.display(200) }}
			<div class="title">{{ settings.find(2) }}</div>
			<div class="content">{{ settings.find(8) }}</div>
			<a href="{{ link.find(10).href }}" class="link">{{ link.find(10) }}</a>


		</section>
		<section class="problemes">
			{% for item in categorie.problemes %}
				{% if item.hasSousProblem %}
					<div class="item" data-bs-toggle="modal" data-bs-target="#showSubproblem" data-id="{{ categorie.id }}_{{ item.id }}">
						{{ item.image.display(50,'ico') }}
						<div>{{ item }}</div>
					</div>
				{% else %}
					<a href="{{ path('diag',{cat : categorie.id , pb : item.id,pb2 : 0}) }}" class="item-long">
							{{ item.image.display(50,'ico') }}

						<div>{{ item }}</div>
					</a>
				{% endif %}
			{% endfor %}

		</section>


	</main>


	<!-- Modal -->
	<div class="modal fade" id="showSubproblem" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">

				<div class="modal-body">
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					<div class="fetched-data"></div>
				</div>

			</div>
		</div>
	</div>


	<script src="{{ asset('js/repair_item.js') }}"></script>
{% endblock %}