{% 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>
	<p>
		{{ strings.translation_services_description|raw }}
	</p>
    {{ 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>