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

    {{ active_service|raw }}

    {% if false == has_preferred_service and available_services %}

        <div class="listing-table ts-admin-section-inactive-services">
            <h3 class="js-available-title">{{ strings.inactive_services_title }}</h3>

            <div class="ts-admin-section-search">
                <input class="search-string" type="text" value="{{ search_string }}" />
                <input type="button" class="button-secondary search" value="{{ strings.filter.search }}">

                {% if search_string %}
                    <a class="button-secondary" href="{{ clean_search_url }}">{{ strings.filter.clean_search }}</a>
                {% endif %}
            </div>

            {% include 'services-pagination.twig'
            with {
            'nav_location': 'top'
            } %}

            <table class="widefat striped">
                <thead>
                    {% include 'table-header.twig' %}
                </thead>
                <tfoot>
                    {% include 'table-header.twig' %}
                </tfoot>
                <tbody>
                {% for service in filtered_services %}
                    <tr class="item">
                        <td class="column-service-logo">
                            <img src="{{ service.logo_url }}" alt="">
                            <a target="_blank" href="{{ service.doc_url }}">{{ strings.documentation }}</a>
                        </td>
                        <td class="column-service-description">{{ service.description|raw }}</td>

                        {% if 'ts' == translation_service_type_requested %}
                            <td class="column-service-popularity">
                                {% include 'stars.twig' with { 'filled': service.popularity } only %}
                            </td>
                            <td class="column-service-speed">
                                {% include 'stars.twig' with { 'filled': service.speed } only %}
                            </td>
                        {% endif %}

                        <td class="column-service-actions">
                            <button class="button-primary js-activate-service-id"
                                    data-id="{{ service.id }}"
                                    data-name="{{ service.name }}"
                                    data-logo="{{ service.logo_url }}"
                                    data-get-credentials-desc="{{ service.how_to_get_credentials_desc }}"
                                    data-get-credentials-url="{{ service.how_to_get_credentials_url }}"
                                    data-create-account-url="{{ service.client_create_account_page_url }}"
                                    data-custom-fields="{{ service.custom_fields | json_encode }}"
                                    {{ service.active == 'active' ? 'disabled' }}
                            >
                                {{ strings.activate }}
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            {% include 'services-pagination.twig'
            with {
            'nav_location': 'bottom'
            } %}

            <div class="js-bottom-section">
                {% if strings.tms.visible %}
                    <br /><a href="{{ strings.tms.url }}">{{ strings.tms.link }}</a>
                {% endif %}

                {% if strings.ts.visible %}
                    <br /><a href="{{ strings.ts.url }}">{{ strings.ts.link }}</a>
                {% endif %}
            </div>
        </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 == available_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>
