{% set active = 'repair' %}


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

{% block title %}Demander une réparation - 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 %}
                <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>
            {% 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 %}