<!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" />

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

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

<body class="bootstrap">

    <header>
        <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="#" 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="/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>

                    </div>
                </div>
            </nav>
        </div>
    </header>

    <div class="container text-center marginTop">
        <div class="row mb-2">
            <div class="col rounded bg-secondary mr-2">
                <p class="lead">nome utente: </p>
            </div>
            <div class="col rounded bg-secondary mr-2">
                <p id="pUser">
                    <%= user%>
                </p>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col rounded bg-secondary mr-2">
                <p class="lead">email: </p>
            </div>
            <div class="col rounded bg-secondary mr-2">
                <p id="pEmail">
                    <%= email%>
                </p>
            </div>
        </div>
        <%if(pref !==undefined) {%>
            <div id="divPref" class="container text-center">
                <p class="h3">città preferite:</p>
                <%for(let el in pref){%>
                    <div class="row mb-2">
                        <div class="col rounded bg-secondary mr-2">
                            <p class="h4">
                                <%= pref[el]%>
                            </p>
                            <button type="text" class="rimuovi btn btn-primary btn-block mb-4">Rimuovi</button>
                        </div>
                    </div>
                    <%}%>
            </div>
            <%}%>
    </div>

    <div class="container text-center mt-5">
        <div class="text-center">
            <p class="h3 mb-3">Modifica i tuoi dati qui</p>
        </div>
        <div id="containerUser" class="container">
            <form id="userForm">
                <div class="form-outline mb-4">
                    <input type="text" name="user" id="user" class="form-control" required />
                    <label class="form-label" for="user">Username</label>
                </div>
                <button type="submit" class="btn btn-primary btn-block mb-4">Aggiorna username</button>
            </form>
        </div>
        <div id="containerEmail" class="container">
            <form id="emailForm">
                <div class="form-outline mb-4">
                    <input type="email" name="mail" id="mail" class="form-control" required />
                    <label class="form-label" for="mail">Indirizzo Email</label>
                </div>
                <button type="submit" class="btn btn-primary btn-block mb-4">Aggiorna e-mail</button>
            </form>
        </div>
        <div id="containerPw" class="container">
            <form id="pwForm">
                <div class="form-outline mb-4">
                    <input type="password" name="pw" id="pw" class="form-control" required />
                    <label class="form-label" for="pw">Password</label>
                </div>
                <button type="submit" class="btn btn-primary btn-block mb-4">Aggiorna password</button>
            </form>
        </div>
        <div id="containerPref" class="container">
            <form id="prefForm">
                <div class="form-outline mb-4">
                    <input type="text" name="pref" id="pref" class="form-control" required />
                    <label class="form-label" for="pref">Città da aggiungere ai preferiti</label>
                </div>
                <button type="submit" class="btn btn-primary btn-block mb-4">Aggiorna città preferite</button>
            </form>
        </div>
    </div>

    <!-- Script -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha256.js"></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>

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

</html>