<template>
    <div>
        <q-header reveal elevated class="bg-primary text-white">
            <q-toolbar
                    color="primary"
                    :glossy="$q.theme === 'mat'"
                    :inverted="$q.theme === 'ios'"
                    class="toolbar">

                <q-btn
                        flat
                        dense
                        round
                        @click="leftDrawerOpen = !leftDrawerOpen"
                        aria-label="Menu">
                    <q-icon name="menu"/>
                </q-btn>


                <div v-if="$q.platform.is.desktop">
                    <!--I'm only rendered on desktop!-->
                </div>

                <div v-if="$q.platform.is.mobile">
                    <!--I'm only rendered on mobile!-->
                </div>

                <div v-if="$q.platform.is.electron">
                    <!--I'm only rendered on Electron!-->
                </div>

                <q-btn ripple
                       size="md"
                       id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
                       class="btnNewVersShow" @click="RefreshApp" :label="$t('notification.newVersionAvailable')"/>


                <q-toolbar-title>
                    <q-avatar>
                        <img :src="imglogo" height="27">
                    </q-avatar>
                    {{getappname}}
                    <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
                </q-toolbar-title>


                <!--
                                <div v-if="isAdmin">
                                    <q-btn flat dense round aria-label="">
                                        <q-icon :class="clCloudUpload" nametranslate="cloud_upload"></q-icon>
                                    </q-btn>

                                    <q-btn flat dense round aria-label="">
                                        <q-icon :class="clCloudUp_Indexeddb" nametranslate="arrow_upward"></q-icon>
                                    </q-btn>

                                </div>
                -->

                <q-btn
                        v-if="!isonline"
                        flat
                        dense
                        round
                        @click=""
                        aria-label="Connection"
                >
                    <q-icon :name="iconConn" :class="clIconConn"></q-icon>
                    <q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
                </q-btn>


                <q-btn-dropdown
                        stretch
                        flat
                        :label="langshort"
                        auto-close
                >
                    <q-list bordered>
                        <q-item clickable v-ripple

                                v-for="langrec in selectOpLang" :key="langrec.value"
                                @click="lang = langrec.value">
                            <q-item-section avatar>
                                <img :src="langrec.image" class="flagimg">
                            </q-item-section>
                            <q-item-section>
                                {{langrec.label}}
                            </q-item-section>
                        </q-item>
                    </q-list>
                </q-btn-dropdown>


                <!--
                <message-popover></message-popover>
                -->

                <!--
                <div class="right-itens">
                    <label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
                </div>-->

                <q-btn dense flat round icon="menu" @click="right = !right"/>

            </q-toolbar>

        </q-header>

        <q-drawer side="left"
                  bordered
                  show-if-above
                  :breakpoint="500"
                  v-model="leftDrawerOpen"
                  :content-class="['bg-grey-1', 'q-pa-sm']"
                  :content-style="{padding: '0px'}"
        >
            <drawer></drawer>

        </q-drawer>

        <q-drawer v-model="right" side="right" overlay bordered>
            <div id="profile">
                <q-img class="absolute-top" src="https://cdn.quasar-framework.org/img/material.png"
                       style="height: 150px">
                    <div class="absolute-bottom bg-transparent">

                        <q-avatar class="q-mb-sm">
                            <img src="../../statics/images/avatar-1.svg">
                        </q-avatar>
                        <div v-if="Username" class="text-weight-bold">{{ Username }}</div>
                        <div v-else class="text-italic">{{ $t('user.loggati') }}</div>

                        <!--<span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>-->
                        <!--<span class="text-white background-red" v-else> {{$t('reg.non_verificato')}} </span>-->

                        <div v-if="Username" id="user-actions">
                            <q-btn round color="primary" icon="person"></q-btn>
                            <q-btn round color="warning" icon="lock"></q-btn>
                            <q-btn round color="secondary" icon="exit_to_app" @click='logoutHandler'></q-btn>
                        </div>

                    </div>
                </q-img>

            </div>
        </q-drawer>
    </div>
</template>

<script lang="ts" src="./Header.ts">
</script>

<style lang="scss" scoped>
    @import './Header.scss';
</style>

