{{template "base" .}} 
{{define "title"}}Utenti • PHC{{end}}
{{define "body"}}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
<script src="/public/js/utenti.min.js"></script>
<section x-data="utenti">
    <h2>
        <i class="fas fa-users"></i>
        Lista degli Utenti
    </h2>
    <p>
        Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o
        username di un utente per filtrare la lista in tempo reale. Altrimenti di base in cima
        compariranno gli utenti con più "follower".
    </p>
    <div class="search">
        <div class="compound padded">
            <div class="icon" title="Ordina per">
                <i class="fas fa-sort"></i>
            </div>
            <div class="divider"></div>
            <select x-model="sortMode" @click="updateSortMode()">
                <option value="chronological">Cronologico</option>
                <option value="name">Nome</option>
                <option value="surname">Cognome</option>
            </select>
        </div>
        <div class="compound">
            <input type="text" x-model="searchField" @input="updateSearch()" placeholder="Cerca..." autocomplete="off" />
            <button class="icon" title="In realtà questo tasto è finto">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
    <div class="user-list card-list">
        <template x-for="entry in searchResults" :key="entry.item.uid">
            <div class="user-item card">
                <a class="full-name" :href="'{{ $.Config.UserPagesBaseUrl }}' + entry.item.uid" x-text="
                    sortMode === 'surname' ? 
                        entry.item.cognome + ' ' + entry.item.nome : 
                        entry.item.nome + ' ' + entry.item.cognome
                "></a>
                <template x-if="entry.item.macchinista">
                    <div class="icon" title="Macchinista">
                        <i class="fas fa-wrench"></i>
                    </div>
                </template>
                <!-- <template x-if="entry.score">
                    <span x-text="entry.score"></span>
                </template> -->
            </div>
        </template>
        <div class="spinner" x-ref="spinner" x-show="searchResults.length < searchResultsBuffer.length">
            <i class="fas fa-hourglass"></i>
        </div>
    </div>
</section>
{{end}}