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

{% block title %}Magenta Shop{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('home') }}
{% endblock %}

{% block body %}
    <div class="container-fluid">

        {% include "partials/titre.html.twig" %}

        <section class="iden">
            <div class="horaire">
                <span class="glyph"><img src="Image/icon/horloge.png"></span>
                <h4 style="text-decoration: underline;">
                    <b>Horaires d'ouverture</b>
                </h4>
                {% for ouver in ouvert %}
                    <p><br>{{ ouver.horaires | nl2br }}</p>
            </div>

            <div class="contact">
                <span class="glyph"><img src="Image/icon/home_house_icon.png"></span>
                <h4 style="text-decoration: underline;">
                    <b>Contact</b>
                </h4>
                    <p><br>{{ ouver.adresse | nl2br }}</p>
                {% endfor %}
            </div>
        </section>

        <div class="info">
            <h3>En plus de la vente et réparation de smartphones, tablettes et ordinateurs (dont remplacement d'écran, batterie ...), nous proposons</h3><br>
            <h4 id="descrip">
                -La réparation de matériels électroniques diverses<br>
                -L'installation et la mise en service de votre matériel à domicile<br>
                -La mise à jour logiciel et matériel de votre PC ainsi que son optimisation<br>
                -L'impression de vos documents<br>
                -La configuration de votre système wifi et son installation si nécessaire<br>
                -La récupération de données<br>
                -L'initiation au développement web<br>
                -L'initiation à la modélisation 3D<br>
                -L'assistance pour régler vos soucis d'abonnement téléphonique ou internet<br><br>
                et bien d'autres services, n'hésitez pas à vous renseigner.</h4>
        </div>

        <a class="sitweb" href="devweb.html">
            <div>
                <img class="darkstar" src="Image/icon/etoi.png">
            </div>
            <div>
                <h4>Vous avez besoin d'un site web<br>professionnel  ou particulier<br>à un tarif raisonnable<br><b>CLIQUEZ ICI !</b></h4>
            </div>
            <div>
                <img class="darkstar" src="Image/icon/etoi.png">
            </div>
        </a>


        <section>
            <div class="imaPrez">
                {% for ima in imas %}
                    <img id="mage" src="/Image/{{ ima.adress }}">
                {% endfor %}
            </div>

            <div class="occaz">
                <h7>Les bonnes occasions du mois</h7>
            </div>

            <div class="container text-center">
                <div class="row justify-content-between">
                    <div id="star" class="rotating col-4">
                        <img src="/Image/icon/star.png">
                    </div>
                    <div id="star" class="rotating col-4">
                        <img src="/Image/icon/star.png">
                    </div>
                </div>
            </div>

{#            <div class="imaPrez">#}
{#                {% for occaz in occazs %}#}
{#                    <div>#}
{#                        <img id="mage" src="Image/{{ occaz.adress }}">#}
{#                        <p id="tarf">{{ occaz.nom }}<br>{{ occaz.etat }}<br>{{ occaz.prix }}€ TTC</p>#}
{#                    </div>#}
{#                {% endfor %}#}
{#            </div>#}

            <div class="img-responsive affaire">
                <div class="prem">
                    <img id="prems" src="Image/honor-8a.png" alt="smartphone">
                    <p>Honor 8A<br>très bon état<br>149€ TTC</p>
                </div>
                <div class="secon">
                    <img id="deus" src="Image/ipho6.png" alt="smartphone">
                    <p>Iphone 6 32go<br>bon état<br>119€ TTC</p>
                </div>
                <div class="trois">
                    <img id="trois" src="Image/airpod.png" alt="airpod">
                    <p>Airpods Tagod<br>état neuf<br>29€ TTC</p>
                </div>
            </div>

            <!-- The Modal 1-->
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Honor 8A</h2>
                    </div>
                    <div class="modal-body">
                        <h4 class="ftek">Fiche technique</h4>
                        <p>-Système : Android 9</p>
                        <p>-Mémoire vive (RAM) : 3 Go</p>
                        <p>-Capteur photo principal : 13 Mpx</p>
                    </div>
                    <div class="modal-footer">
                        <h4>Les bonnes affaires</h4>
                        <button id="clo" type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>

            <!-- The Modal 2-->
            <div id="myModal2" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Iphone 6</h2>
                    </div>
                    <div class="modal-body">
                        <h4 class="ftek">Fiche technique</h4>
                        <p>-Système : IOS</p>
                        <p>-Mémoire vive (RAM) : 3 Go</p>
                        <p>-Capteur photo principal : 13 Mpx</p>
                    </div>
                    <div class="modal-footer">
                        <h4>Les bonnes affaires</h4>
                        <button id="clo2" type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>

            <!-- The Modal 3-->
            <div id="myModal3" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Airpods Tagod</h2>
                    </div>
                    <div class="modal-body">
                        <h4 class="ftek">Fiche technique</h4>
                        <p>-Système : IOS / Andoid</p>
                        <p>-Connection : bluetooth</p>
                        <p>-Couleur : Blanc</p>
                    </div>
                    <div class="modal-footer">
                        <h4>Les bonnes affaires</h4>
                        <button id="clo3" type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>


            <div id="sol" class="rotatingSol">
                <img id="so" src="/Image/icon/sol.png">
                <img id="lu" src="/Image/icon/68.png">
            </div>
        </section>
    </div>

    <div class="text-center carte">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2615.063058289825!2d3.962661551880226!3d49.04742459522945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e96b5b91ca1f17%3A0x4911deffd6c45864!2sMagenta%20Games!5e0!3m2!1sfr!2sfr!4v1629802973765!5m2!1sfr!2sfr" width="800" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('home') }}
{% endblock %}