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

{% block body %}

<!-- Carousel wrapper -->
<div id="carouselMDExample" class="carousel slide carousel-fade" data-mdb-ride="carousel">
    <!-- Slides -->
    <div class="carousel-inner mb-5 shadow-1-strong rounded-3">
        <div class="carousel-item active">
            <div class="row no-gutters">
                <div class="col-10">
                    <h1 class="product-name">resres rse r</h1>
                    <p class="product-short-desc">{rse r serse rse rse rse r</p>
                    <h2>Description</h2>
                    <p class="product-short-desc">sejr seijr oisjeoir joiseroi</p>
                    <h2>Ingrédients</h2>
                    <p class="product-short-desc"> seoprkpos epo rkpose kropksepork</p>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100"
                 alt="..." />
        </div>
        <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
        </div>
    </div>
    <!-- Slides -->

    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-mdb-target="#carouselMDExample"
            data-mdb-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-mdb-target="#carouselMDExample"
            data-mdb-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    <!-- Controls -->

    <!-- Thumbnails -->
    <div class="carousel-indicators" style="margin-bottom: -20px;">
        <button type="button" data-mdb-target="#carouselMDExample" data-mdb-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1" style="width: 100px;">
            <img class="d-block w-100 shadow-1-strong rounded"
                 src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
        </button>
        <button type="button" data-mdb-target="#carouselMDExample" data-mdb-slide-to="1" aria-label="Slide 2"
                style="width: 100px;">
            <img class="d-block w-100 shadow-1-strong rounded"
                 src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
        </button>
        <button type="button" data-mdb-target="#carouselMDExample" data-mdb-slide-to="2" aria-label="Slide 3"
                style="width: 100px;">
            <img class="d-block w-100 shadow-1-strong rounded"
                 src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
        </button>
    </div>
    <!-- Thumbnails -->
</div>

{% endblock %}