doctype html
#x-app.x-app(@dragenter.prevent @dragover.prevent @drop.prevent)
    LoginPage(v-if="!API.isLoggedIn" v-bind="loginPageBind" v-on="loginPageEvent")

    VRCXUpdateDialog(v-bind="vrcxUpdateDialogBind" v-on="vrcxUpdateDialogEvent")

    //- menu
    .x-menu-container
        //- download progress, update pending
        .pending-update(v-if='updateInProgress' @click='showVRCXUpdateDialog')
            el-progress(
                type='circle'
                width='50'
                stroke-width='3'
                :percentage='updateProgress'
                :format='updateProgressText')
        .pending-update(v-else-if='pendingVRCXUpdate || pendingVRCXInstall')
            el-button(
                type='default'
                @click='showVRCXUpdateDialog'
                size='mini'
                icon='el-icon-download'
                circle
                style='font-size: 14px; height: 50px; width: 50px')

        NavMenu(ref='menu' @select='selectMenu' :menu-active-index='menuActiveIndex')

    //- ### Tabs ###
    template(v-if='API.isLoggedIn')
        FeedTab(v-bind='feedTabBind' v-on='feedTabEvent')

        GameLogTab(v-bind='gameLogTabBind' v-on='gameLogTabEvent')

        PlayerListTab(v-bind='playerListTabBind' v-on='playerListTabEvent')

        SearchTab(v-bind='searchTabBind' v-on='searchTabEvent')

        FavoritesTab(v-bind='favoritesTabBind' v-on='favoritesTabEvent')

        FriendLogTab(v-bind='friendLogTabBind')

        ModerationTab(v-bind='moderationTabBind')

        NotificationTab(v-bind='notificationTabBind' v-on='notificationTabEvent')

        ProfileTab(v-bind='profileTabBind' v-on='profileTabEvent')

        FriendListTab(v-bind='friendsListTabBind' v-on='friendsListTabEvent')

        KeepAlive
            ChartsTab(v-if='menuActiveIndex === "charts"' v-bind='chartsTabBind' v-on='chartsTabEvent')

        //- settings
        include ./mixins/tabs/settings.pug
        +settingsTab

        SideBar(v-bind='sideBarTabBind' v-on='sideBarTabEvent')

        //- ## Dialogs ## -\\
        include ./mixins/dialogs/dialogs.pug
        +dialogs

    //- el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="templateDialog" :visible.sync="templateDialog.visible" :title="$t('dialog.template_dialog.header')" width="450px")