{% extends "rosetta/base.html" %}
{% load static %}
{% load rosetta i18n %}

{% block pagetitle %}
  {{ block.super }} - {{ rosetta_settings.MESSAGES_SOURCE_LANGUAGE_NAME }} - {{ rosetta_i18n_lang_name }} ({{ rosetta_i18n_pofile.percent_translated }}%)
{% endblock %}

{% block breadcumbs %}
  <div>
    <a href="{% url 'admin:index' %}">{% trans "Home" %}</a> &rsaquo;
    <a href="{% url 'rosetta-file-list' po_filter=po_filter %}">{% trans "Rosetta" %}</a> &rsaquo;
    {{ rosetta_i18n_lang_name }} &rsaquo;
    {{ rosetta_i18n_app|title }} &rsaquo;
    {% blocktrans with rosetta_i18n_pofile.percent_translated as percent_translated %}Progress: {{ percent_translated }}%{% endblocktrans %}
  </div>
  {% if not rosetta_i18n_write %}<p class="errornote read-only">{% trans "File is read-only: download the file when done editing!" %}</p>{% endif %}
  {% if messages %}
    <div class="messages errornote save-conflict">
      {% for message in messages %}
        <p class="{{ message.tags }}">{{ message|linebreaks }}</p>
      {% endfor %}
    </div>
  {% endif %}
{% endblock %}

