{% if job_lookup_rows %}
<style>
  .job-records-table,
  .job-records-table th,
  .job-records-table td {
    color: #000 !important;
    font-family: "Courier New", Courier, monospace !important;
    letter-spacing: 0;
  }

  .job-records-table .job-records-th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-slate-50);
    font-family: "Courier New", Courier, monospace !important;
    text-transform: none;
  }

  .dark .job-records-table .job-records-th {
    background: var(--color-slate-900);
  }
</style>
<section class="mt-5 min-w-0">
  <div class="ui-table-wrap overflow-auto" style="max-height: 25.5rem;">
    <table class="ui-table job-records-table" style="table-layout: fixed; min-width: 2380px; width: 2380px;">
      <colgroup>
        <col style="width: 300px;" />
        <col style="width: 300px;" />
        <col style="width: 165px;" />
        <col style="width: 165px;" />
        <col style="width: 165px;" />
        <col style="width: 180px;" />
        <col style="width: 90px;" />
        <col style="width: 90px;" />
        <col style="width: 180px;" />
        <col style="width: 130px;" />
        <col style="width: 170px;" />
        <col style="width: 150px;" />
        <col style="width: 320px;" />
        <col style="width: 260px;" />
        <col style="width: 180px;" />
        <col style="width: 260px;" />
        <col style="width: 260px;" />
        <col style="width: 260px;" />
        <col style="width: 420px;" />
      </colgroup>
      <thead>
        <tr class="ui-table-head-row">
          <th class="ui-table-th job-records-th text-left">job_id</th>
          <th class="ui-table-th job-records-th text-left">user_email</th>
          <th class="ui-table-th job-records-th text-left">creation_time</th>
          <th class="ui-table-th job-records-th text-left">start_time</th>
          <th class="ui-table-th job-records-th text-left">end_time</th>
          <th class="ui-table-th job-records-th text-left">statement_type</th>
          <th class="ui-table-th job-records-th text-left">state</th>
          <th class="ui-table-th job-records-th text-left">cache_hit</th>
          <th class="ui-table-th job-records-th text-left">error_result</th>
          <th class="ui-table-th job-records-th text-right">total_slot_ms</th>
          <th class="ui-table-th job-records-th text-right">total_bytes_processed</th>
          <th class="ui-table-th job-records-th text-right">total_bytes_billed</th>
          <th class="ui-table-th job-records-th text-left">destination_table</th>
          <th class="ui-table-th job-records-th text-left">referenced_tables</th>
          <th class="ui-table-th job-records-th text-left">labels</th>
          <th class="ui-table-th job-records-th text-left">performance_insights</th>
          <th class="ui-table-th job-records-th text-left">query_hashes</th>
          <th class="ui-table-th job-records-th text-left">timeline</th>
          <th class="ui-table-th job-records-th text-left">query</th>
        </tr>
      </thead>
      <tbody>
        {% for record in job_lookup_rows %}
        <tr class="ui-table-row">
          <td class="ui-table-td text-xs truncate">{{ record.job_id }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.user_email }}</td>
          <td class="ui-table-td text-xs whitespace-nowrap">{{ record.creation_time_label }}</td>
          <td class="ui-table-td text-xs whitespace-nowrap">{{ record.start_time_label }}</td>
          <td class="ui-table-td text-xs whitespace-nowrap">{{ record.end_time_label }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.statement_type }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.state }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.cache_hit }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.error_result }}</td>
          <td class="ui-table-td ui-table-td-right text-xs truncate">{{ record.total_slot_ms }}</td>
          <td class="ui-table-td ui-table-td-right text-xs truncate">{{ record.total_bytes_processed }}</td>
          <td class="ui-table-td ui-table-td-right text-xs truncate">{{ record.total_bytes_billed }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.destination_table }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.referenced_tables }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.labels }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.performance_insights }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.query_hashes }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.timeline }}</td>
          <td class="ui-table-td text-xs truncate">{{ record.query }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}