{# Vendored verbatim from opportunities/index.html so the failures
   workspace looks and behaves identically - same shell, summary
   grid, filter surface, table + pagination. Only deltas: page title,
   eyebrow, and the include paths point at failures/ partials. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">

  {# Page header - identical to cloud (eyebrow + title + Observed/Estimated/Validated tooltip) #}
  <div class="ui-page-header">
    <div class="flex flex-wrap items-start justify-between gap-3">
      <div>
        <div class="flex items-center gap-2">
          <h1 class="ui-page-title mt-0">Failures</h1>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="How to read this page">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              <p><span class="font-medium text-rose-700 dark:text-rose-300">Reason</span> is BigQuery's <code class="font-mono">error_result.reason</code> classifier.</p>
              <p class="mt-2"><span class="font-medium text-slate-900 dark:text-slate-100">Executions</span> counts every failed run for the same query body.</p>
              <p class="mt-2"><span class="font-medium text-emerald-700 dark:text-emerald-300">Suggestions</span> means audit has an AST rewrite that may be the fix.</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </div>

  {# Summary cards #}
  {% include "failures/_summary_cards.html" %}

  {# Filter controls #}
  <div class="mt-6 mb-4 ui-surface p-4">
    {% include "failures/_filter_controls.html" %}
  </div>

  {# Table + pagination #}
  <div class="mt-4 ui-surface overflow-hidden">
    {% include "failures/_table.html" %}
  </div>

</section>
{% endblock %}