{% extends '@WebProfiler/Collector/translation.html.twig' %}

{#
 # Authors Tobias Nyholm, Damien Alexandre (damienalexandre), Damien Harper
 #}

{% import _self as translation_helper %}

{% block panelContent %}
    <h2>Translation Metrics</h2>

    <div>
        <a class="btn" href="javascript:void(0);" onclick='syncAll()'>Synchronize all translations</a><br />
        <div id="top-result-area"></div>
    </div>

    <div class="metrics">
        <div class="metric">
            <span class="value">{{ collector.countdefines }}</span>
            <span class="label">Defined messages</span>
        </div>

        <div class="metric">
            <span class="value">{{ collector.countFallbacks }}</span>
            <span class="label">Fallback messages</span>
        </div>

        <div class="metric">
            <span class="value">{{ collector.countMissings }}</span>
            <span class="label">Missing messages</span>
        </div>
    </div>

    <h2>Translation Messages</h2>

    {# sort translation messages in groups #}
    {% set messages_defined, messages_missing, messages_fallback = [], [], [] %}
    {% for key, message in collector.messages %}
        {% if message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_DEFINED') %}
            {% set messages_defined = messages_defined|merge({(key): message}) %}
        {% elseif message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_MISSING') %}
            {% set messages_missing = messages_missing|merge({(key): message}) %}
        {% elseif message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_EQUALS_FALLBACK') %}
            {% set messages_fallback = messages_fallback|merge({(key): message}) %}
        {% endif %}
    {% endfor %}

<form action="{{ path('_profiler_translations_create_assets', {'token': token}) }}" method="post"
      id="translations-list" onSubmit="return saveTranslations(this);" >

    <div class="sf-tabs">
        <div class="tab">
            <h3 class="tab-title">Defined <span class="badge">{{ messages_defined|length }}</span></h3>

            <div class="tab-content">
                <p class="help">
                    These messages are correctly translated into the given locale.
                </p>

                {% if messages_defined is empty %}
                    <div class="empty">
                        <p>None of the used translation messages are defined for the given locale.</p>
                    </div>
                {% else %}
                    {{ translation_helper.render_table(messages_defined) }}
                {% endif %}
            </div>
        </div>

        <div class="tab">
            <h3 class="tab-title">Fallback <span class="badge">{{ messages_fallback|length }}</span></h3>

            <div class="tab-content">
                <p class="help">
                    These messages are not available for the given locale
                    but Symfony found them in the fallback locale catalog.
                </p>

                {% if messages_fallback is empty %}
                    <div class="empty">
                        <p>No fallback translation messages were used.</p>
                    </div>
                {% else %}
                    {{ translation_helper.render_table(messages_fallback) }}
                {% endif %}
            </div>
        </div>

        <div class="tab">
            <h3 class="tab-title">Missing <span class="badge">{{ messages_missing|length }}</span></h3>

            <div class="tab-content">
                <p class="help">
                    These messages are not available for the given locale and cannot
                    be found in the fallback locales. Add them to the translation
                    catalogue to avoid Symfony outputting untranslated contents.
                </p>

                {% if messages_missing is empty %}
                    <div class="empty">
                        <p>There are no messages of this category.</p>
                    </div>
                {% else %}
                    {{ translation_helper.render_table(messages_missing) }}
                {% endif %}
            </div>
        </div>
    </div>

    <button type="submit" class="btn">
        Send selected translations to SaaS
    </button>

    <div id="translationResult"></div>

</form>
    {% include "HappyrTranslationBundle:Profiler:javascripts.html.twig" %}
{% endblock %}

{% macro render_table(messages) %}
    <table>
        <thead>
        <tr>
            <th></th>
            <th>Locale</th>
            <th>Domain</th>
            <th>Times used</th>
            <th>Message ID</th>
            <th>Message Preview</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for key, message in messages %}
            <tr id="{{ key }}">
                <td>
                    {% if message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_MISSING') %}
                        <input type="checkbox" name="translationKey" value="{{ key }}" checked="checked">
                    {% else %}
                        <input type="checkbox" disabled="disabled">
                    {% endif %}
                </td>
                <td class="font-normal text-small">{{ message.locale }}</td>
                <td class="font-normal text-small text-bold nowrap">{{ message.domain }}</td>
                <td class="font-normal text-small">{{ message.count }}</td>
                <td>
                    {{ message.id }}

                    {# message.transChoiceNumber is not defined before symfony 2.8.0 #}
                    {% if message.transChoiceNumber is defined and message.transChoiceNumber is not null %}
                        <small class="newline">(pluralization is used)</small>
                    {% endif %}

                    {# message.parameters is not defined before symfony 2.8.0 #}
                    {% if message.parameters is defined and message.parameters|length > 0 %}
                        <button class="btn-link newline text-small sf-toggle" data-toggle-selector="#parameters-{{ loop.index }}" data-toggle-alt-content="Hide parameters">Show parameters</button>

                        <div id="parameters-{{ loop.index }}" class="hidden">
                            {% for parameters in message.parameters %}
                                {{ profiler_dump(parameters) }}
                                {% if not loop.last %}<br />{% endif %}
                            {% endfor %}
                        </div>
                    {% endif %}
                </td>
                <td class="translation">{{ message.translation }}</td>
                <td width="155px">
                    {% spaceless %}
                    <a class="edit"  href="javascript:void(0);" onclick='getEditForm("{{ key }}")'>Edit</a>
                        |
                    <a class="flag" href="javascript:void(0);" onclick='flagMessage("{{ key }}")'>Flag</a>
                        |
                    <a class="sync"  href="javascript:void(0);" onclick='syncMessage("{{ key }}")'>Sync</a>
                    {% endspaceless %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endmacro %}