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

{% block title %}Metallian Shop | Merchandising Musique, métal et punk{% endblock %}

{% block metaTag %}<meta name="description" content="Metallian Eshop affilié à METALLIAN Magazine - nouveau store pour acheter du merchandising Musique et Pop Culture | stock de plus de 8000 articles">{% endblock %}

{% block body %}

<div class="container-xl">
    <div class="row">
        <div class="col-12 g-0">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">            
                <div class="carousel-item active">
                    {% if slider is not empty %}
                        <a href={{ slider.0.link }}>
                            <img src={{ asset('images/'~slider.0.photo1) }} class="d-block w-100" style="height: 100%; width: 100%" title="{{ slider.0.title1 }}" alt="{{ slider.0.title1 }}"/>
                        </a>
                        </div>
                        <div class="carousel-item">
                        <a href={{ slider.0.link2 }}>
                            <img src={{ asset('images/'~slider.0.photo2) }} class="d-block w-100" style="height: 100%; width: 100%" title="{{ slider.0.title2 }}" alt="{{ slider.0.title2 }}"/>
                        </a>
                        </div>
                        <div class="carousel-item">
                        <a href={{ slider.0.link3 }}>
                            <img src={{ asset('images/'~slider.0.photo2) }} class="d-block w-100" style="height: 100%; width: 100%" title="{{ slider.0.title3 }}" alt="{{ slider.0.title3 }}"/>
                        </a>
                    {% endif %}
                </div>   
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
            </div>
        </div>
    </div>
    <div class="row bg-white">

        <div class="row d-flex text-center mt-3 mb-2 mx-auto ">

			<h1 style="margin-bottom: 1rem">Nos nouveautés Metallian Eshop</h1>
			<hr>
            <p>Avide de nouveautés, voici les touts nouveaux produits arrivant chez nous qu'elles soient Metal, Rock ou Pop culture ainsi que des merchandising de vos groupes préférés. Soyez le premier à acheter nos nouveautés et actualisez votre garde-robe avec nous.</p>

		</div>

        <div class="col-12 p-3 text-dark">
            <h3>Femmes</h3>     
            <div class="row text-center">

                <div id="carouselFemme" class="carousel carousel-dark slide d-xl-block d-md-block d-none sm-none md-none" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">

                            <div class="row">
                            
                            {% for vetement in nouveautesFemme  | slice(0, 4) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Femme' %}

                                            <div class="card g-0 mx-auto my-2 border-0" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>
                        
                        <div class="carousel-item">

                              <div class="row">
                            
                                {% for vetement in nouveautesFemme  | slice(4, 4) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Femme' %}

                                            <div class="card g-0 mx-auto my-2 border-0" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>
                        <div class="carousel-item">

                            <div class="row">
                            
                                {% for vetement in nouveautesFemme  | slice(8, 4) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Femme' %}

                                            <div class="card g-0 mx-auto my-2 border-0" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title ">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>

                    </div>
                    <button class="carousel-control-prev" style="width: 4em" type="button" data-bs-target="#carouselFemme" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" style="width: 4em" type="button" data-bs-target="#carouselFemme" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

                <div id="carouselFemmeMobile" class="carousel carousel-dark slide d-xl-none d-md-none d-block sm-block md-block" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">

                            <div class="row">
                            
                            {% for vetement in nouveautesFemme  | slice(0, 1) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Femme' %}

                                            <div class="card g-0 mx-auto my-2 border-0" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>

                        {% for vetement in nouveautesFemme  | slice(1, 11) %}

                            {% if vetement.categorieMerchandising.title == 'Merchandising Femme' %}

                                <div class="carousel-item">

                                    <div class="row">


                                        <div class="card g-0 mx-auto my-2 border-0" style="width: 15rem;">

                                            <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                <div class="card-body">
                                                    <ul class="list-group list-group-flush ">
                                                        <li class="list-group-item fw-bold">{{ ((vetement.price)/100) | number_format(2) }}
                                                            €</li>
                                                    </ul>
                                                    {% if vetement.artist is not null %}
                                                        <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                    {% endif %}
                                                    <h5 class="card-title">{{ vetement.title }}</h5>
                                                </div>

                                            </a>

                                        </div>


                                    </div>


                                </div>
                            {% endif %}

                        {% endfor %}


                    </div>
                    <button class="carousel-control-prev" style="width: 4em" type="button" data-bs-target="#carouselFemmeMobile" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" style="width: 4em" type="button" data-bs-target="#carouselFemmeMobile" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

            </div>
        </div>
    </div>
    <div class="row" >
        <div class="col-12 p-3 bg-dark text-white">

            <h3>Hommes</h3>     

            <div class="row text-center">

                <div id="carouselHomme" class="carousel slide d-xl-block d-md-block d-none sm-none md-none" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active" data-bs-interval="30000">

                            <div class="row">
                            
                            {% for vetement in nouveautesHomme  | slice(0, 4) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Homme' %}

                                            <div class="card g-0 mx-auto my-2 border-0 bg-dark" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" id="image{{vetement.id}}" style="height: 300px; width: 240px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item bg-dark text-white fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title text-white">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>

                        <div class="carousel-item" data-bs-interval="30000">

                              <div class="row">
                            
                                {% for vetement in nouveautesHomme  | slice(4, 4) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Homme' %}

                                            <div class="card g-0 mx-auto my-2 border-0 bg-dark" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top bg-dark" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item bg-dark text-white fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title text-white">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>
                        <div class="carousel-item" data-bs-interval="30000">

                            <div class="row">
                            
                                {% for vetement in nouveautesHomme  | slice(8, 4) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Homme' %}

                                            <div class="card g-0 mx-auto my-2 border-0 bg-dark" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item bg-dark text-white fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title text-white">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                            <script>

                                            $(document).ready(function () {
                                                $('#image{{vetement.id}}').attr('src', '{{ asset('images/' ~ vetement.images.values.0.image) }}');
                                            });                                                     
                                            
                                            </script>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>

                    </div>
                    <button class="carousel-control-prev" style="width: 4em" type="button" data-bs-target="#carouselHomme" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" style="width: 4em" type="button" data-bs-target="#carouselHomme" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

                <div id="carouselHommeMobile" class="carousel slide d-xl-none d-md-none d-block sm-block md-block" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active" data-bs-interval="30000">

                            <div class="row">
                            
                            {% for vetement in nouveautesHomme  | slice(0, 1) %}
                                    
                                    {% if vetement.categorieMerchandising.title == 'Merchandising Homme' %}

                                            <div class="card g-0 mx-auto my-2 border-0 bg-dark" style="width: 15rem;">

                                                <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                    <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" id="image{{vetement.id}}" style="height: 300px; width: 240px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                    <div class="card-body">
                                                        <ul class="list-group list-group-flush ">
                                                            <li class="list-group-item bg-dark text-white fw-bold">{{ ((vetement.price)/100) | number_format(2) }} €</li>
                                                        </ul>
                                                        {% if vetement.artist is not null %}
                                                            <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                        {% endif %}
                                                        <h5 class="card-title text-white">{{ vetement.title }}</h5>
                                                    </div>      

                                                </a>

                                            </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </div>

                        {% for vetement in nouveautesHomme  | slice(1, 11) %}

                            {% if vetement.categorieMerchandising.title == 'Merchandising Homme' %}

                                <div class="carousel-item" data-bs-interval="30000">

                                    <div class="row">


                                        <div class="card g-0 mx-auto my-2 border-0 bg-dark" style="width: 15rem;">

                                            <a href="{{ path('view_products', {"id": vetement.id}) }}" class="text-decoration-none text-black">

                                                <img src="{{ asset('images/' ~ vetement.images.values.0.image) }}" style="height: 300px; object-fit: contain;" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" loading="lazy">
                                                <div class="card-body">
                                                    <ul class="list-group list-group-flush ">
                                                        <li class="list-group-item bg-dark text-white fw-bold">{{ ((vetement.price)/100) | number_format(2) }}
                                                            €</li>
                                                    </ul>
                                                    {% if vetement.artist is not null %}
                                                        <h4 class="card-title text-muted">{{ vetement.artist }}</h4>
                                                    {% endif %}
                                                    <h5 class="card-title text-white">{{ vetement.title }}</h5>
                                                </div>

                                            </a>

                                        </div>


                                    </div>

                                </div>

                            {% endif %}

                        {% endfor %}

                    <button class="carousel-control-prev" style="width: 4em" type="button" data-bs-target="#carouselHommeMobile" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" style="width: 4em" type="button" data-bs-target="#carouselHommeMobile" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

            </div>
        </div>
    </div>
    
    <div class="col-12 p-3 bg-white">

        <div class="row d-flex text-center mt-3 mb-2 mx-auto ">

            <h2 style="margin-bottom: 1rem">Les meilleurs marques</h2>
            <hr>
            {# <p>Nous proposons les meilleurs marques de mode alternative, du Punk au Gothique en passant par le underground et beaucoup plus d'autre pour affirmer vore propres style.</p> #}
            <p>Vous pouvez trouver les dernières collections de vêtements et accessoires en métal et punk des meilleures marques. Des vestes en cuir aux ceintures cloutées en passant par les t-shirts de groupe et les jeans déchirés, nous avons tout ce dont vous avez besoin pour exprimer votre amour pour le heavy metal et votre esprit rebelle. Notre magasin est un guichet unique pour tous vos besoins en matière de mode en métal, avec un large éventail de marques parmi lesquelles choisir. Que vous aimiez le métal classique, le thrash ou le punk, nous avons quelque chose pour tout le monde. Venez découvrir votre nouvelle tenue préférée dans notre magasin dès aujourd'hui !</p>

        </div>

    </div>

    <div class="col-12 p-3 bg-white">

        <div class="row d-flex text-center mt-3 mb-2 mx-auto ">

            <h2 style="margin-bottom: 1rem">Merchandising de vos groupes préférés</h2>
            <hr>
            <p>Achetez les meilleurs produits dérivés de vos groupes de rock et de métal préférés dans notre magasin. Des t-shirts et vestes en cuir classiques aux mugs, puzzles ou encore des patchs, nous avons tout ce dont vous avez besoin pour montrer votre amour pour vos groupes préférés et leur musique. Notre magasin est une visite incontournable pour les rockeurs et les métalleux, avec les derniers et meilleurs produits de tous vos artistes préférés. Rejoignez la révolution rock avec nous dès aujourd'hui !</p>

        </div>

    </div>

    <div class="col-12 p-3 bg-white">

        <div class="row d-flex text-center mt-3 mb-2 mx-auto ">

            <h2 style="margin-bottom: 1rem">Metallian Eshop</h2>
            <hr>
            <p>Êtes-vous fatigué de porter les mêmes vêtements ennuyeux que tout le monde ? Voulez-vous exprimer votre amour du rock, du metal et du punk d'une manière unique et avant-gardiste ? Notre boutique vestimentaire est là pour vous aider! 
            Nous avons une large sélection de vêtements qui sont parfaits pour tous ceux qui veulent se démarquer de la foule. De plus, nous proposons des produits des groupes et marques les plus en vogue du monde du rock et du métal, afin que vous puissiez soutenir vos favoris avec style. Des t-shirts de groupe aux vestes en cuir, en passant par les ceintures cloutées et les jeans déchirés, nous avons tout ce dont vous avez besoin pour montrer votre côté rebelle. 
            Et avec des prix imbattables, vous pouvez vous permettre de vous exprimer sans vous ruiner.</p>

        </div>

    </div>

 
    
</div>
</div>


{% endblock %}