<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Icon -->
    <link rel="icon" href="images/cloud-sun-solid.svg">

    <!-- Font -->
    <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=Roboto:wght@400;700&display=swap" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/bootstrap-dark.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap-dark.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@1.0.0/dist/css/toggle-bootstrap-print.min.css" />

    <!-- Swiper -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

    <!-- Style -->
    <link rel="stylesheet" href="css/style.css">

    <title>Meteo</title>
</head>

<body class="bootstrap">

    <header>
        <!-- Navbar -->
        <div class="container-fluid">
            <nav class="navbar navbar-expand-lg navbar bg-light fixed-top" id="topNavBar">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <div class="container-fluid">
                                    <a class="navbar-brand" href="#">
                                        <img src="images/cloud-sun-solid.svg" alt="logo"
                                            class="d-inline-block align-text-top">
                                        Meteo
                                    </a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    Aree
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="/aree?nomeArea=europe">Europa</a></li>
                                    <li><a class="dropdown-item" href="/aree?nomeArea=asia">Asia</a></li>
                                    <li><a class="dropdown-item" href="/aree?nomeArea=americas">America</a></li>
                                    <li><a class="dropdown-item" href="/aree?nomeArea=africa">Africa</a></li>
                                    <li><a class="dropdown-item" href="/aree?nomeArea=oceania">Oceania</a></li>
                                </ul>
                            </li>
                            <% if(!autentication){%>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        Autenticazione
                                    </a>
                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <li><a class="dropdown-item" href="/login">Login</a></li>
                                        <li><a class="dropdown-item" href="/registrazione">Registrazione</a></li>
                                    </ul>
                                </li>
                                <%} else{%>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <%= user%>
                                        </a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <li><a class="dropdown-item" href="/areaPersonale">Area Personale</a></li>
                                            <li><a class="dropdown-item" href="/logout">Logout</a></li>
                                        </ul>
                                    </li>
                                    <%}%>
                                        <!-- Toggle dark mode-->
                                        <li class="nav-item">
                                            <div class="nav-link">
                                                <div class="toggle">
                                                    <input type="checkbox" id="darkModeToggle">
                                                    <label for="darkModeToggle"></label>
                                                </div>
                                            </div>
                                        </li>
                        </ul>

                        <!-- Ricerca -->
                        <form class="d-flex search" role="search" id="search-form">
                            <input class="form-control" list="datalistOptions" id="search-bar"
                                placeholder="Inserisci una città...">
                            <datalist id="datalistOptions">
                            </datalist>
                            <button class="btn btn-outline-success search-button" type="submit">Cerca</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <!-- Cover -->
    <section class="cover">
        <div class="container-carousel">
            <div class="row">
                <div class="col-md-12">
                    <div id="carouselFade" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="images/01d.jpg" class="d-block w-100 weather-image" alt="Cielo">
                            </div>
                        </div>
                    </div>
                    <!-- Current weather info -->
                    <div class="weather-info" hidden-xs>
                        <div class="row">
                            <div class="weather-location">Sto cercando...</div>
                            <div class="weather-temperature"></div>
                            <div class="weather-suggestion">
                                <p class="suggestion"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>

    <main>
        <!-- Section 1 -->
        <section class="section-1">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-3 mb-lg-0 text-left mt-4">
                        <div class="px-0 px-lg-3">
                            <h3 class="h5">Previsioni in tempo reale</h3>
                            <p class="text-muted">In modo tale da rimanere sempre aggiornato sul tempo e non farti
                                trovare impreparato</p>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3 mb-lg-0 text-left mt-4">
                        <div class="px-0 px-lg-3">
                            <h3 class="h5">... e in tutto il mondo!</h3>
                            <p class="text-muted">Cerca una città di un paese qualsiasi e troverai le sue
                                previsioni e temperature
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <hr class="section-divider">

        <!-- Section 2 -->
        <section class="section-2">
            <% if(pref !==undefined) {%>
                <div class="container text-left">
                    <h4>Città preferite</h4>
                    <div class="swiper mySwiper">

                        <div class="swiper-wrapper">
                            <% for(let i=0; i < pref.length; i++){%>
                                <div class="swiper-slide preferito">
                                    <img id="imgSlider<%= i%>">
                                    <div class="slide-info">
                                        <h3 id="cit<%= i%>">
                                            <%= pref[i]%>
                                        </h3>
                                        <ul class="list-unstyled">
                                            <li id="cit<%= i%>Temp"></li>
                                            <li id="cit<%= i%>TempPerc"></li>
                                            <li id="cit<%= i%>Humid"></li>
                                            <li id="cit<%= i%>Weather"></li>
                                        </ul>
                                    </div>
                                </div>
                                <%}%>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <%}else{%>
                    <div class="container">
                        <p class="h4">
                            <a href="/login">Accedi</a> e inserisci delle città tra
                            i preferiti nell'area personale per mostrare dati in tempo
                            reale!
                        </p>
                    </div>
                    <%}%>
        </section>

        <hr class="section-divider">

        <!-- Swiper cards -->
        <div class="container-fluid mb-5">
            <!-- Slider main container-->
            <div class="swiper swiperQuotes">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="quoteBox">
                            <img src="images/quote.png" class="quote">
                            <div class="content">
                                <p>Chi desidera vedere l'arcobaleno, deve imparare ad amare la pioggia</p>
                            </div>
                            <div class="details">
                                <h5>Paolo Coelho</h5>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="quoteBox">
                            <img src="images/quote.png" class="quote">
                            <div class="content">
                                <p>L'aria fresca della sera è il respiro del vento che si addormenta placido tra le
                                    braccia della notte</p>
                            </div>
                            <div class="details">
                                <h5>Umberto eco</h5>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="quoteBox">
                            <img src="images/quote.png" class="quote">
                            <div class="content">
                                <p>Chi può distinguere il mare da ciò che vi si riflette? O dire dove finisce la pioggia
                                    e comincia la malinconia?</p>
                            </div>
                            <div class="details">
                                <h5>Haruki Murakami</h5>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="quoteBox">
                            <img src="images/quote.png" class="quote">
                            <div class="content">
                                <p>Il tempo è una grande metafora della vita – a volte va bene, a volte va male, e non
                                    c’è niente che tu possa fare, se non portarti un ombrello</p>
                            </div>
                            <div class="details">
                                <h5>Terri Guillemets</h5>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="quoteBox">
                            <img src="images/quote.png" class="quote">
                            <div class="content">
                                <p>Il problema con le previsioni del tempo è che troppo spesso sono giuste quando non ci
                                    servono e troppo spesso errate quando ci servono</p>
                            </div>
                            <div class="details">
                                <h5>Patrick Young</h5>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="quoteBox">
                            <img src="images/quote.png" class="quote">
                            <div class="content">
                                <p>Il tramonto è delizioso, la pioggia è rinfrescante, vento ci tira sù, la neve è
                                    esilarante; non esiste il cattivo tempo ma solo diversi tipi di bel tempo</p>
                            </div>
                            <div class="details">
                                <h5>John Ruskin</h5>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="quoteBox">
                            <img src="images/quote.png" class="quote">
                            <div class="content">
                                <p>A volte vorrei essere il tempo: avreste parlato di me in ogni conversazione. E quando
                                    piovesse, sarei l’argomento del giorno</p>
                            </div>
                            <div class="details">
                                <h5>John Mayer</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination mb-5"></div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="position-relative z-index-10 d-print-none">
            <div class="py-6 bg-gray-200 text-muted">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 mb-5 mb-lg-0">
                            <div class="fw-bold text-uppercase text-dark mb-3">Meteo</div>
                            <p>Previsioni in tempo reale e in tutto il mondo</p>
                        </div>
                        <div class="col-lg-2 col-md-6 mb-5 mb-lg-0">
                            <h6 class="text-uppercase text-dark mb-3">Aree</h6>
                            <ul class="list-unstyled">
                                <li><a class="text-muted" href="/aree?nomeArea=europe">Europa</a></li>
                                <li><a class="text-muted" href="/aree?nomeArea=asia">Asia</a></li>
                                <li><a class="text-muted" href="/aree?nomeArea=americas">America</a></li>
                                <li><a class="text-muted" href="/aree?nomeArea=africa">Africa</a></li>
                                <li><a class="text-muted" href="/aree?nomeArea=oceania">Oceania</a></li>
                            </ul>
                        </div>
                        <div class="col-lg-2 col-md-6 mb-5 mb-lg-0">
                            <h6 class="text-uppercase text-dark mb-3">Autenticazione</h6>
                            <ul class="list-unstyled">
                                <li><a class="text-muted" href="/login">Accedi </a></li>
                                <li><a class="text-muted" href="/registrazione">Registrati</a></li>
                            </ul>
                        </div>
                        <div class="col-lg-4">
                            <h6 class="text-uppercase text-dark mb-3">Rimani aggiornato</h6>
                            <p class="mb-3"> Accedi o iscriviti se non sei già registrato per rimanere aggiornato!
                            </p>
                            <form action="/registrazione" id="newsletter-form">
                                <div class="input-group mb-3">
                                    <input class="form-control bg-transparent border-dark border-end-0" type="email"
                                        placeholder="Inserisci la tua mail" aria-label="Your Email Address">
                                    <button class="btn btn-outline-dark border-start-0" type="submit"> <i
                                            class="fa fa-paper-plane text-lg"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Script -->

        <!-- Bootstrap -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
            crossorigin="anonymous"></script>

        <!-- Swiper -->
        <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

        <!-- Javascript -->
        <script src="js/meteo.js"></script>
        <script src="js/index.js"></script>
        <script src="js/darkMode.js"></script>


</body>

</html>