material-modal(:show="modelValue" bg-close teleport="#view" @close="handleClose")
main(:class="$style.main")
h2 {{ $t('user_api__title') }}
ul.scroll(v-if="apiList.length" :class="$style.content")
li(v-for="(api, index) in apiList" :key="api.id" :class="[$style.listItem, {[$style.active]: appSetting['common.apiSource'] == api.id}]")
div(:class="$style.listLeft")
h3 {{ api.name }}
p {{ api.description }}
div
base-checkbox(:id="`user_api_${api.id}`" v-model="api.allowShowUpdateAlert" :class="$style.checkbox" :label="$t('user_api__allow_show_update_alert')" @change="handleChangeAllowUpdateAlert(api, $event)")
base-btn(:class="$style.listBtn" outline :aria-label="$t('user_api__btn_remove')" @click.stop="handleRemove(index)")
svg(v-once version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 212.982 212.982" space="preserve")
use(xlink:href="#icon-delete")
div(v-else :class="$style.content")
div(:class="$style.noitem") {{ $t('user_api__noitem') }}
div(:class="$style.note")
p(:class="[$style.ruleLink]")
| {{ $t('user_api__readme') }}
span.hover.underline(aria-label="https://lxmusic.toside.cn/desktop/custom-source" @click="handleOpenUrl('https://lyswhut.github.io/lx-music-doc/desktop/custom-source')") FAQ
p {{ $t('user_api__note') }}
div(:class="$style.footer")
base-btn(:class="$style.footerBtn" @click="handleImport") {{ $t('user_api__btn_import') }}
//- base-btn(:class="$style.footerBtn" @click="handleExport") {{ $t('user_api__btn_export') }}