<div class="wpml-wizard-step wpml-summary-step js-wpml-summary-step"
     data-mode='{{ mode }}'>

    <h2 class="text-center">{{ strings.title }}</h2>

    <div class="wpml-translators-wrapper">

    {% if( translators|length > 0 ) %}
        <div class="wpml-local-translators js-wpml-local-translators">
            <h3>{{ strings.local_translators }}:</h3>
            <ul>
                {% for user in translators %}
                    <li>{{ user.display_name }}</li>
                {% endfor %}
            </ul>
            <div class="notice notice-success inline">
                <p>{{ strings.local_summary }}</p>
            </div>
        </div>
    {% endif %}

    {% if ( translation_service ) %}
        <div class="wpml-translation-service js-wpml-translation-service">
            <h3>{{ strings.translation_service }}:</h3>
            <div class="wpml-translation-service-activated">
                <img src="{{ translation_service.logo_url }}">
                <strong>{{ translation_service.name }}</strong>
            </div>
        </div>
    {% endif %}

    </div>

    <div class="wpml-tm-instructions">
        {{ strings.instructions|raw }}
    </div>

    <div class="wpml-wizard-buttons-container">
        <button class="button button-secondary alignleft  js-go-back">&laquo; {{ strings.go_back }}</button>
        <button class="button wpml-button button-lg alignright js-done">{{ strings.done }}</button>
    </div>

</div>