{% extends 'base.html' %}
{% load static %}
{% load humanize %}
{% load dict_extras %}

{% block content %}
<main class="content">
  <div class="container-fluid p-0">

    <div class="mb-3">
      <h1 class="h3 d-inline align-middle">Catelog Translation Matrix</h1>
    </div>

    {% include 'partials/_messages.html' %}

    <div class="card">
      <div class="card-body">

        <div class="table-responsive" style="overflow:auto;">
          <table class="table table-bordered table-sm align-middle">
            <thead>
              <tr>
                <th style="min-width:260px;">Product</th>
                {% for lang in languages %}
                  <th style="min-width:220px;">{{ lang.name }}</th>
                {% endfor %}
              </tr>
            </thead>

            <tbody>
              {% for p in products %}
                <tr>
                  <td>
                    <div><b>{{ p.name }}</b></div>
                    <div class="text-muted" style="font-size:12px;">{{ p.code }}</div>
                  </td>

                  {% for lang in languages %}
                    {% with row=translation_map|get_item:p.id %}
                      {% if row %}
                        {% with link=row|get_item:lang.id %}
                          <td>
                            {% if link %}
                              <div style="word-break:break-all; font-size:12px;">{{ link }}</div>
                            {% else %}
                              <span class="text-muted">—</span>
                            {% endif %}
                          </td>
                        {% endwith %}
                      {% else %}
                        <td><span class="text-muted">—</span></td>
                      {% endif %}
                    {% endwith %}
                  {% endfor %}

                </tr>
              {% empty %}
                <tr>
                  <td colspan="{{ languages|length|add:1 }}">No products found.</td>
                </tr>
              {% endfor %}
            </tbody>

          </table>
        </div>

      </div>
    </div>

  </div>
</main>
{% endblock %}