<!DOCTYPE html>
<html>

<head>
    <title>Main Menu</title>
    <!-- Bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="
  sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.2.0/mdb.min.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/styles/teste.css">
    <!-- <link rel="stylesheet" href="footer.css"> -->


</head>

<body>
    <div class="container-fluid p-0">
        <div class="header">
            <div class="row" id="header-box">
                <div class="col-3" id="site-name">
                    <h3>Guia canino</h3>
                </div>
                <div class="col-5" id="searchbar">
                    <div class="input-group rounded">
                        <input type="search" class="form-control rounded" placeholder="Busque por um pet..."
                            aria-label="Search" aria-describedby="search-addon" />
                        <span class="input-group-text border-0" id="search-addon">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </div>
                <div class="col-4" id="itens">
                    <div class="dropdown unclickable">
                        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            Dropdown trigger
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dLabel">
                            <a class="dropdown-header">item 1</a>
                            <a class="dropdown-item active">item 2</a>
                            <a class="dropdown-item disabled">item 3</a>
                            <div class="dropdown-divider">item 4</div>
                            <a class="dropdown-item">item 5</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- header -->
        <div class="carrossel">

            <!-- Carousel wrapper -->
            <div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"
                data-mdb-carousel-init>
                <!-- Indicators -->
                <div class="carousel-indicators">
                    <!--
                        <button
                            type="button"
                            data-mdb-target="#carouselBasicExample"
                            data-mdb-slide-to="0"
                            class="active"
                            aria-current="true"
                            aria-label="Slide 1"
                        ></button>
                    									-->
                    <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"
                        aria-label="Slide 2"></button>
                </div>

                <!-- Inner -->
                <div class="carousel-inner">
                    <!-- Single item -->
                    <!--								
                    <div class="carousel-item active">
                        <img src="../LogarTrans.webp" class="d-block w-100" alt="Sunset Over the City"/>
                        <div class="carousel-caption d-none d-md-block">
                        <h5>Cachorro 1</h5>
                        <p>Definitivamente um cachorro</p>
                        </div>
                    </div>
                    									-->

                    <!-- Single item -->
                    <div class="carousel-item active">
                        <img src="/image/login-bg-edg.webp" class="d-block w-100" alt="Canyon at Nigh" />
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Cachorro 2</h5>
                            <p>Definitivamente um cachorro</p>
                        </div>
                    </div>

                    <!-- Single item -->
                    <div class="carousel-item">
                        <img src="/image/login-bg.webp" class="d-block w-100" alt="Cliff Above a Stormy Sea" />
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Cachorro 3</h5>
                            <p>Definitivamente um cachorro</p>
                        </div>
                    </div>
                </div>
                <!-- Inner -->

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

        </div>
        <div class="content">

        </div>
    </div>

    <%- include('./partials/footer') %>

        <script>
            let d = document.querySelector("#dLabel")

            document.getElementById('dropdown').addEventListener('mouseenter', function () {
                var dropdownMenu = this.getElementsByClassName('dropdown-menu')[0];
                dropdownMenu.style.display = 'block';
            });

            // Adiciona o evento de mouseleave para desativar o dropdown
            document.getElementById('dropdown').addEventListener('mouseleave', function () {
                var dropdownMenu = this.getElementsByClassName('dropdown-menu')[0];
                dropdownMenu.style.display = 'none';
            });
            //
            document.getElementById('dropdown').addEventListener('mouseleave', function () {
                this.classList.remove('active');
            });

            document.getElementById('dLabel').removeAttribute('onclick');
            document.getElementById('dLabel').removeAttribute('role');

        </script>
        <!-- Bootstrap -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
        <!-- MDB -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.2.0/mdb.umd.min.js">
        </script>
</body>

</html>