{# Spec 125: one row per dbt model (local-mode grouping).
   Expects:
     model_groups: list[dict]  — ModelGroup DTOs from OpportunityExplorerService.query_model_groups
     pagination: PaginationContext
#}
<div id="explorer-content">
  {% if model_groups and model_groups | length > 0 %}
    <div class="ui-table-wrap">
      <table class="ui-table">
        <thead>
          {% set mg_cols = [
            ('project', 'Project', 'left'),
            ('table', 'Object', 'left'),
            ('type', 'Type', 'left'),
            ('workload', 'Workload', 'left'),
            ('cost', 'Query Cost', 'right'),
            ('savings', 'Savings', 'right'),
            ('age', 'Last Detected', 'right'),
          ] %}
          <tr class="ui-table-head-row">
            {% for col_key, col_label, col_align in mg_cols %}
            <th class="ui-table-th ui-table-th-{{ col_align }} cursor-pointer select-none"
                data-on:click="$expDirection = $expSort === '{{ col_key }}' && $expDirection === 'desc' ? 'asc' : 'desc'; $expSort = '{{ col_key }}'; $expPage = 1; @get('/opportunities/filter', {indicator: 'expFetching'})">
              {{ col_label }}
            </th>
            {% endfor %}
            <th class="ui-table-th ui-table-th-center cursor-pointer select-none" style="min-width: 120px;"
                data-on:click="$expDirection = $expSort === 'state' && $expDirection === 'asc' ? 'desc' : 'asc'; $expSort = 'state'; $expPage = 1; @get('/opportunities/filter', {indicator: 'expFetching'})">
              <span>State</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {% for g in model_groups %}
            {% set model_url = '/projects/' ~ g.config_id ~ '/models/' ~ (g.dbt_model_name | urlencode) %}
            <tr class="ui-table-row cursor-pointer"
                tabindex="0"
                role="link"
                aria-label="Open model {{ g.dbt_model_name }} with {{ g.opportunity_count }} issue(s)"
                onclick="window.location='{{ model_url }}'"
                onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='{{ model_url }}'; }">
              <td class="ui-table-td max-w-[180px]">
                <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">{{ g.project_name }}</span>
              </td>
              <td class="ui-table-td max-w-[260px]" title="{{ g.affected_table }}">
                <span class="flex items-center gap-2 min-w-0">
                  <span class="block truncate text-[13px] text-slate-800 dark:text-slate-200">{{ g.dbt_model_name }}</span>
                  {% if g.opportunity_count > 1 %}
                  <span class="ui-pill ui-pill-neutral text-[11px] shrink-0">{{ g.opportunity_count }} issues</span>
                  {% endif %}
                </span>
              </td>
              <td class="ui-table-td">
                {% if g.opportunity_count == 1 %}
                  <span class="text-[13px] text-slate-800 dark:text-slate-200">{{ g.opportunity_types[0] | replace('_', ' ') }}</span>
                {% else %}
                  {# Show first 2 types + "+N more" if there are further ones #}
                  <span class="text-[13px] text-slate-800 dark:text-slate-200">
                    {{ g.opportunity_types[0] | replace('_', ' ') }}{% if g.opportunity_types | length >= 2 %}, {{ g.opportunity_types[1] | replace('_', ' ') }}{% endif %}{% if g.opportunity_types | length > 2 %} +{{ g.opportunity_types | length - 2 }} more{% endif %}
                  </span>
                {% endif %}
              </td>
              <td class="ui-table-td">
                {% if g.workload_kind == 'build' %}
                  <span class="ui-signal-chip text-brand-700 dark:text-brand-200" title="All findings classified as build">
                    <span class="ui-legend-dot bg-brand-500"></span>
                    Build
                  </span>
                {% elif g.workload_kind == 'consumption' %}
                  <span class="ui-signal-chip text-teal-700 dark:text-teal-300" title="All findings classified as consumption">
                    <span class="ui-legend-dot bg-teal-500"></span>
                    Consumption
                  </span>
                {% elif g.workload_kind == 'mixed' %}
                  <span class="ui-signal-chip text-amber-700 dark:text-amber-300" title="This model has both build and consumption findings">
                    <span class="ui-legend-dot bg-amber-500"></span>
                    Mixed
                  </span>
                {% else %}
                  <span class="ui-signal-chip text-slate-600 dark:text-slate-400" title="Workload unclassified">
                    <span class="ui-legend-dot bg-slate-400 dark:bg-slate-500"></span>
                    Unclassified
                  </span>
                {% endif %}
              </td>
              <td class="ui-table-td ui-table-td-right whitespace-nowrap">
                {% if g.total_query_cost_value is not none %}
                  <span class="text-[13px] text-slate-800 dark:text-slate-200">{{ g.total_query_cost_value | format_usd }}</span>
                {% else %}
                  <span class="ui-table-caption mt-0">—</span>
                {% endif %}
              </td>
              <td class="ui-table-td ui-table-td-right whitespace-nowrap">
                {% if g.total_savings_value is not none and g.total_savings_value > 0 %}
                  <span class="text-[13px] text-slate-800 dark:text-slate-200">~{{ g.total_savings_value | format_usd }}</span>
                  <span class="ui-table-caption ml-1 text-emerald-600 dark:text-emerald-400">↓</span>
                {% else %}
                  <span class="ui-table-caption mt-0">—</span>
                {% endif %}
              </td>
              <td class="ui-table-td ui-table-td-right whitespace-nowrap">
                {{ g.last_detected_at.strftime("%d/%m/%Y") if g.last_detected_at else "—" }}
              </td>
              <td class="ui-table-td ui-table-td-center whitespace-nowrap">
                {% if g.worst_state == 'high_risk' %}
                  <span class="ui-signal-chip whitespace-nowrap text-red-700 dark:text-red-300" title="At least one high-risk finding on this model"><span class="ui-legend-dot bg-red-500"></span>High risk</span>
                {% elif g.worst_state == 'failed' %}
                  <span class="ui-signal-chip whitespace-nowrap text-red-700 dark:text-red-300" title="Solution generation failed"><span class="ui-legend-dot bg-red-500"></span>Failed</span>
                {% elif g.worst_state == 'requires_review' %}
                  <span class="ui-signal-chip whitespace-nowrap text-amber-700 dark:text-amber-300" title="At least one finding needs human review"><span class="ui-legend-dot bg-amber-500"></span>Review</span>
                {% elif g.worst_state == 'generating' %}
                  <span class="ui-signal-chip whitespace-nowrap text-brand-700 dark:text-brand-200" title="A solution is generating"><span class="ui-legend-dot bg-brand-500 animate-pulse"></span>Generating</span>
                {% elif g.worst_state == 'upstream_fix' %}
                  <span class="ui-signal-chip whitespace-nowrap text-amber-700 dark:text-amber-300" title="Covered by an upstream fix"><span class="ui-legend-dot bg-amber-500"></span>Upstream fix</span>
                {% elif g.worst_state == 'safe' %}
                  <span class="ui-signal-chip whitespace-nowrap text-emerald-700 dark:text-emerald-300" title="Low-risk, ready to apply"><span class="ui-legend-dot bg-emerald-500"></span>Safe</span>
                {% elif g.worst_state == 'resolved' %}
                  <span class="ui-signal-chip whitespace-nowrap text-slate-600 dark:text-slate-400" title="Resolved"><span class="ui-legend-dot bg-slate-400"></span>Resolved</span>
                {% elif g.worst_state == 'skipped' %}
                  <span class="ui-signal-chip whitespace-nowrap text-slate-600 dark:text-slate-400" title="Query cost is below the configured minimum. Lower the threshold on the Configuration page to generate a solution for this model."><span class="ui-legend-dot bg-slate-400 dark:bg-slate-500"></span>Skipped</span>
                {% else %}
                  <span class="ui-signal-chip whitespace-nowrap" title="Awaiting analysis"><span class="ui-legend-dot bg-slate-300 dark:bg-slate-600"></span>Awaiting</span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% include "opportunities/_pagination.html" %}
  {% else %}
    <p class="ui-type-body-sm text-slate-500 dark:text-slate-400 py-8 text-center">
      No opportunities match your filters
    </p>
  {% endif %}
</div>