{% load i18n %}

{% if error %}
  <div class="text-center py-2">
    <span class="text-danger">
      <i class="mdi mdi-alert"></i> {{ error }}
    </span>
  </div>
{% elif table_data %}
  {# Multi-row table from array data #}
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0 sortable-table" style="table-layout: fixed; width: 100%;">
      <thead>
        <tr>
          {% for col in table_data.columns %}
            <th class="small text-muted text-nowrap user-select-none" role="button"
                {% if col.width %}style="width: {{ col.width }}; cursor: pointer;"{% else %}style="cursor: pointer;"{% endif %}
                data-col-index="{{ forloop.counter0 }}">
              {{ col.header }} <i class="mdi mdi-unfold-more-horizontal" style="opacity: 0.4;"></i>
            </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in table_data.rows %}
          <tr>
            {% for cell in row %}
              <td style="white-space: normal; overflow-wrap: break-word;">
                <span class="{{ cell.color_class }}" style="white-space: normal; display: inline-block;">
                  {{ cell.value }}
                  {% if cell.suffix %}<small class="text-muted">{{ cell.suffix }}</small>{% endif %}
                </span>
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <script>
    (function() {
      const table = document.currentScript.closest('.card-body, [hx-target]')
        ?.querySelector('.sortable-table') || document.currentScript.previousElementSibling.querySelector('.sortable-table');
      if (!table) return;
      const headers = table.querySelectorAll('thead th[data-col-index]');
      let sortCol = -1, sortAsc = true;
      headers.forEach(th => {
        th.addEventListener('click', function() {
          const col = parseInt(this.dataset.colIndex);
          if (sortCol === col) { sortAsc = !sortAsc; } else { sortCol = col; sortAsc = true; }
          const tbody = table.querySelector('tbody');
          const rows = Array.from(tbody.querySelectorAll('tr'));
          rows.sort((a, b) => {
            const aText = (a.children[col]?.textContent || '').trim().toLowerCase();
            const bText = (b.children[col]?.textContent || '').trim().toLowerCase();
            const aNum = parseFloat(aText), bNum = parseFloat(bText);
            if (!isNaN(aNum) && !isNaN(bNum)) return sortAsc ? aNum - bNum : bNum - aNum;
            return sortAsc ? aText.localeCompare(bText) : bText.localeCompare(aText);
          });
          rows.forEach(r => tbody.appendChild(r));
          headers.forEach(h => {
            const icon = h.querySelector('i');
            if (parseInt(h.dataset.colIndex) === col) {
              icon.className = sortAsc ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down';
              icon.style.opacity = '1';
            } else {
              icon.className = 'mdi mdi-unfold-more-horizontal';
              icon.style.opacity = '0.4';
            }
          });
        });
      });
    })();
  </script>

  <div class="d-flex justify-content-between align-items-center mt-2 px-2 border-top pt-2">
    {% if endpoint.refresh_interval > 0 %}
      <small class="text-muted">
        <i class="mdi mdi-refresh"></i> {{ endpoint.refresh_interval }}s
      </small>
    {% else %}
      <small class="text-muted">
        <i class="mdi mdi-pause-circle"></i> {% trans "Manual" %}
      </small>
    {% endif %}

    <div>
      {% if endpoint.link %}
        <a href="{{ endpoint.link }}" target="_blank" class="btn btn-sm btn-outline-primary me-1" title="Open link">
          <i class="mdi mdi-open-in-new"></i>
        </a>
      {% endif %}
      <a href="{{ endpoint.get_absolute_url }}" class="btn btn-sm btn-outline-secondary" title="Configure">
        <i class="mdi mdi-cog"></i>
      </a>
    </div>
  </div>
{% elif mapped_data %}
  {% if endpoint.display_mode == "list" %}
    {% for item in mapped_data %}
      <div class="d-flex justify-content-between align-items-center px-2 py-1 {% if not forloop.last %}border-bottom{% endif %}">
        <span class="text-truncate">
          {% if item.label %}{{ item.label }}{% else %}{{ item.value }}{% endif %}
        </span>
        <span class="fw-bold {{ item.color_class }} text-nowrap ms-2">
          {% if item.additional_value %}
            {{ item.additional_value }}
          {% elif item.label %}
            {{ item.value }}
          {% endif %}
          {% if item.suffix %}<small class="text-muted ms-1">{{ item.suffix }}</small>{% endif %}
        </span>
      </div>
    {% endfor %}

  {% elif endpoint.display_mode == "grid" %}
    <div class="row text-center py-1 px-2">
      {% for item in mapped_data %}
        <div class="col">
          <div class="py-2">
            {% if item.color_class %}
              <span class="{{ item.color_class }} fs-4 px-3 py-2">
                {{ item.value }}
                {% if item.suffix %}<small class="ms-1">{{ item.suffix }}</small>{% endif %}
              </span>
            {% else %}
              <span class="fw-bold fs-4">
                {{ item.value }}
                {% if item.suffix %}<small class="text-muted ms-1">{{ item.suffix }}</small>{% endif %}
              </span>
            {% endif %}
            {% if item.additional_value %}
              <div class="mt-1 fw-bold {{ item.color_class }}">{{ item.additional_value }}</div>
            {% endif %}
            {% if item.label %}<div class="mt-2 fw-bold">{{ item.label }}</div>{% endif %}
          </div>
        </div>
      {% endfor %}
    </div>

  {% elif endpoint.display_mode == "table" %}
    <div class="table-responsive">
      <table class="table table-sm table-hover mb-0">
        <thead>
          <tr>
            {% for item in mapped_data %}
              <th class="small text-muted">{% if item.label %}{{ item.label }}{% else %}Field {{ forloop.counter }}{% endif %}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          <tr>
            {% for item in mapped_data %}
              <td>
                <span class="{{ item.color_class }}">
                  {{ item.value }}
                  {% if item.suffix %}<small class="text-muted">{{ item.suffix }}</small>{% endif %}
                </span>
                {% if item.additional_value %}
                  <br><span class="fw-bold {{ item.color_class }}">{{ item.additional_value }}</span>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        </tbody>
      </table>
    </div>

  {% else %}
    {# block mode (default fallback) #}
    {% for item in mapped_data %}
      <div class="px-2 py-1 {% if not forloop.last %}border-bottom{% endif %}">
        {% if item.color_class %}
          <div class="text-center py-2">
            <span class="{{ item.color_class }} fs-4 px-3 py-2">
              {{ item.value }}
              {% if item.suffix %}<small class="ms-1">{{ item.suffix }}</small>{% endif %}
            </span>
            {% if item.label %}<div class="mt-2 fw-bold">{{ item.label }}</div>{% endif %}
          </div>
        {% elif item.label %}
          <small class="text-muted">{{ item.label }}</small>
          <div class="fw-bold">
            {{ item.value }}
            {% if item.suffix %}<small class="text-muted">{{ item.suffix }}</small>{% endif %}
          </div>
        {% else %}
          <div>
            {{ item.value }}
            {% if item.suffix %}<small class="text-muted">{{ item.suffix }}</small>{% endif %}
          </div>
        {% endif %}
        {% if item.additional_value %}
          <div class="text-center fw-bold {{ item.color_class }}">{{ item.additional_value }}</div>
        {% endif %}
      </div>
    {% endfor %}
  {% endif %}

  <div class="d-flex justify-content-between align-items-center mt-2 px-2 border-top pt-2">
    {% if endpoint.refresh_interval > 0 %}
      <small class="text-muted">
        <i class="mdi mdi-refresh"></i> {{ endpoint.refresh_interval }}s
      </small>
    {% else %}
      <small class="text-muted">
        <i class="mdi mdi-pause-circle"></i> {% trans "Manual" %}
      </small>
    {% endif %}

    <div>
      {% if endpoint.link %}
        <a href="{{ endpoint.link }}" target="_blank" class="btn btn-sm btn-outline-primary me-1" title="Open link">
          <i class="mdi mdi-open-in-new"></i>
        </a>
      {% endif %}
      <a href="{{ endpoint.get_absolute_url }}" class="btn btn-sm btn-outline-secondary" title="Configure">
        <i class="mdi mdi-cog"></i>
      </a>
    </div>
  </div>
{% else %}
  <p class="text-center text-muted py-2">
    <i class="mdi mdi-information-outline"></i>
    {% trans "No data returned." %}
  </p>
{% endif %}