{% extends 'layouts/admin_base.html' %}
{% block extrastyle %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/setting.css') }}">
{% endblock extrastyle %}

{% block title %}Setting{% endblock title %}

{% block content %}
    <div class="setting-content flex-column flex-grow-1">
        <div class="configuration flex-column flex-grow-1">
            <div class="config-wrapper">
                <label for="" class="form-label title">vits_config</label>
                <div class="flex flex-wrap" id="vits-config"></div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">w2v2_vits_config</label>
                <div class="flex flex-wrap" id="w2v2-vits-config"></div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">hubert_vits_config</label>
                <div class="flex flex-wrap" id="hubert-vits-config"></div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">bert_vits2_config</label>
                <div class="flex flex-wrap" id="bert-vits2-config"></div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">log_config</label>
                <div class="" id="log-config">
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">logging_level</span>
                        <select class="form-select" id="logging-level">
                            <option value="DEBUG">DEBUG</option>
                            <option value="INFO">INFO</option>
                            <option value="WARNING">WARNING</option>
                            <option value="ERROR">ERROR</option>
                            <option value="CRITICAL">CRITICAL</option>
                        </select>
                    </div>

                </div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">model_config</label>
                <div class="" id="model-config"></div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">language_identification</label>
                <div class="" id="language-identification">
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">language_identification_library</span>
                        <select class="form-select" id="language-identification-library">
                            <option value="langid">langid</option>
                            <option value="fastlid">fastlid</option>
                        </select>
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">espeak_library</span>
                        <input type="text" class="form-control" id="espeak-library">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">language_automatic_detect (e.g., ['zh','ja','en'])</span>
                        <input type="text" class="form-control" id="language-automatic-detect">
                    </div>
                </div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">system</label>
                <div class="" id="system">
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">admin_route</span>
                        <input type="text" class="form-control" id="admin-route">
                    </div>
                    <div class="form-check form-switch item">
                        <input class="form-check-input" type="checkbox" role="switch" id="api-key-enabled">
                        <label class="form-check-label" for="flexSwitchCheckDefault">api_key_enabled</label>
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">api_key</span>
                        <input type="text" class="form-control" type="text" id="api-key">
                    </div>
                    <div class="form-check form-switch item">
                        <input class="form-check-input" type="checkbox" role="switch" id="cache-audio">
                        <label class="form-check-label" for="flexSwitchCheckDefault">cache_audio</label>
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">cache_path</span>
                        <input type="text" class="form-control" id="cache-path">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">clean_interval_seconds</span>
                        <input type="text" class="form-control" id="clean-interval-seconds">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">data_path</span>
                        <input type="text" class="form-control" id="data-path">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">device</span>
                        <input type="text" class="form-control" id="device">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">is_admin_enabled</span>
                        <input type="text" class="form-control" id="is-admin-enabled">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">upload_folder</span>
                        <input type="text" class="form-control" id="upload-folder">
                    </div>

                </div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">http_service</label>
                <div class="" id="http-service">
                    <div class="form-check form-switch item">
                        <input class="form-check-input" type="checkbox" role="switch" id="debug">
                        <label class="form-check-label" for="flexSwitchCheckDefault">debug</label>
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">host</span>
                        <input class="form-control" type="text" id="host">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">port</span>
                        <input class="form-control" type="password" id="port">
                    </div>

                </div>
            </div>

            <div class="config-wrapper">
                <label for="" class="form-label title">admin</label>
                <div class="" id="admin">
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">username</span>
                        <input type="text" class="form-control" type="text" id="username">
                    </div>
                    <div class="input-group mb-3 item">
                        <span class="input-group-text">password</span>
                        <input type="text" class="form-control" type="password" id="password">
                    </div>

                </div>
            </div>

            <div class="config-save">save</div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script src="{{ url_for('static', filename='js/settingcode.js') }}"></script>
{% endblock extra_js %}