<script type="text/x-template" id="settings-window">
    <div class="settings-panel" @click.self="close()">
        <div class="settings-window"
             :class="{'maxed': $store.state.pageState['settings'].fullscreen, 'no-sidebar': sidebarVis()}">
            <button class="close-btn minmax-btn"
                    @click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen"
                    :class="{'min': $store.state.pageState['settings'].fullscreen}"></button>
            <button class="close-btn" @click="close()"></button>
            <b-tabs class="no-style" pills vertical content-class="mt-3"
                    v-model="$store.state.pageState['settings'].currentTabIndex">
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/settings.svg" classes="md" name="settings-general"/>
                        </div>
                        <div>
                            {{ $root.getLz('settings.header.general') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <div class="md-option-container">
                            <!-- General Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.general')}}</span>
                            </div>
                            <div class="settings-option-body">
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('term.language')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
                                                    v-model="app.cfg.general.language">
                                                <optgroup :label="index" v-for="(categories, index) in getLanguages()">
                                                    <option v-for="lang in categories" :value="lang.code">
                                                        {{lang.nameNative}}
                                                        ({{
                                                        lang.nameEnglish }})
                                                    </option>
                                                </optgroup>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('term.accountSettings')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="app.appRoute('apple-account-settings')">
                                            {{$root.getLz('term.accountSettings')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('term.privateSession')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="$root.cfg.general.privateEnabled"
                                                   v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.platform !== 'linux'">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.window.openOnStartup')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.cfg.general.onStartup.enabled">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.window.openOnStartup.hidden')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.general.resumebehavior')}}<br>
                                        <small>
                                            {{$root.getLz('settings.option.general.resumebehavior.description')}}<br>
                                            <b>{{$root.getLz('settings.option.general.resumebehavior.locally')}}: </b>
                                            {{$root.getLz('settings.option.general.resumebehavior.locally.description')}}<br>
                                            <b>{{$root.getLz('settings.option.general.resumebehavior.history')}}: </b>
                                            {{$root.getLz('settings.option.general.resumebehavior.history.description')}}
                                        </small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" style="width:180px;"
                                                    v-model="$root.cfg.general.resumeOnStartupBehavior">
                                                <option value="disabled">{{$root.getLz('term.disabled')}}</option>
                                                <option value="local">
                                                    {{$root.getLz('settings.option.general.resumebehavior.locally')}}
                                                </option>
                                                <option value="history">
                                                    {{$root.getLz('settings.option.general.resumebehavior.history')}}
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.general.resumetabs')}}<br>
                                        <small>
                                            {{$root.getLz('settings.option.general.resumetabs.description')}}<br>
                                            <b>{{$root.getLz('settings.option.general.resumetabs.dynamic')}}: </b>
                                            {{$root.getLz('settings.option.general.resumetabs.dynamic.description')}}
                                        </small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" style="width:180px;"
                                                    v-model="$root.cfg.general.resumeTabs.tab">
                                                <option value="dynamic">
                                                    {{$root.getLz('settings.option.general.resumetabs.dynamic')}}
                                                </option>
                                                <option value="home">{{$root.getLz('home.title')}}</option>
                                                <option value="listen_now">{{$root.getLz('term.listenNow')}}</option>
                                                <option value="browse">{{$root.getLz('term.browse')}}</option>
                                                <option value="radio">{{$root.getLz('term.radio')}}</option>
                                                <option value="library-recentlyadded">
                                                    {{$root.getLz('term.recentlyAdded')}}
                                                </option>
                                                <option value="library-songs">{{$root.getLz('term.songs')}}</option>
                                                <option value="library-albums">{{$root.getLz('term.albums')}}</option>
                                                <option value="library-artists">{{$root.getLz('term.artists')}}</option>
                                                <option value="library-videos">{{$root.getLz('term.videos')}}</option>
                                                <option value="podcasts">{{$root.getLz('term.podcasts')}}</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.general.customizeSidebar')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" v-b-modal.modal-1>
                                            {{$root.getLz('settings.option.general.customizeSidebar.customize')}}
                                        </button>
                                    </div>
                                    <b-modal id="modal-1" centered size="lg"
                                             :title="$root.getLz('settings.option.general.customizeSidebar')">
                                        <div class="settings-option-body">
                                            <div class="md-option-line">
                                                <div class="md-option-segment">
                                                    {{ $root.getLz('term.recentlyAdded') }}
                                                </div>
                                                <div class="md-option-segment md-option-segment_auto">
                                                    <label>
                                                        <input type="checkbox"
                                                               v-model="app.cfg.general.sidebarItems.recentlyAdded"
                                                               switch/>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="md-option-line">
                                                <div class="md-option-segment">
                                                    {{ $root.getLz('term.songs') }}
                                                </div>
                                                <div class="md-option-segment md-option-segment_auto">
                                                    <label>
                                                        <input type="checkbox"
                                                               v-model="app.cfg.general.sidebarItems.songs"
                                                               switch/>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="md-option-line">
                                                <div class="md-option-segment">
                                                    {{ $root.getLz('term.albums') }}
                                                </div>
                                                <div class="md-option-segment md-option-segment_auto">
                                                    <label>
                                                        <input type="checkbox"
                                                               v-model="app.cfg.general.sidebarItems.albums"
                                                               switch/>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="md-option-line">
                                                <div class="md-option-segment">
                                                    {{ $root.getLz('term.artists') }}
                                                </div>
                                                <div class="md-option-segment md-option-segment_auto">
                                                    <label>
                                                        <input type="checkbox"
                                                               v-model="app.cfg.general.sidebarItems.artists"
                                                               switch/>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="md-option-line">
                                                <div class="md-option-segment">
                                                    {{ $root.getLz('term.videos') }}
                                                </div>
                                                <div class="md-option-segment md-option-segment_auto">
                                                    <label>
                                                        <input type="checkbox"
                                                               v-model="app.cfg.general.sidebarItems.videos"
                                                               switch/>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="md-option-line">
                                                <div class="md-option-segment">
                                                    {{ $root.getLz('term.podcasts') }}
                                                </div>
                                                <div class="md-option-segment md-option-segment_auto">
                                                    <label>
                                                        <input type="checkbox"
                                                               v-model="app.cfg.general.sidebarItems.podcasts"
                                                               switch/>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </b-modal>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.general.keybindings')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="$root.openSettingsPage('keybindings')">
                                            {{$root.getLz('action.open')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.general.themeUpdateNotification')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.general.themeUpdateNotification"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.general.showLovedTracksInline')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.general.showLovedTracksInline"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{'Local files path'}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="openLocalSongsPathMenu">
                                            {{'Edit Paths'}}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-tab>
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio"/>
                        </div>
                        <div>
                            {{ $root.getLz('settings.header.audio') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <div class="md-option-container">
                            <!-- Audio Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.audio')}}</span>
                            </div>
                            <div class="settings-option-body">
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.audio.quality')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" style="width:180px;"
                                                    v-model="app.cfg.audio.quality"
                                                    v-on:change="changeAudioQuality">
                                                <!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
                                                <!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> -->
                                                <option value="HIGH">
                                                    {{$root.getLz('settings.header.audio.quality.high')}}
                                                    ({{$root.getLz('settings.header.audio.quality.high.description')}})
                                                </option>
                                                <option value="STANDARD">
                                                    {{$root.getLz('settings.header.audio.quality.standard')}}
                                                    ({{$root.getLz('settings.header.audio.quality.standard.description')}})
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('term.audioControls')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" onclick="app.modals.audioControls = true">
                                            {{$root.getLz('term.audioControls')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.audio.changePlaybackRate')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" onclick="app.modals.audioPlaybackRate = true">
                                            {{$root.getLz('settings.option.audio.playbackRate.change')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.audio.seamlessTransition')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.audio.seamless_audio"
                                                   v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality')}}
                                        <br>
                                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.description')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.advanced.AudioContext"
                                                   v-on:change="toggleAudioContext"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                                    <div class="md-option-segment">
                                        {{$root.getLz('term.equalizer')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" onclick="app.modals.equalizer = true">
                                            {{$root.getLz('term.equalizer')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                                    <div class="md-option-segment" style="white-space: pre-line;">
                                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}}
                                        <small>{{app.cfg.audio.equalizer.vibrantBass != 0 ||
                                            app.cfg.audio.maikiwiAudio.spatial
                                            === true || app.cfg.audio.maikiwiAudio.ciderPPE === true ?
                                            `${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}`
                                            :
                                            $root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.audio.normalization"
                                                   v-on:change="toggleNormalization"
                                                   :disabled="app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line"
                                     v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization && app.cfg.audio.advanced">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.audio.dbspl.display')}}
                                        <br>
                                        <small>{{$root.getLz('settings.option.audio.dbspl.description')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.audio.dBSPL" switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.cfg.audio.dBSPL">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.audio.dbfs.calibration')}}
                                        <br>
                                        <small>{{$root.getLz('settings.option.audio.dbfs.description')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="number" v-model="app.cfg.audio.dBSPLcalibration"/>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-tab>
                <b-tab v-if="app.cfg.advanced.AudioContext">
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs"/>
                        </div>
                        <div>
                            {{ $root.getLz('settings.option.audio.audioLab') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <audiolabs-page/>
                    </div>
                </b-tab>
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles"/>
                        </div>
                        <div>
                            {{ $root.getLz('settings.header.visual.styles') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <installed-themes/>
                    </div>
                </b-tab>
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual"/>
                        </div>
                        <div>
                            {{ $root.getLz('settings.header.visual') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <div class="md-option-container">
                            <!-- Visual Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.visual')}}</span>
                            </div>
                            <div class="settings-option-body">
                                <!--<div class="md-option-line">
                                        <div class="md-option-segment">
                                            {{$root.getLz('settings.header.visual.theme')}}
                                        </div>
                                        <div class="md-option-segment md-option-segment_auto">
                                            <button class="md-btn md-btn-block" @click="$root.appRoute('installed-themes')">
                                                {{$root.getLz('settings.option.visual.theme.manageStyles')}}
                                            </button>
                                        </div>
                                    </div>-->
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz("settings.option.visual.windowStyle")}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select"
                                                    v-model="$root.cfg.visual.directives.windowLayout">
                                                <option value="default">Maverick</option>
                                                <option value="twopanel">Mojave</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" @change="windowBgStyleChange"
                                                    v-model="app.cfg.visual.window_background_style">
                                                <option value="none">
                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
                                                </option>
                                                <option value="artwork">
                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
                                                </option>
                                                <option value="image">
                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
                                                </option>
                                                <option value="color">
                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.color')}}
                                                </option>
                                                <option v-if="$root.platform == 'win32'" value="mica">
                                                    Mica (Beta)
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line child"
                                     v-if="app.cfg.visual.window_background_style == 'color'">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.windowColor')}}
                                    </div>
                                    <div class="md-option-segment_auto">
                                        <input type="color" v-model="app.cfg.visual.windowColor"/>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.customAccentColor')}}
                                    </div>
                                    <div class="md-option-segment_auto">
                                        <input type="checkbox" v-model="app.cfg.visual.customAccentColor"
                                               :disabled="app.cfg.visual.purplePodcastPlaybackBar" switch/>
                                    </div>
                                </div>
                                <div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.accentColor')}}
                                    </div>
                                    <div class="md-option-segment_auto">
                                        <input type="color" v-model="app.cfg.visual.accentColor"/>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.purplePodcastPlaybackBar')}}
                                    </div>
                                    <div class="md-option-segment_auto">
                                        <input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar"
                                               :disabled="app.cfg.visual.customAccentColor" switch/>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
                                        <small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" style="width:180px;"
                                                    v-model="app.cfg.visual.hw_acceleration"
                                                    @change="promptForRelaunch()">
                                                <option value="default">
                                                    {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
                                                </option>
                                                <option value="webgpu">
                                                    {{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
                                                </option>
                                                <option value="disabled">{{$root.getLz('term.disabled')}}</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.showPersonalInfo')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.visual.showuserinfo"
                                                   v-on:change="toggleUserInfo" switch/>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <!-- Window Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.window')}}</span>
                            </div>
                            <div class="settings-option-body">
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz("settings.option.window.maxElementScale")}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select @change="$root.setWindowScaleFactor()" class="md-select"
                                                    v-model="app.cfg.visual.maxElementScale">
                                                <option value="-1">Default (1.5x)</option>
                                                <option value="1">1.0x</option>
                                                <option value="1.1">1.1x</option>
                                                <option value="1.2">1.2x</option>
                                                <option value="1.3">1.3x</option>
                                                <option value="1.4">1.4x</option>
                                                <option value="1.5">1.5x</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.platform !== 'darwin'">
                                    <div class="md-option-segment">
                                        {{$root.getLz("settings.option.window.close_button_hide")}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.platform !== 'darwin'">
                                    <div class="md-option-segment">
                                        {{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
                                        <small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
                                                   @change="promptForRelaunch()"/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.platform !== 'darwin'">
                                    <div class="md-option-segment">
                                        {{$root.getLz("settings.option.window.windowControlStyle")}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" v-model="app.cfg.visual.windowControlPosition">
                                                <option value="0">
                                                    {{$root.getLz("settings.option.window.windowControlStyle.right")}}
                                                </option>
                                                <option value="1">
                                                    {{$root.getLz("settings.option.window.windowControlStyle.left")}}
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <!-- Advanced Visual -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.advanced')}}</span>
                            </div>
                            <div class="settings-option-body">
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.animatedArtwork')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" v-model="app.cfg.visual.animated_artwork">
                                                <option value="always">
                                                    {{$root.getLz('settings.header.visual.animatedArtwork.always')}}
                                                </option>
                                                <option value="limited">
                                                    {{$root.getLz('settings.header.visual.animatedArtwork.limited')}}
                                                </option>
                                                <option value="disabled">
                                                    {{$root.getLz('settings.header.visual.animatedArtwork.disable')}}
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line"
                                     v-if="app.cfg.visual.animated_artwork == 'always' || app.cfg.visual.animated_artwork == 'limited'">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.animatedArtworkQuality')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select"
                                                    v-model="app.cfg.visual.animated_artwork_qualityLevel">
                                                <option value="0">
                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
                                                </option>
                                                <option value="1">
                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.medium')}}
                                                </option>
                                                <option value="2">
                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
                                                </option>
                                                <option value="3">
                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
                                                </option>
                                                <option value="4">
                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.animatedWindowBackground')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-tab>
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins"/>
                        </div>
                        <div>
                            {{ $root.getLz('term.plugins') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <plugins-github/>
                    </div>
                </b-tab>
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics"/>
                        </div>
                        <div>
                            {{ $root.getLz('settings.header.lyrics') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <div class="md-option-container">
                            <!-- Lyric Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.lyrics')}}</span>
                            </div>
                            <div class="settings-option-body">
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" v-model="app.cfg.lyrics.mxm_language">
                                                <option value='disabled'>Disabled</option>
                                                <option value='afrikaans'>Afrikaans</option>
                                                <option value='albanian'>Albanian</option>
                                                <option value='arab'>Arabic</option>
                                                <option value='armenian'>Armenian</option>                                    
                                                <option value='azerbaijani'>Azerbaijani</option>
                                                <option value='bengali'>Bengali</option>
                                                <option value='bosnian'>Bosnian</option>
                                                <option value='brazilian'>Brazilian</option>  
                                                <option value='bulgarian'>Bulgarian</option>   
                                                <option value='chinese'>Chinese (Simplified)</option>
                                                <option value='chinese-trad'>Chinese (Traditional)</option>                      
                                                <option value='chinese-romaji'>Romanized Chinese</option>
                                                <option value='croatian'>Croatian</option>
                                                <option value='czech'>Czech</option>
                                                <option value='danish'>Danish</option> 
                                                <option value='dutch'>Dutch</option>                       
                                                <option value='estonian'>Estonian</option>
                                                <option value='english'>English</option>
                                                <option value='farsi'>Farsi</option>
                                                <option value='filipino'>Filipino</option>
                                                <option value='french'>French</option>
                                                <option value='georgian'>Georgian</option>
                                                <option value='german'>German</option>
                                                <option value='greek'>Greek</option>
                                                <option value='gujarati'>Gujarati</option>
                                                <option value='gujarati-romanized'>Romanized Gujarati</option>
                                                <option value='haitian-creole'>Haitian-Creole</option>
                                                <option value='hebrew'>Hebrew</option>
                                                <option value='hindi'>Hindi</option>
                                                <option value='hindi-romanized'>Romanized Hindi</option>
                                                <option value='hungarian'>Hungarian</option>
                                                <option value='icelandic'>Icelandic</option>
                                                <option value='bahasa-indonesia'>Indonesian</option>
                                                <option value='italian'>Italian</option>
                                                <option value='japanese'>Japanese</option>
                                                <option value='japanese-romaji'>Romanized Japanese</option>
                                                <option value='kannada'>Kannada</option>
                                                <option value='kazakh'>Kazakh</option>
                                                <option value='kirghiz'>Kirghiz</option>
                                                <option value='korean'>Korean</option>
                                                <option value='korean-romaji'>Romanized Korean</option>
                                                <option value='lao'>Lao</option>
                                                <option value='latvian'>Latvian</option>
                                                <option value='lithuanian'>Lithuanian</option>
                                                <option value='macedonian'>Macedonian</option>
                                                <option value='malay'>Malay</option>
                                                <option value='malayalam'>Malayalam</option>
                                                <option value='mongolian'>Mongolian</option>
                                                <option value='nepali'>Nepali</option>
                                                <option value='norwegian'>Norwegian</option>
                                                <option value='panjabi'>Panjabi</option>
                                                <option value='polish'>Polish</option>
                                                <option value='portuguese'>Portuguese</option>
                                                <option value='romanian'>Romanian</option>
                                                <option value='russian'>Russian</option>
                                                <option value='serbian'>Serbian</option>
                                                <option value='slovak'>Slovak</option>
                                                <option value='slovenian'>Slovenian</option>
                                                <option value='spanish'>Spanish</option>
                                                <option value='suomi'>Suomi</option>
                                                <option value='swedish'>Swedish</option>
                                                <option value='tamil'>Tamil</option>
                                                <option value='tamil-romanized'>Romanized Tamil</option>
                                                <option value='telugu'>Telugu</option>
                                                <option value='telugu-romanized'>Romanized Telugu</option>
                                                <option value='thai'>Thai</option>
                                                <option value='turkish'>Turkish</option>
                                                <option value='ukrainian'>Ukrainian</option>
                                                <option value='urdu'>Urdu</option>
                                                <option value='urdu-romaji'>Romanized Urdu</option>
                                                <option value='uzbek'>Uzbek</option>
                                                <option value='vietnamese'>Vietnamese</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.lyrics.enableYoutubeLyrics')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.lyrics.enableQQLyrics')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch/>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-tab>
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity"/>
                        </div>
                        <div>
                            {{ $root.getLz('settings.header.connectivity') }}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <div class="md-option-container">
                            <!-- Connectivity Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.connectivity')}}</span>
                            </div>
                            <div class="settings-option-body">

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.playbackNotifications')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.general.playbackNotifications"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <!-- DiscordRPC -->
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC.clientName')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <select class="md-select" v-model="app.cfg.connectivity.discord_rpc.client">
                                                <option value="Cider">{{$root.getLz('app.name')}}</option>
                                                <option value="AppleMusic">{{$root.getLz('term.appleMusic')}}
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC.hideButtons')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC.hideTimestamp')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br/>
                                        <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
                                            {album},
                                            {trackNumber}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="text"
                                                   v-model="app.cfg.connectivity.discord_rpc.details_format"/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}}
                                        <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
                                            {album},
                                            {trackNumber}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format"/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.discordRPC.reload')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="reloadDiscordRPC()">
                                            {{$root.getLz('menubar.options.reload')}}
                                        </button>
                                    </div>
                                </div>

                                <!-- LastFM -->
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" id="lfmConnect"
                                                @click="app.cfg.connectivity.lastfm.enabled ? lfmDisconnect() : lfmAuthorize()">
                                            {{$root.getLz(`term.${$root.cfg.connectivity.lastfm.enabled ? "disconnect" :
                                            "connect"}`)}}<br>
                                            <small>{{app.cfg.connectivity.lastfm.enabled ?
                                                `${$root.getLz('term.authed')}:
                                                ${$root.cfg.connectivity.lastfm.secrets.username}` : '' }}</small>
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="lastfmConnecting">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.manualToken')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <form @submit.prevent="submitToken">
                                                <input type="text" autofocus id="lfmToken"/>
                                                <input type="submit" class="md-btn"
                                                       @value="$root.getLz('action.submit')"/>
                                            </form>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.delay')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="number" min="50" max="100"
                                                   v-model="app.cfg.connectivity.lastfm.scrobble_after"/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}}
                                        <small>{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop.description')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>
                                <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterTypes')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" @change="filterChange" value="song">{{$root.getLz('term.songs')}}<br>
                                            <input type="checkbox" @change="filterChange" value="musicVideo">{{$root.getLz('term.musicVideos')}}<br>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-tab>
                <b-tab>
                    <template #title>
                        <div>
                            <svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced"/>
                        </div>
                        <div>
                            {{$root.getLz('settings.header.advanced')}}
                        </div>
                    </template>
                    <div class="settings-tab-content">
                        <div class="md-option-container">
                            <!-- Debug Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.debug')}}</span>
                            </div>
                            <div class="settings-option-body">
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.debug.copy_log')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="copyLogs">
                                            {{$root.getLz('action.copy')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.debug.openAppData')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="openAppData">
                                            {{$root.getLz('action.open')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        Performant Logging
                                        <small>Disables debug logging, resulting in a slightly faster Cider. (Requires
                                            relaunch)</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch/>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Experimental Settings -->
                            <div class="md-option-header">
                                <span>{{$root.getLz('settings.header.experimental')}}</span>
                            </div>
                            <div class="settings-option-body">

                                <!--<div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.plugin.github.explore')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="$root.openSettingsPage('github-plugins')">{{
                                            $root.getLz("settings.option.visual.plugin.github.explore") }}
                                        </button>
                                    </div>
                                </div> -->

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.experimental.reinstallwidevine')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <button class="md-btn" @click="reinstallWidevineCDM">
                                            {{$root.getLz('settings.option.experimental.reinstallwidevine')}}
                                        </button>
                                    </div>
                                </div>

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        Immersive Fullscreen Test
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
                                                   @click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.experimental.unknownPlugin')}}
                                        <br>
                                        <small>{{$root.getLz('settings.option.experimental.unknownPlugin.description')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.advanced.experiments.includes('unknown-sources')"
                                                   @click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        Use MusicKit V3
                                        <small>Requires relaunch</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.advanced.experiments.includes('ampv3')"
                                                   @click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.advanced.playlistTrackMapping')}}
                                        <br>
                                        <small>{{$root.getLz('settings.option.advanced.playlistTrackMapping.description')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        Local Files
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.advanced.experiments.includes('localLibrary')"
                                                   @click="app.cfg.advanced.experiments.includes('localLibrary') ? removeExperiment('localLibrary') : addExperiment('localLibrary')"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.experimental.compactUI')}}
                                        <small
                                                v-if="!!app.getThemeDirective('forceUI')">{{$root.getLz('term.themeManaged')}}</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox"
                                                   v-model="app.cfg.advanced.experiments.includes('compactui')"
                                                   @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
                                                   switch :disabled="!!app.getThemeDirective('forceUI')"/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.experimental.inline_playlists')}}
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" disabled
                                                   v-model="app.cfg.advanced.experiments.includes('inline-playlists')"
                                                   @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')"
                                                   switch/>
                                        </label>
                                    </div>
                                </div>

                                <div class="md-option-line update-check" v-if="app.platform === 'win32'">
                                    <div class="md-option-segment">
                                        {{$root.getLz('settings.option.visual.transparent')}}<br>
                                        <small>({{$root.getLz('settings.option.visual.transparent.description')}})</small>
                                    </div>
                                    <div class="md-option-segment md-option-segment_auto">
                                        <label>
                                            <input type="checkbox" v-model="app.cfg.visual.transparent" switch
                                                   @change="promptForRelaunch()"/>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-tab>
                <!--keybinds Settings -->
                <b-tab id="hid">
                    <template>
                        <keybinds-settings/>
                    </template>
                </b-tab>
                <!--keybinds-settings -->
                <!--Github-theme-settings -->
                <b-tab id="hid">
                    <template>
                        <themes-github/>
                    </template>
                </b-tab>
                <!--Github-theme-settings -->
                <!-- Connect Settings -->
                <!-- Not Prod Ready
            <b-tab :title="$root.getLz('settings.header.connect')">
                <div class="md-option-container">
                    <!!!!!-- Cider Connect / Linking Settings -!->
                    <div class="md-option-header">
                        <span>{{$root.getLz('settings.header.connect')}}</span>
                    </div>
                    <div class="settings-option-body">
                        <div class="md-option-line update-check" v-if="app.cfg.connectUser.auth == null">
                            <div class="md-option-segment">
                                {{$root.getLz('settings.option.connect.link_account')}}
                                <small>{{$root.getLz('settings.option.connect.link_account.description')}}</small>
                                <br>
                                <small>Debug Status: {{ app.cfg.connectUser }}</small>
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <button class="md-btn" id='settings.option.general.updateCider.check' @click="authCC()">
                                    {{$root.getLz('term.connect')}}
                                </button>
                            </div>
                        </div>
                        <div v-if="app.cfg.connectUser.auth != null">
                            <div class="md-option-line">
                                <div class="md-option-segment">
                                    {{$root.getLz('settings.option.connect.link_account')}}
                                    <small>{{$root.getLz('settings.option.connect.link_account.description')}}</small>
                                    <br>
                                </div>
                                <div class="md-option-segment md-option-segment_auto">
                                    <button class="md-btn" id='settings.option.general.updateCider.check'
                                            @click="logoutCC()" style="display: flex;align-items: center;gap: 0.4em;">
                                        <%- include("../svg/check.svg") %>
                                        <div v>Connected</div>
                                    </button>
                                </div>
                            </div>
                            <div class="md-option-header" style="margin-left: -0.55em;">
                                <span>{{app.cfg.connectUser.username}}</span>
                                <img :src="'https://cdn.discordapp.com/avatars/' + app.cfg.connectUser.id + '/' + app.cfg.connectUser.avatar + '.png?size=32'"
                                     alt="Discord Avatar"></img>
                            </div>

                            <div class="md-option-line">
                                <div class="md-option-segment">
                                    Sync Settings
                                </div>
                                <div class="md-option-segment md-option-segment_auto">
                                    <label>
                                        <input type="checkbox" a-v-model="app.cfg.connectUser.sync.settings"
                                               @click="app.cfg.connectUser.sync.settings = !app.cfg.connectUser.sync.settings"
                                               switch/>
                                    </label>
                                </div>
                            </div>

                            <div class="md-option-line">
                                <div class="md-option-segment">
                                    Sync Themes
                                </div>
                                <div class="md-option-segment md-option-segment_auto">
                                    <label>
                                        <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.themes"
                                               @click="app.cfg.connectUser.sync.themes = !app.cfg.connectUser.sync.themes"
                                               switch/>
                                    </label>
                                </div>
                            </div>

                            <div class="md-option-line">
                                <div class="md-option-segment">
                                    Sync Plugins
                                </div>
                                <div class="md-option-segment md-option-segment_auto">
                                    <label>
                                        <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.plugins"
                                               @click="app.cfg.connectUser.sync.plugins = !app.cfg.connectUser.sync.plugins"
                                               switch/>
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </b-tab>
            -->
            </b-tabs>
        </div>
    </div>
</script>
<script>
    Vue.component("settings-window", {
        template: "#settings-window",
        data: function () {
            return {
                app: this.$root,
                themes: ipcRenderer.sendSync("get-themes"),
                tabIndex: 0,
                canChangeHash: false,
                lastfmConnecting: false
            }
        },
        watch: {
            tabIndex: function (val) {
                if (this.canChangeHash) {
                    // window.location.hash = `#settings/${val}`
                }
            }
        },
        methods: {
            sidebarVis() {
                const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
                if (tabIndex == 3 || tabIndex == 5 || tabIndex == 10) {
                    return true;
                }
                return false
            },
            close() {
                this.$root.modals.settings = false
            },
            windowBgStyleChange() {
                this.$root.getNowPlayingArtworkBG(undefined, true)
                if (this.$root.cfg.visual.window_background_style === "mica") {
                    this.$root.spawnMica()
                }
            },
            reinstallWidevineCDM() {
                app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
                    if (ok) {
                        ipcRenderer.invoke("reinstall-widevine-cdm");
                    }
                })
            },
            gitHubExplore() {
                app.openSettingsPage("github-themes")
            },
            copyLogs() {
                ipcRenderer.send('fetch-log')
                notyf.success(app.getLz('term.share.success'));
            },
            openAppData() {
                ipcRenderer.send('open-appdata')
            },
            getLanguages: function () {
                let langs = this.$root.lzListing
                let categories = {
                    "main": [],
                    "fun": [],
                    "unsorted": []
                }
                // sort by category if category is undefined or empty put it in "unsorted"
                for (let i = 0; i < langs.length; i++) {
                    if (langs[i].category === undefined || langs[i].category === "") {
                        categories.unsorted.push(langs[i])
                    } else {
                        categories[langs[i].category].push(langs[i])
                    }
                }
                // return
                return categories
            },
            addExperiment(flag) {
                app.cfg.advanced.experiments.push(flag);
            },
            removeExperiment(flag) {
                app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
            },
            toggleAudioContext: function () {
                if (app.cfg.advanced.AudioContext === true) {
                    if (navigator.hardwareConcurrency < 6) {
                        app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
                            if (result) {
                                CiderAudio.init();
                                if (app.cfg.audio.normalization === true) {
                                    CiderAudio.normalizerOn()
                                }
                            }
                        })
                    } else {
                        CiderAudio.init();
                        if (app.cfg.audio.normalization === true) {
                            CiderAudio.normalizerOn()
                        }
                    }
                } else {
                    CiderAudio.off();
                }
            },
            toggleNormalization: function () {
                if (app.cfg.audio.normalization) {
                    CiderAudio.normalizerOn()
                } else {
                    CiderAudio.normalizerOff()
                }
            },
            changeAudioQuality: function () {
                app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
            },
            toggleUserInfo: function () {
                app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
            },
            sendDataToMTT: function () {
                ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
                //  setStoreValue does not change plugin store values somehow
                ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
            },
            checkIfUpdateDisabled() {
                if (app.cfg.main.UPDATABLE) return;

                let updateFields = document.getElementsByClassName('update-check');
                for (let i = 0; i < updateFields.length; i++) {
                    updateFields[i].style = "opacity: 0.5; pointer-events: none;";
                    updateFields[i].title = "Not available on this type of build";
                }

            },
            promptForRelaunch() {
                app.confirm(app.getLz('action.relaunch.confirm'), function (result) {
                    if (result) {
                        ipcRenderer.send('relaunchApp', '');
                    }
                });
            },
            authCC() {
                ipcRenderer.send('cc-auth')
            },
            logoutCC() {
                ipcRenderer.send('cc-logout')
            },
            reloadDiscordRPC() {
                ipcRenderer.send('reloadRPC')
            },
            lfmDisconnect() {
                this.$root.cfg.connectivity.lastfm.enabled = false;
                this.$root.cfg.connectivity.lastfm.secrets.username = "";
                this.$root.cfg.connectivity.lastfm.secrets.key = "";
                ipcRenderer.send('lastfm:disconnect');
            },
            async lfmAuthorize() {
                this.lastfmConnecting = true;
                window.open(await ipcRenderer.invoke('lastfm:url'));
                app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));

                /* Just a timeout for the button */
                setTimeout(() => {
                    if (!this.$root.cfg.connectivity.lastfm.enabled) {
                        app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
                        console.warn('[lastfm:authorize] Last.fm authorization timed out.');
                        this.lastfmConnecting = false;
                    }
                }, 20000);

                ipcRenderer.once('lastfm:authenticated', (_e, session) => {
                    this.$root.cfg.connectivity.lastfm.secrets.username = session.username
                    this.$root.cfg.connectivity.lastfm.secrets.key = session.key
                    this.$root.cfg.connectivity.lastfm.enabled = true
                    this.lastfmConnecting = false;
                    app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
                })
            },
            filterChange(e) {
                this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
            },
            submitToken() {
                const token = document.getElementById('lfmToken').value;
                ipcRenderer.send('lastfm:auth', token);
            },
            openLocalSongsPathMenu() {
                app.modals.pathMenu = true
            }
        }
    })
</script>