{# Cost impact verification partial (spec 108) #}

{% if cost_verification.status in ['queued', 'running'] %}
<div class="ui-section-card space-y-4">
  <div class="flex items-center gap-2">
    <p class="ui-card-label">Cost Impact Verification</p>
    <span class="ui-pill ui-pill-blue">In progress</span>
  </div>
  <div class="flex items-center gap-3 px-4 py-3 border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950">
    <svg class="w-5 h-5 text-blue-500 dark:text-blue-400 animate-spin shrink-0" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <div>
      <p class="text-sm font-medium text-blue-800 dark:text-blue-200">Building models... Please wait.</p>
      <p class="text-[13px] text-blue-600 dark:text-blue-400">
        Running <code class="font-mono">dbt build</code> with the applied changes and comparing costs against the baseline.
      </p>
    </div>
  </div>
</div>

{% elif cost_verification.status == 'completed' and cost_verification.cost_comparison %}
<div class="ui-section-card space-y-4">
  <div class="flex items-center gap-2">
    <p class="ui-card-label">Cost Impact Verification</p>
    <span class="ui-pill ui-pill-success">Completed</span>
  </div>

  {# Summary banner #}
  {% if cost_verification.net_delta_usd is not none %}
  {% if cost_verification.net_delta_usd < 0 %}
  <div class="flex items-center gap-2 rounded border border-emerald-200 bg-emerald-50 px-4 py-3 dark:border-emerald-800 dark:bg-emerald-950/40">
    <svg class="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-sm font-medium text-emerald-700 dark:text-emerald-300">
      Net Saving: ${{ "%.2f"|format(cost_verification.net_delta_usd | abs) }}
    </p>
  </div>
  {% elif cost_verification.net_delta_usd > 0 %}
  <div class="flex items-center gap-2 rounded border border-red-200 bg-red-50 px-4 py-3 dark:border-red-800 dark:bg-red-950/40">
    <svg class="h-5 w-5 text-red-500 dark:text-red-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/>
    </svg>
    <p class="text-sm font-medium text-red-700 dark:text-red-300">
      Net Cost Increase: ${{ "%.2f"|format(cost_verification.net_delta_usd) }}
    </p>
  </div>
  {% else %}
  <div class="flex items-center gap-2 rounded border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-900">
    <p class="text-sm font-medium text-slate-700 dark:text-slate-300">No net cost change detected.</p>
  </div>
  {% endif %}
  {% endif %}

  {# Comparison table #}
  {% set comparison = cost_verification.cost_comparison %}
  {% if comparison and comparison.models %}
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-slate-200 dark:border-slate-700">
          <th class="py-2 text-left text-[13px] font-medium text-slate-500 dark:text-slate-400">Model</th>
          <th class="py-2 text-right text-[13px] font-medium text-slate-500 dark:text-slate-400">Before</th>
          <th class="py-2 text-right text-[13px] font-medium text-slate-500 dark:text-slate-400">After</th>
          <th class="py-2 text-right text-[13px] font-medium text-slate-500 dark:text-slate-400">Delta</th>
          <th class="py-2 text-right text-[13px] font-medium text-slate-500 dark:text-slate-400">Change %</th>
        </tr>
      </thead>
      <tbody>
        {% for model in comparison.models %}
        <tr class="border-b border-slate-100 dark:border-slate-800
          {% if model.delta_usd is not none and model.delta_usd < 0 %} bg-emerald-50/50 dark:bg-emerald-950/20{% elif model.delta_usd is not none and model.delta_usd > 0 %} bg-amber-50/50 dark:bg-amber-950/20{% endif %}">
          <td class="py-2 text-slate-700 dark:text-slate-300">
            {% if model.is_changed_model %}
            <span class="inline-flex items-center gap-1">
              <svg class="w-3.5 h-3.5 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <code class="font-mono text-[13px]">{{ model.model_name }}</code>
            </span>
            {% else %}
            <code class="font-mono text-[13px]">{{ model.model_name }}</code>
            {% endif %}
          </td>
          <td class="py-2 text-right text-slate-800 dark:text-slate-200">
            {% if model.before_cost_usd is not none %}${{ "%.4f"|format(model.before_cost_usd) }}{% else %}&mdash;{% endif %}
          </td>
          <td class="py-2 text-right text-slate-800 dark:text-slate-200">
            {% if model.after_cost_usd is not none %}${{ "%.4f"|format(model.after_cost_usd) }}{% else %}&mdash;{% endif %}
          </td>
          <td class="py-2 text-right
            {% if model.delta_usd is not none and model.delta_usd < 0 %} text-emerald-600 dark:text-emerald-400{% elif model.delta_usd is not none and model.delta_usd > 0 %} text-red-600 dark:text-red-400{% else %} text-slate-800 dark:text-slate-200{% endif %}">
            {% if model.delta_usd is not none %}
              {% if model.delta_usd < 0 %}-${{ "%.4f"|format(model.delta_usd | abs) }}{% elif model.delta_usd > 0 %}+${{ "%.4f"|format(model.delta_usd) }}{% else %}$0.0000{% endif %}
            {% else %}&mdash;{% endif %}
          </td>
          <td class="py-2 text-right
            {% if model.pct_change is not none and model.pct_change < 0 %} text-emerald-600 dark:text-emerald-400{% elif model.pct_change is not none and model.pct_change > 0 %} text-red-600 dark:text-red-400{% else %} text-slate-800 dark:text-slate-200{% endif %}">
            {% if model.pct_change is not none %}{{ "%.1f"|format(model.pct_change) }}%{% else %}&mdash;{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
      {% if comparison.summary %}
      <tfoot>
        <tr class="border-t-2 border-slate-300 dark:border-slate-600">
          <td class="py-2 font-medium text-slate-900 dark:text-slate-100">Total</td>
          <td class="py-2 text-right font-medium text-slate-900 dark:text-slate-100">${{ "%.4f"|format(comparison.summary.total_before_usd) }}</td>
          <td class="py-2 text-right font-medium text-slate-900 dark:text-slate-100">${{ "%.4f"|format(comparison.summary.total_after_usd) }}</td>
          <td class="py-2 text-right font-medium
            {% if comparison.summary.net_delta_usd < 0 %} text-emerald-600 dark:text-emerald-400{% elif comparison.summary.net_delta_usd > 0 %} text-red-600 dark:text-red-400{% else %} text-slate-900 dark:text-slate-100{% endif %}">
            {% if comparison.summary.net_delta_usd < 0 %}-${{ "%.4f"|format(comparison.summary.net_delta_usd | abs) }}{% elif comparison.summary.net_delta_usd > 0 %}+${{ "%.4f"|format(comparison.summary.net_delta_usd) }}{% else %}$0.0000{% endif %}
          </td>
          <td class="py-2 text-right font-medium
            {% if comparison.summary.net_pct_change is not none and comparison.summary.net_pct_change < 0 %} text-emerald-600 dark:text-emerald-400{% elif comparison.summary.net_pct_change is not none and comparison.summary.net_pct_change > 0 %} text-red-600 dark:text-red-400{% else %} text-slate-900 dark:text-slate-100{% endif %}">
            {% if comparison.summary.net_pct_change is not none %}{{ "%.1f"|format(comparison.summary.net_pct_change) }}%{% else %}&mdash;{% endif %}
          </td>
        </tr>
      </tfoot>
      {% endif %}
    </table>
  </div>
  <p class="text-[13px] text-slate-500 dark:text-slate-400">
    {{ comparison.summary.model_count }} model{{ 's' if comparison.summary.model_count != 1 else '' }} evaluated.
    <svg class="inline w-3 h-3 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
    marks the changed model.
  </p>
  {% endif %}
</div>

{% elif cost_verification.status == 'failed' %}
<div class="ui-section-card space-y-4">
  <div class="flex items-center gap-2">
    <p class="ui-card-label">Cost Impact Verification</p>
    <span class="ui-pill ui-pill-danger">Failed</span>
  </div>
  <div class="rounded border border-red-200 bg-red-50 px-4 py-3 dark:border-red-800 dark:bg-red-950/40">
    <p class="text-sm font-medium text-red-800 dark:text-red-200">Verification build failed</p>
    {% if cost_verification.error_message %}
    <p class="text-sm text-red-700 dark:text-red-300 mt-1">{{ cost_verification.error_message | truncate(300) }}</p>
    {% endif %}
  </div>
  <form method="post" action="/app/project/{{ config.id }}/opportunity/{{ opportunity.id }}/verify-cost">
    <button type="submit"
            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded
                   border border-slate-300 dark:border-slate-600
                   text-slate-700 dark:text-slate-200
                   bg-white dark:bg-slate-800
                   hover:bg-slate-50 dark:hover:bg-slate-700
                   transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
      </svg>
      Retry Verification
    </button>
  </form>
</div>
{% endif %}