{% load i18n icons translations %}

<tr class="{{ glossary_row_class }}">
  <td class="source">
    {% for note in item.glossary_notes.source %}<div>{{ note }}</div>{% endfor %}
    {% for term in item.glossary_sources %}
      <div lang="{{ item.translation.component.source_language.code }}"
           dir="{{ item.translation.component.source_language.direction }}"
           class="bidi-isolate">{{ term.text }}</div>
      {% if term.administrative_status %}<small>{{ term.administrative_status }}</small>{% endif %}
      {% for note in term.notes %}
        {% if note.scope == "term" %}<div>{{ note.text }}</div>{% endif %}
      {% endfor %}
    {% endfor %}
  </td>
  <td>
    {% if item.fuzzy %}
      <div>{% translate "This translation needs editing." %}</div>
    {% endif %}
    {% for note in item.glossary_notes.target %}<div>{{ note }}</div>{% endfor %}
    {% for term in item.glossary_targets %}
      <div>
        <button type="button"
                class="btn btn-link glossary-copy"
                data-glossary-text="{{ term.text }}"
                aria-label="{% translate 'Copy word into translation' %}: {{ term.text }}"
                {% if term.forbidden %}disabled{% endif %}>
          <span lang="{{ item.glossary_target_language.code }}"
                dir="{{ item.glossary_target_language.direction }}"
                class="bidi-isolate">{{ term.text }}</span>
        </button>
        {% if term.forbidden %}
          <small title="{% translate 'This translation is forbidden.' %}">{% translate "Forbidden" %}</small>
        {% endif %}
        {% if item.untranslatable %}
          <span>{% translate "This term should not be translated." %}</span>
        {% endif %}
        {% if term.administrative_status and term.administrative_status != "forbidden" %}<small>{{ term.administrative_status }}</small>{% endif %}
        {% for note in term.notes %}
          {% if note.scope == "term" %}<div class="small text-body-secondary">{{ note.text }}</div>{% endif %}
        {% endfor %}
      </div>
    {% endfor %}
  </td>
  <td class="glossary-badge-cell">{% include "snippets/glossary-badge.html" with glossary=item.translation %}</td>
  <td>
    <a href="{{ item.get_absolute_url }}"
       class="btn btn-link btn-xs"
       title="{% translate 'Edit glossary term' %}">{% icon "pencil.svg" %}</a>
  </td>
</tr>
<tr class="{{ glossary_row_class }} glossary-details {% if item.glossary_notes.concept or item.glossary_note or item.source_unit.explanation or not item.is_source and item.explanation %}glossary-has-details{% endif %}">
  <td colspan="4">
    <div class="glossary-compact-badge">{% include "snippets/glossary-badge.html" with glossary=item.translation %}</div>
    {% for note in item.glossary_notes.concept %}<div class="glossary-explanation"><strong>{% translate "Note" %}:</strong> {{ note }}</div>{% endfor %}
    {% if item.glossary_note %}<div class="glossary-explanation"><strong>{% translate "Source string description" %}:</strong> {{ item.glossary_note }}</div>{% endif %}
    {% if not item.is_source and item.explanation %}<div class="glossary-explanation"><strong>{% translate "Translation explanation" %}:</strong> {{ item.explanation|markdown }}</div>{% endif %}
    {% if item.source_unit.explanation %}<div class="glossary-explanation"><strong>{% translate "Source explanation" %}:</strong> {{ item.source_unit.explanation|markdown }}</div>{% endif %}
  </td>
</tr>