{% load i18n %}

{% if error %}
  <div class="text-center py-2">
    <span class="text-danger">
      <i class="mdi mdi-alert"></i> {{ error }}
    </span>
  </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 %}