<!-- Pipeline Table Detail: column schema + 10-row sample data -->
<!-- This partial replaces #catalog-content-<table_name> via HTMX -->
<div id="catalog-content-{{ table_name }}" style="padding:1.25rem">

  <!-- Column schema -->
  <div class="mb-4">
    <p class="text-xs font-semibold text-slate uppercase mb-2" style="letter-spacing:0.05em">Schema</p>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px">
      {% for col in columns %}
      <div style="background:#F8FAFC;border:1px solid #E2E8F0;border-radius:6px;padding:6px 10px">
        <span class="text-xs font-semibold text-navy mono">{{ col.column_name }}</span>
        <span class="text-xs text-slate ml-2">{{ col.data_type | upper }}</span>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Sample rows -->
  {% if sample %}
  <div>
    <p class="text-xs font-semibold text-slate uppercase mb-2" style="letter-spacing:0.05em">
      Sample (first {{ sample | length }} rows)
    </p>
    <div style="overflow-x:auto;max-height:320px;overflow-y:auto">
      <table class="table" style="font-size:0.75rem">
        <thead style="position:sticky;top:0;background:#fff;z-index:1">
          <tr>
            {% for col in columns %}
            <th style="white-space:nowrap">{{ col.column_name }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in sample %}
          <tr>
            {% for col in columns %}
            <td class="mono" style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
                title="{{ row[col.column_name] | string }}">
              {% set val = row[col.column_name] %}
              {% if val is none %}
              <span class="text-slate">null</span>
              {% elif val | string | length > 40 %}
              {{ val | string | truncate(40, true) }}
              {% else %}
              {{ val }}
              {% endif %}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <p class="text-sm text-slate">Table is empty.</p>
  {% endif %}

</div>
