<%- contentFor('body') %>

    <style>
        .highlight {
            background-color: blueviolet;
        }

        .carousel-inner img {
            margin: auto;
        }

        .carousel {
            margin: 0 auto;
        }
    </style>
    <br>

    <div class = "form-inline justify-content-center">
        <input id = "search-input" class = "form-control mr-sm-2" placeholder = "Procure por algo..." style = "width: 550px;">
        <button id = "search-button" class = "btn btn-success my-2 my-sm-0 text-button">Procurar</button>
    </div>
    <br>

    <div id = "carouselExampleIndicators" class = "carousel slide align-center" data-ride = "carousel" style = "width: 50%; height: 50%; background-color: rgb(179, 98, 136);">
        <ol class = "carousel-indicators">
            <li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
            <li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
            <li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
            <li data-target = "#carouselExampleIndicators" data-slide-to = "3"></li>
            <li data-target = "#carouselExampleIndicators" data-slide-to = "4"></li>
        </ol>
        <div id = "carousel-inner" class = "carousel-inner">
            <div class = "carousel-item active">
                <img class = "d-block w-50 h-50" src = "/imgs/img1.jpeg" alt = "Primeiro slide">
                <div class = "carousel-caption d-none d-md-inline">
                    <p id = "text0">
                        <%= texts[0] %>
                    </p>
                </div>
            </div>
            <div class = "carousel-item">
                <img class = "d-block w-75" src = "/imgs/img2.jpeg" alt = "Segundo slide">
                <div class = "carousel-caption d-none d-md-inline">
                    <p id = "text1">
                        <%= texts[1] %>
                    </p>
                </div>
            </div>
            <div class = "carousel-item">
                <img class = "d-block w-50 h-50" src = "/imgs/img3.jpg" alt = "Terceiro slide">
                <div class = "carousel-caption d-none d-md-inline">
                    <p id = "text2">
                        <%= texts[2] %>
                    </p>
                </div>
            </div>
            <div class = "carousel-item">
                <img class = "d-block w-50 h-50" src = "/imgs/img4.jpg" alt = "Quarto slide">
                <div class = "carousel-caption d-none d-md-inline">
                    <p id = "text3">
                        <%= texts[3] %>
                    </p>
                </div>
            </div>
            <div class = "carousel-item">
                <img class = "d-block w-75 h-75" src = "/imgs/img5.jpeg" alt = "Quinto slide">
                <div class = "carousel-caption d-none d-md-inline">
                    <p id = "text4">
                        <%= texts[4] %>
                    </p>
                </div>
            </div>
            <a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev" style = "background-color: #969696;">
                <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
                <span class = "sr-only">Anterior</span>
            </a>
            <a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next" style = "background-color: #969696;">
                <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
                <span class = "sr-only">Pr√≥ximo</span>
            </a>
        </div>
    </div>
    <br>