{% for key, nonce in nonces %}
    <input type="hidden" class="{{ key }}" name="{{ key }}" value="{{ nonce }}">
{% endfor %}
<div class="wpml-tm-ts-admin-section wpml-section">
    <h2>{{ strings.translation_services }}</h2>

    <div class="wpml-ts-description">
        <p>
            {{ strings.translation_services_description|raw }}
        </p>
        <button id="add-unlisted-translation-service" class="ant-btn ant-btn-tertiary wpml-antd-button wpml-antd-button-tertiary wpml-ts-text-xs">{{ strings.enable_unlisted_translation_service }}</button>
    </div>

    {{ active_service|raw }}

    {% if false == has_preferred_service and has_services %}

        <div
                id="wpml-tp-services"
                data-services="{{ services|json_encode() }}"
                data-endpoints="{{ endpoints|json_encode() }}"
                data-logoPlaceholder="{{ lsp_logo_placeholder }}"
                data-selectendpoint="{{ select_endpoint|json_encode() }}"
                data-translate-everything="{{ translate_everything }}"
                data-settings-url="{{ settings_url }}"
        >
        </div>

        <div class="js-bottom-section">
            <hr class="wpml-margin-top-base">
            <p>{{ strings.ts.different }} <a target="_blank" class="wpml-external-link" href="{{ strings.ts.tell_us_url }}">{{ strings.ts.tell_us }}</a></p>
        </div>

    {% endif %}

    {% if false == has_services %}
        <div class="warning notice-warning otgs-notice">
            {% for no_service_message in strings.no_service_found %}
                <p>{{ no_service_message|format( "<a target='_blank' href='" ~ strings.support_link ~ "'>" ~ strings.wpml_support ~ "</a>" )|raw }}</p>
            {% endfor %}
        </div>
    {% endif %}

</div>
