{# Voice input: model picker + catalog download. Rendered inside the plugin's #}
{# card on the /settings Plugins tab (settings slot), so no card of its own. #}
<div class="setting-row row gx-2 gx-md-4" x-data="voiceSettings()" x-init="init()">
    <div class="col-md-5">
        <div class="setting-label" x-text="$i18n('voice_installed')"></div>
        <div class="text-secondary small mt-1" x-text="$i18n('voice_catalog_intro', { dir: info.models_dir })"></div>
        <code class="setting-key">voice_model</code>
    </div>
    <div class="col-md-7">
        <template x-if="loaded && !info.vosk">
            <div class="alert alert-warning mb-3">
                <i class="ti ti-alert-triangle me-1"></i>
                <span x-text="$i18n('voice_vosk_missing')"></span>
            </div>
        </template>

        <div class="text-secondary small mb-3" x-show="loaded && !info.installed.length"
             x-text="$i18n('voice_none_installed')"></div>
        <div class="mb-3">
            <template x-for="m in info.installed" :key="m.name">
                <label class="form-check">
                    <input class="form-check-input" type="radio" name="voice-model"
                           :checked="m.name === info.current" @change="use(m.name)">
                    <span class="form-check-label">
                        <code x-text="m.name"></code>
                        <span class="badge bg-green-lt ms-2" x-show="m.name === info.current"
                              x-text="$i18n('voice_in_use')"></span>
                    </span>
                </label>
            </template>
        </div>
        <div class="invalid-feedback d-block mb-2" x-show="error" x-text="error"></div>

        <h4 class="mb-2" x-text="$i18n('voice_catalog')"></h4>
        <template x-if="info.catalog_error">
            <div class="text-danger small mb-2"
                 x-text="$i18n('voice_catalog_offline', { detail: info.catalog_error })"></div>
        </template>
        <div class="d-flex align-items-center gap-2 mb-2" x-show="info.catalog.length">
            <label class="form-label mb-0" x-text="$i18n('voice_language')"></label>
            <select class="form-select form-select-sm w-auto" x-model="lang">
                <option value="" x-text="$i18n('voice_all_languages')"></option>
                <template x-for="l in languages()" :key="l.code">
                    <option :value="l.code" x-text="l.text"></option>
                </template>
            </select>
        </div>
        <div class="progress mb-2" x-show="job && (job.state === 'downloading' || job.state === 'unpacking')">
            <div class="progress-bar" :class="job && job.state === 'unpacking' ? 'progress-bar-indeterminate' : ''"
                 :style="`width:${percent()}%`"></div>
        </div>
        <div class="small mb-2" x-show="job" x-text="jobText()"
             :class="job && job.state === 'error' ? 'text-danger' : 'text-secondary'"></div>
        <div class="table-responsive" x-show="info.catalog.length">
            <table class="table table-sm table-vcenter mb-0">
                <tbody>
                    <template x-for="m in filtered()" :key="m.name">
                        <tr>
                            <td x-text="m.lang_text"></td>
                            <td><code x-text="m.name"></code></td>
                            <td><span class="badge" :class="m.type === 'small' ? 'bg-blue-lt' : 'bg-purple-lt'"
                                      x-text="m.type === 'small' ? $i18n('voice_type_small') : $i18n('voice_type_big')"></span></td>
                            <td class="text-secondary" x-text="m.size_text"></td>
                            <td class="text-end">
                                <span class="badge bg-green-lt" x-show="isInstalled(m.name)"
                                      x-text="$i18n('voice_in_use')" x-cloak
                                      :class="m.name === info.current ? '' : 'd-none'"></span>
                                <button type="button" class="btn btn-sm btn-outline-primary"
                                        x-show="!isInstalled(m.name)" :disabled="busy()"
                                        @click="download(m.name)">
                                    <i class="ti ti-download me-1"></i>
                                    <span x-text="$i18n('voice_download')"></span>
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
    <script src="/static/plugins/voice/voice-settings.js?v={{ version }}"></script>
</div>