{{template "base" .}}
{{define "title"}}Profilo di @{{ .User.Username }} • PHC{{end}}
{{define "body"}}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="/public/js/profilo.min.js"></script>
<section x-data="profilo">
    <h1>Profilo di @{{ .User.Username }}</h1>
    <p class="center">
        <a class="button" href="/logout">Logout</a>
    </p>
</section>
<section>
    <h2>Appunti e Dispense</h2>
    <p>
        Per gestire i tuoi appunti e le tue dispense caricate nella sezione <a href="/appunti">Appunti</a> del sito vai
        <a href="/appunti/condivisi">alla pagina appunti condivisi</a>.
    </p>
</section>
<section>
    <h2>Impostazioni</h2>
    <div class="card-list">
        <form class="card" action="/profile/impostazioni" method="POST">
            <div class="title">
                Sito PHC
            </div>
            <p>
                Aggiorna i campi relativi al sito del PHC, l'immagine del profilo verrà visualizzata sulla tua pagina utente <a href="#">phc.dm.unipi.it/u/{{ .User.Username }}</a> e nella lista di <a href="/utenti">tutti gli utenti</a>.
            </p>
            <div class="field-set">
                <label for="website-nickname">Nickname</label>
                <input type="text" name="nickname" id="website-nickname" placeholder="{{ .User.Username }}">
                <label for="website-profile-picture">Immagine Profilo</label>
                <input type="file" name="picture" id="website-profile-picture">
            </div>
            <p>
                Puoi anche aggiungere link ad altri tuoi profili su siti esterni (quando riempi l'ultimo campo se ne crea uno nuovo sotto)
            </p>
            <div class="field-set">
                <label for="website-link-1">Link 1</label>
                <input type="text" name="link" id="website-link-1"
                    placeholder="https://github.com/...">
                <label for="website-link-2">Link 2</label>
                <input type="text" name="link" id="website-link-2"
                    placeholder="https://twitter.com/...">
                <label for="website-link-3">Link 3</label>
                <input type="text" name="link" id="website-link-3"
                    placeholder="https://news.ycombinator.com/user?id=...">
            </div>
            <div class="field">
                <button class="primary">Aggiorna</button>
            </div>
        </form>
        <form class="card" action="/profile/impostazioni" method="POST">
            <div class="title">
                Informazioni Utente
            </div>
            <p>
                Aggiorna i campi modificabili dell'account Poisson
            </p>
            <div class="field-set">
                <label for="user-username">Username</label>
                <input type="text" readonly name="username" id="user-username" value="{{ .User.Username }}">
                <label for="user-name">Nome</label>
                <input type="text" readonly name="name" id="user-name" value="{{ .User.Name }}">
                <label for="user-surname">Cognome</label>
                <input type="text" readonly name="surname" id="user-surname" value="{{ .User.Surname }}">
                <label for="user-email">Email</label>
                <input type="text" readonly name="email" id="user-email" value="{{ .User.Email }}">
            </div>
            <div class="field">
                <button class="primary">Aggiorna</button>
            </div>
        </form>
        <form x-data="passwordForm" class="card" action="/profile/impostazioni" method="POST">
            <div class="title">
                Modifica Password
            </div>
            <p>
                Aggiorna la password di Poisson
            </p>
            <div class="field-set">
                <label for="pass-username">Username</label>
                <input type="text" readonly name="username" id="pass-username" value="{{ .User.Username }}">
                <label for="pass-password">Password</label>
                <input type="password" name="password" id="pass-password" :class="!passwordSame ? 'error' : ''"
                    x-model="password" @input="onUpdate" placeholder="In realtà anche questo non funge...">
                <label for="pass-password-2">Ripeti Password</label>
                <input type="password" name="password-2" id="pass-password-2" :class="!passwordSame ? 'error' : ''"
                    x-model="passwordAgain" @input="onUpdate" placeholder="In realtà anche questo non funge...">
            </div>
            <div class="field">
                <button class="primary">Aggiorna Password</button>
            </div>
        </form>
    </div>
</section>
<section>
    <h2>Recupero Credenziali Poisson</h2>
    <p>
        Per il recupero credenziali vieni direttamente al PHC a parlarne con calma con noi altrimenti puoi inviaci una email
        all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a> e poi recuperare le nuove credenziali sul
        sito <a href="https://credenziali.phc.dm.unipi.it/">credenziali.phc.dm.unipi.it</a>.
    </p>
</section>
{{end}}