<%- include("partials/navbar.ejs") %>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
   
        <title>Menu</title>
        <style>
            html,
            body {
                font-family: 'Akshar-Variable';
            }

            .contain-flex {
                display: flex;
                flex-direction: column;
                gap: 20px;
                align-items: center;
            }

            .btn-menu {
                margin-top: 15px;
                width: 329px;
                height: 53px;
                margin-bottom: 10px;
                border-radius: 20px;
                background: #08A2A8;
                border: 0px;

            }

            .btnlabel {
                font-size: 30px !important;
                text-decoration: none;
                color: rgb(255, 255, 255) !important;
            }
        </style>
    </head>

    <body>
        <center>
            <h1 style="color: #a5abb4; font-weight: 600; line-height: 55px; margin-top: 20px;">Welcome<br>
                <%= username %>
            </h1>
        </center>
        <center>
            <h1 style="color: white; font-weight: 600; line-height: 55px; margin-top: 35px; font-size: 25px;">What would
                you like to view today</h1>
        </center>
        <center>
            <div class="contain-flex">

              <a class="btnlabel" href="/profile"> <button class="btn-menu" style="color: white;">Profile</button></a>
              <a class="btnlabel" href="/Electricity"> <button class="btn-menu" style="color:white;">Fawater Electrecity</button></a>
              <a class="btnlabel" href="/Water"> <button class="btn-menu" style="color:white;">Fawater Water</button></a>
              <a class="btnlabel" href="/advice"> <button class="btn-menu" style="color:white;">Advices</button></a>



            </div>
        </center>


            <!--Carousel-->
    <div class="container" style="margin-top: 20px; width: 600px;" >
        <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">
             <img src="/images/my.jpeg" class="d-block w-100" alt="..." style="height: 200px;">
           </div>
           <div class="carousel-item">
             <img src="/images/energy.jpeg" class="d-block w-100" alt="..." style="height: 200px;" >
           </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 m" 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>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
              var myCarousel = new bootstrap.Carousel(document.getElementById('carouselExampleIndicators'), {
                interval: 2500 
              });
            });
          </script>
    </body>

    </html>