{% extends '@SyliusShop/layout.html.twig' %}

{% block content %}
    <section id="page-title">
        <div class="container">
            <div class="page-title">
                <h1>{{ 'sylius.ui.asg_showroom_page.title'|trans }}</h1>
            </div>
            <div class="breadcrumb justify-content-center" style="background-color: transparent">
                <ul>
                    <li><a href="{{ path('sylius_shop_homepage') }}"><i class="fa fa-home"></i></a> </li>
                    <li class="active" aria-current="page">{{ 'sylius.ui.asg_showroom_page.title'|trans }}</li>
                </ul>
            </div>
        </div>
    </section>

    {% include '@SyliusShop/Common/_textBox.html.twig' %}
    <section class="background-grey">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="heading-text heading-section text-center mt-5">
                        <h2>SHOWROOM</h2>
                        <h4>193 Rue de Belgique, 56100 Lorient</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="no-padding">
        <div class="row">
            <div class="col-md-6 mb-1">
                <iframe id="ytplayer" type="text/html" width="720" height="405"
                        src="https://www.youtube.com/embed/L9uu8jAcwQQ?autoplay=0&color=white"
                        frameborder="0" allowfullscreen>
                </iframe>
            </div>
            <div class="col-md-6">
                <iframe id="ytplayer" type="text/html" width="720" height="405"
                        src="https://www.youtube.com/embed/3ZUyYHQi4Xw?autoplay=0&color=white"
                        frameborder="0" allowfullscreen>
                </iframe>
            </div>
        </div>
    </section>
    <section class="background-grey">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="heading-text heading-section text-center mt-5">
                        <h2>HORAIRES</h2>
                        <h4>Du Lundi au Vendredi de 09H à 12h et de 14H à 17H</h4>
                        <h5>Samedi matin uniquement sur rendez-vous</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="no-padding">
        <div class="mapouter w-100 h-auto position-relative">
            <div class="gmap_canvas w-100 h-auto" >
                <iframe width="100%" style="min-height: 400px" id="gmap_canvas" src="https://maps.google.com/maps?q=Asg%20Domotic&t=&z=15&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
            </div>
        </div>
    </section>
    <section class="p-b-0">
        <div class="container">
            <div class="heading-text heading-section">

                <div class="heading-text heading-section">
                    <div class="heading-text heading-gradient">
                        <h2><span>LE SHOWROOM</span></h2>
                        <span class="lead">Ouvert pour votre écoute et répondre à vos besoins, n'hésitez pas à venir découvrir nos gammes de produits</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="portfolio">
            <div id="portfolio" class="grid-layout portfolio-4-columns grid-loaded" data-margin="0" style="margin: 0px; position: relative; height: 726.28px;">
                {{ render(path('bitbag_sylius_cms_plugin_shop_media_index_by_section_code', {'sectionCode' : 'showroom_portfolio', 'template' : '@SyliusShop/ASGCustom/_portfolioShowroom.html.twig'})) }}
            </div>
        </div>
    </section>
{% endblock content %}