{% block main %}
<!------ Rosetta: translate form (page head + changelist shell) ------->
  <div class="lucus-changelist__pagehead">
    <h1 class="lucus-changelist__title">{% blocktrans %}Translate into {{ rosetta_i18n_lang_name }}{% endblocktrans %}</h1>
    <div class="lucus-changelist__pagehead-actions lucus-rosetta-form__pagehead-actions">
      <a href="{% url 'rosetta-file-list' po_filter=po_filter %}" class="lucus-rosetta-form__head-link">{% trans "Pick another file" %}</a>
      <a href="{% url 'rosetta-download-file' po_filter=po_filter lang_id=lang_id idx=idx %}" class="lucus-rosetta-form__head-link lucus-rosetta-form__head-link--primary">{% trans "Download this catalog" %}</a>
    </div>
  </div>

  <div id="changelist" class="module lucus-changelist filtered{% if rosetta_i18n_lang_bidi %} rtl{% endif %}">
    <div class="lucus-changelist__layout">
      <div class="lucus-changelist__main-column">
        <div class="lucus-changelist__toolbar">
          <div class="lucus-changelist__toolbar-pagination" aria-hidden="true"></div>
          <div class="lucus-changelist__toolbar-search">
            <div id="toolbar" class="lucus-changelist-search-toolbar">
              <form id="changelist-search" action="" method="get" role="search">
                <div>
                  <label for="searchbar"><img src="{% static "admin/img/icon_searchbox_rosetta.png" %}" alt="{% trans "Search" %}" /></label>
                  <input type="text" size="40" name="query" value="{% if query %}{{ query }}{% endif %}" id="searchbar" tabindex="0" />
                  <input type="submit" name="s" value="{% trans "Go" %}" />
                </div>
              </form>
            </div>
          </div>
        </div>

        {% if rosetta_settings.ENABLE_REFLANG %}
          <div class="lucus-changelist__filters-bar">
            <div class="actions">
              <label for="ref-language-selector">{% trans "Reference language" %}:</label>
              <select class="select-across" id="ref-language-selector">
                {% for langid, langname in LANGUAGES %}
                  <option{% if ref_lang == langid %} selected="selected"{% endif %} value="?ref_lang={{ langid }}">{{ langname }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        {% endif %}

        <form method="post" action="" class="results">
          {% csrf_token %}
          <div class="lucus-results-scroll">
            <table id="result_list">
              <thead>
                <tr>
                  <th><div class="text">{% trans "Original" %}</div></th>
                  {% if main_language %}<th>{{ main_language }}</th>{% endif %}
                  <th>{{ rosetta_i18n_lang_name }}</th>
                  <th class="info-tip c" title="{% trans "Fuzzy entries call for revision by the translator." %}"><input id="action-toggle" type="checkbox"> {% trans "Fuzzy" %}</th>
                  {% if rosetta_settings.SHOW_OCCURRENCES %}<th>{% trans "Occurrences(s)" %}</th>{% endif %}
                </tr>
              </thead>
              <tbody>
                {% for message in rosetta_messages %}
                  <tr class="{% cycle 'row1' 'row2' %}">
                    {% if message.msgid_plural %}
                      <td class="original plural">
                        <div class="plural-container">
                          <span class="part">{{ message.msgid|format_message|linebreaksbr }}</span>
                          <span class="part">{{ message.msgid_plural|format_message|linebreaksbr }}</span>
                        </div>
                      </td>
                      <td class="translation">
                        {% for k, msgstr in message.msgstr_plural.items %}
                          <label for="m_{{ message.md5hash }}_{{ k }}">{{ k }}:</label>
                          <span class="alert hidden">{% trans "Unmatched variables" %}</span>
                          <textarea rows="{{ message.msgid|format_message|lines_count }}" cols="40" id="m_{{ message.md5hash }}_{{ k }}" name="m_{{ message.md5hash }}_{{ k }}" tabindex="{% increment tab_idx %}">{{ msgstr }}</textarea>
                          {% if rosetta_settings.ENABLE_TRANSLATION_SUGGESTIONS %}<a href="#" class="suggest">{% trans "suggest" %}</a>{% endif %}
                        {% endfor %}
                      </td>
                    {% else %}
                      <td class="original">
                        {% if rosetta_settings.ENABLE_REFLANG %}
                          <span class="message">{{ message.ref_txt|format_message|linebreaksbr }}</span>
                        {% else %}
                          <span class="message">{{ message.msgid|format_message|linebreaksbr }}</span>
                        {% endif %}
                      </td>
                      {% if main_language %}<td class="original">{{ message.main_lang|format_message|linebreaksbr }}</td>{% endif %}
                      <td class="translation">
                        <span class="alert hidden">{% trans "Unmatched variables" %}</span>
                        <textarea rows="{{ message.msgid|format_message|lines_count }}" cols="40" name="m_{{ message.md5hash }}" tabindex="{% increment tab_idx %}">{{ message.msgstr }}</textarea>
                        {% if rosetta_settings.ENABLE_TRANSLATION_SUGGESTIONS %}<a href="#" class="suggest">{% trans "suggest" %}</a>{% endif %}
                      </td>
                    {% endif %}
                    <td class="c">
                      <input type="checkbox" name="f_{{ message.md5hash }}" value="1" {% if message|is_fuzzy %}checked="checked"{% endif %} />
                    </td>
                    {% if rosetta_settings.SHOW_OCCURRENCES %}
                      <td class="location">
                        {% for fn,lineno in message.occurrences %}
                          <code{% if forloop.counter|gt:"3" %} class="hide"{% endif %}>{{ fn }}{% if lineno %}:{{ lineno }}{% endif %}</code>
                        {% endfor %}
                        {% if message.occurrences|length|gt:"3" %}
                          <a href="#" data-prev-text="{% trans "Show less" %}">&hellip; ({% blocktrans count message.occurrences|length|minus:"3" as more_count %}{{ more_count }} more{% plural %}{{ more_count }} more{% endblocktrans %})</a>
                        {% endif %}
                        {% if message.msgctxt or message.comment %}
                          <span class="context">
                            {% trans "Context hint" %}:
                            {% if message.msgctxt %}
                              {{ message.msgctxt|safe }}
                            {% endif %}
                            {% if message.msgctxt and message.comment %}<br/>{% endif %}
                            {% if message.comment %}
                              {{ message.comment|safe }}
                            {% endif %}
                          </span>
                        {% endif %}
                      </td>
                    {% endif %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <div class="submit-row">
            <p class="paginator">
              {% if query %}
                <input type="hidden" name="query" value="{{ query }}" />
              {% endif %}
              <input type="submit" class="default" name="_next" value="{% trans "Save and translate next block" %}" tabindex="{% increment tab_idx %}" />
              {% if needs_pagination %}
                {% trans "Skip to page:" %}
                {% for i in page_range %}
                  {% if i == '...' %}
                    <span class="space">{{ i }}</span>
                  {% else %}
                    {% if i == page %}
                      <span class="this-page">{{ i }}</span>
                    {% else %}
                      <a href="?{{ pagination_query_string_base }}&amp;page={{ i }}">{{ i }}</a>
                    {% endif %}
                  {% endif %}
                {% endfor %}
              {% else %}
                {% trans "Displaying:" %}
              {% endif %}
              {% with paginator.object_list|length as hits %}
                <strong>{% blocktrans count rosetta_i18n_pofile|length as message_number %}{{ hits }}/{{ message_number }} message{% plural %}{{ hits }}/{{ message_number }} messages{% endblocktrans %}</strong>
              {% endwith %}
            </p>
          </div>
        </form>
      </div>

      <aside class="lucus-changelist__aside" aria-label="{% trans 'Display' %}">
        <header class="lucus-changelist__aside-header">
          <span class="lucus-changelist__aside-title">{% trans "Display" %}</span>
        </header>
        <div class="lucus-changelist__aside-body">
          <div class="lucus-changelist__filters">
            <details class="lucus-filter" open>
              <summary class="lucus-filter__summary">
                <span class="lucus-filter__summary-label">{% trans "Messages" %}</span>
              </summary>
              <ul class="lucus-filter__list">
                <li{% if rosetta_i18n_filter == 'untranslated' %} class="selected"{% endif %}>
                  <a href="?{{ filter_query_string_base }}&amp;msg_filter=untranslated">{% trans "Untranslated only" %}</a>
                </li>
                <li{% if rosetta_i18n_filter == 'translated' %} class="selected"{% endif %}>
                  <a href="?{{ filter_query_string_base }}&amp;msg_filter=translated">{% trans "Translated only" %}</a>
                </li>
                <li{% if rosetta_i18n_filter == 'fuzzy' %} class="selected"{% endif %}>
                  <a href="?{{ filter_query_string_base }}&amp;msg_filter=fuzzy">{% trans "Fuzzy only" %}</a>
                </li>
                <li{% if rosetta_i18n_filter == 'all' %} class="selected"{% endif %}>
                  <a href="?{{ filter_query_string_base }}&amp;msg_filter=all">{% trans "All" %}</a>
                </li>
              </ul>
            </details>
          </div>
        </div>
      </aside>
    </div>
  </div>
<!------------------------- END ROSETTA FORM -------------------------->
{% endblock %}