{% 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 %}
  {% else %}
    {% for item in mapped_data %}
      <div class="px-2 py-1 {% if not forloop.last %}border-bottom{% endif %}">
        {% if item.label %}
          <small class="text-muted">{{ item.label }}</small>
          <div class="fw-bold {{ item.color_class }}">
            {{ item.value }}
            {% if item.suffix %}<small class="text-muted">{{ item.suffix }}</small>{% endif %}
          </div>
        {% else %}
          <div class="{{ item.color_class }}">
            {{ item.value }}
            {% if item.suffix %}<small class="text-muted">{{ item.suffix }}</small>{% endif %}
          </div>
        {% endif %}
        {% if item.additional_value %}
          <div class="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 %}

    <a href="{{ endpoint.get_absolute_url }}" class="btn btn-sm btn-outline-secondary">
      <i class="mdi mdi-cog"></i>
    </a>
  </div>
{% else %}
  <p class="text-center text-muted py-2">
    <i class="mdi mdi-information-outline"></i>
    {% trans "No data returned." %}
  </p>
{% endif %}