<template>
  <q-page padding>
    <div class="text-h6 q-mb-md">Plus</div>

    <q-list>
      <!-- Offline queue -->
      <q-item>
        <q-item-section avatar><q-icon name="cloud_sync" /></q-item-section>
        <q-item-section>
          <q-item-label>File d'attente hors ligne</q-item-label>
          <q-item-label caption>{{ offline.pendingCount }} action(s) en attente</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-btn flat dense icon="sync" :loading="offline.syncing" @click="offline.syncQueue()"
            :disable="!offline.online || offline.pendingCount === 0" />
        </q-item-section>
      </q-item>

      <q-separator />

      <!-- Connectivity -->
      <q-item>
        <q-item-section avatar>
          <q-icon :name="offline.online ? 'wifi' : 'wifi_off'" :color="offline.online ? 'positive' : 'negative'" />
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ offline.online ? 'En ligne' : 'Hors ligne' }}</q-item-label>
        </q-item-section>
      </q-item>

      <q-separator />

      <!-- User -->
      <q-item>
        <q-item-section avatar><q-icon name="person" /></q-item-section>
        <q-item-section>
          <q-item-label>{{ auth.user || '—' }}</q-item-label>
        </q-item-section>
      </q-item>

      <q-separator />

      <!-- Logout -->
      <q-item clickable @click="auth.doLogout()">
        <q-item-section avatar><q-icon name="logout" color="negative" /></q-item-section>
        <q-item-section>
          <q-item-label class="text-negative">Déconnexion</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

    <div class="text-caption text-grey text-center q-mt-xl">
      Targo Field v0.1.0
    </div>
  </q-page>
</template>

<script setup>
import { useOfflineStore } from 'src/stores/offline'
import { useAuthStore } from 'src/stores/auth'

const offline = useOfflineStore()
const auth = useAuthStore()
</script>
