doctype html
html
    head
        meta(http-equiv='Content-Type' content='text/html;charset=utf-8')
        meta(http-equiv='Cache-Control' content='no-cache')
        meta(http-equiv='referrer' content='no-referrer')
        meta(http-equiv='viewport' content='width=device-width,initial-scale=1,user-scalable=no')
        title VRCX
        link(rel='preconnect' href='https://api.vrchat.cloud')
        link(rel='preconnect' href='https://d348imysud55la.cloudfront.net')
        link(rel='stylesheet' href='app.css')
        link(rel='stylesheet' href='flags.css')
        link(rel='stylesheet' href='animated-emoji.css')
    body
        #x-app.x-app(style='display: none' @dragenter.prevent @dragover.prevent @drop.prevent)
            //- login
            include ./mixins/loginPage.pug
            +loginPage

            //- 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')

                el-menu(ref='menu' collapse @select='selectMenu' default-active='feed')
                    mixin menuitem(index, name, icon)
                        el-menu-item(index=index)
                            i(class=icon)
                            template(#title)
                                span= name
                    +menuitem('feed', "{{ $t('nav_tooltip.feed') }}", 'el-icon-news')
                    +menuitem('gameLog', "{{ $t('nav_tooltip.game_log') }}", 'el-icon-s-data')
                    +menuitem('playerList', "{{ $t('nav_tooltip.player_list') }}", 'el-icon-tickets')
                    +menuitem('search', "{{ $t('nav_tooltip.search') }}", 'el-icon-search')
                    +menuitem('favorite', "{{ $t('nav_tooltip.favorites') }}", 'el-icon-star-off')
                    +menuitem('friendLog', "{{ $t('nav_tooltip.friend_log') }}", 'el-icon-notebook-2')
                    +menuitem('moderation', "{{ $t('nav_tooltip.moderation') }}", 'el-icon-finished')
                    +menuitem('notification', "{{ $t('nav_tooltip.notification') }}", 'el-icon-bell')
                    +menuitem('friendsList', "{{ $t('nav_tooltip.friend_list') }}", 'el-icon-s-management')
                    +menuitem('profile', "{{ $t('nav_tooltip.profile') }}", 'el-icon-user')
                    +menuitem('settings', "{{ $t('nav_tooltip.settings') }}", 'el-icon-s-tools')

            //- ### Tabs ###
            template(v-if='API.isLoggedIn')
                //- feed
                include ./mixins/tabs/feed.pug
                +feedTab

                //- gameLog
                include ./mixins/tabs/gameLog.pug
                +gameLogTab

                //- playerList
                include ./mixins/tabs/playerList.pug
                +playerListTab

                //- search
                include ./mixins/tabs/search.pug
                +searchTab

                //- favorite
                include ./mixins/tabs/favorites.pug
                +favoritesTab

                //- friendLog
                include ./mixins/tabs/friendLog.pug
                +friendLogTab

                //- moderation
                moderation-tab(
                    v-if='$refs.menu?.activeIndex === "moderation"'
                    :Api='API'
                    :table-data='playerModerationTable'
                    :show-user-dialog='showUserDialog'
                    :shift-held='shiftHeld')

                //- notification
                include ./mixins/tabs/notifications.pug
                +notificationsTab

                //- profile
                include ./mixins/tabs/profile.pug
                +profileTab

                //- friends list
                include ./mixins/tabs/friendsList.pug
                +friendsListTab

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

                include ./mixins/friendsListSidebar.pug
                +friendsListSidebar

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

            include ./mixins/dialogs/worldDialog.pug
            +worldDialog

            include ./mixins/dialogs/avatarDialog.pug
            +avatarDialog

            include ./mixins/dialogs/groupDialog.pug
            +groupDialog

            include ./mixins/dialogs/favoritesDialog.pug
            +favoritesDialog

            include ./mixins/dialogs/images.pug
            +images

            include ./mixins/dialogs/newInstance.pug
            +newInstance

            include ./mixins/dialogs/feedFilters.pug
            +feedFilters

            include ./mixins/dialogs/openSourceSoftwareNotice.pug
            +openSourceSoftwareNotice

            include ./mixins/dialogs/groups.pug
            +groups

            include ./mixins/dialogs/currentUser.pug
            +currentUser

            include ./mixins/dialogs/invites.pug
            +invites

            include ./mixins/dialogs/launch.pug
            +launch

            include ./mixins/dialogs/screenshotMetadata.pug
            +screenshotMetadata

            include ./mixins/dialogs/vrcx.pug
            +vrcx

            include ./mixins/dialogs/settings.pug
            +settings

            include ./mixins/dialogs/previousInstances.pug
            +previousInstances

            include ./mixins/dialogs/tags.pug
            +tags

            include ./mixins/dialogs/boops.pug
            +boops

            //- 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")

        script(src='vendor.js')
        script(src='app.js')