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="downloadInProgress" @click="showDownloadDialog")
                    el-progress(type="circle" width="50" stroke-width="3" :percentage="downloadProgress" :format="downloadProgressText")
                .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")
                    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
                include ./mixins/tabs/moderation.pug
                +moderationTab()

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