{% load showcase_extras %}

<div class="rounded-3 overflow-hidden" style="border:1px solid #e2e8f0;">
  {% if caption %}
  <div class="px-3 py-2 border-bottom" style="background:#f8fafc;font-size:.78rem;color:#64748b;">{{ caption }}</div>
  {% endif %}

  <div style="overflow-x:auto;">
  <table class="table table-hover mb-0" style="font-size:.82rem;min-width:600px;">

    <thead style="background:#f1f5f9;border-bottom:2px solid #e2e8f0;">
      <tr>
        {% for col in columns %}
        <th class="py-2 fw-semibold {% if col.align == 'right' %}text-end{% endif %} {% if forloop.first %}px-3{% elif forloop.last %}pe-3{% endif %}"
            style="color:#475569;white-space:nowrap;">
          {{ col.label }}
          {% if col.sortable %}<span class="bi bi-arrow-down-up ms-1" style="font-size:.6rem;color:#cbd5e1;"></span>{% endif %}
        </th>
        {% endfor %}
      </tr>
    </thead>

    <tbody>
      {% for row in rows %}
      <tr style="{% if striped and row|get_item:striped %}background:#fafafa;{% else %}background:#fff;{% endif %}border-bottom:1px solid #f1f5f9;">
        {% for col in columns %}
        <td class="py-2 {% if col.align == 'right' %}text-end{% endif %} {% if forloop.first %}px-3{% elif forloop.last %}pe-3{% endif %}"
            style="{% if col.muted %}color:#64748b;{% else %}color:#0f172a;{% endif %}">

          {# Bar column #}
          {% if bar_key and col.key == bar_key and bar_max %}
            {% with val=row|get_item:col.key %}
            <div class="d-flex align-items-center justify-content-end gap-2">
              <div style="width:48px;height:5px;border-radius:3px;background:#e2e8f0;overflow:hidden;flex-shrink:0;">
                <div style="height:100%;border-radius:3px;background:var(--cab-primary, #6366f1);width:{% widthratio row|get_item:bar_key bar_max 100 %}%;"></div>
              </div>
              <span class="fw-semibold" style="min-width:72px;text-align:right;">{{ val }}</span>
            </div>
            {% endwith %}

          {# Badge column #}
          {% elif col.badge_key %}
            {% with val=row|get_item:col.key flag=row|get_item:col.badge_key %}
            {% if val and val != "—" %}
              {% if flag %}
                <span class="px-2 py-1 rounded-2" style="font-size:.73rem;background:#dcfce7;color:#166534;">{{ val }}</span>
              {% else %}
                <span class="px-2 py-1 rounded-2" style="font-size:.73rem;background:#fef9c3;color:#854d0e;">{{ val }}</span>
              {% endif %}
            {% else %}
              <span style="color:#cbd5e1;">—</span>
            {% endif %}
            {% endwith %}

          {# Icon + text column #}
          {% elif col.icon_key %}
            {% with val=row|get_item:col.key %}
            {% if val and val != "—" %}
              <span class="bi {{ col.icon_key }} me-1" style="color:var(--cab-primary,#6366f1);font-size:.7rem;"></span>{{ val }}
            {% else %}
              <span style="color:#cbd5e1;">—</span>
            {% endif %}
            {% endwith %}

          {# Default #}
          {% else %}
            {% with val=row|get_item:col.key %}
            {% if val and val != "—" %}
              {% if col.bold %}<span class="fw-semibold">{{ val }}</span>{% else %}{{ val }}{% endif %}
            {% else %}
              <span style="color:#cbd5e1;">—</span>
            {% endif %}
            {% endwith %}
          {% endif %}

        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>

    {% if summary %}
    <tfoot style="background:#f1f5f9;border-top:2px solid #e2e8f0;">
      <tr>
        {% for col in columns %}
        <td class="py-2 fw-bold {% if col.align == 'right' %}text-end{% endif %} {% if forloop.first %}px-3{% elif forloop.last %}pe-3{% endif %}"
            style="color:#0f172a;">
          {% with val=summary|get_item:col.key %}
          {% if val %}{{ val }}{% endif %}
          {% endwith %}
        </td>
        {% endfor %}
      </tr>
    </tfoot>
    {% endif %}

  </table>
  </div>
</div>