<% layout = 'layouts/main' %>
<% title = 'Execution Runs' %>

<div class="page-header">
  <h1>Execution Runs</h1>
  <div class="header-actions">
    <span class="badge badge-project"><%= (typeof project !== 'undefined' && project && project.name) ? project.name : 'Unknown Project' %></span>
    <a href="/analytics?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm">Analytics</a>
  </div>
</div>

<% if (typeof runs === 'undefined' || !runs || runs.length === 0) { %>
<div class="empty-state">
  <p>No test executions yet. Run the pipeline from the Stories page to see executions here.</p>
  <a href="/stories?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-primary" style="margin-top:0.5rem;">View Stories</a>
</div>
<% } else { %>

<div class="run-list" style="display:flex;flex-direction:column;gap:1rem;">
  <% (runs || []).forEach(r => { %>
  <div class="run-card-wrapper <%= r.success ? 'run-passed' : (r.success === null ? 'run-pending' : 'run-failed') %>" 
       style="display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-left:6px solid <%= r.success ? 'var(--success)' : (r.success === null ? 'var(--brand-ochre)' : 'var(--danger)') %>;border-radius:var(--radius-lg);padding:1.25rem;transition:transform 0.15s, border-color 0.15s;box-shadow:var(--shadow-1);"
       onmouseover="this.style.transform='translateY(-2px)';this.style.borderColor='var(--border-strong)';"
       onmouseout="this.style.transform='none';this.style.borderColor='var(--border)';">
    
    <a href="/runs/<%= r.id %>?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="run-card-main" style="display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--text);flex:1;">
      <div class="run-icon" style="font-size:1.75rem;"><%= r.success ? '✅' : (r.success === null ? '⏳' : '❌') %></div>
      <div class="run-info">
        <div class="run-name" style="font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-0.01em;"><%= (r.id || '').substring(0, 24) %>...</div>
        <div class="run-test" style="font-family:var(--font-mono);font-size:0.85rem;color:var(--text-muted);margin:0.2rem 0;"><%= r.testName || 'Unknown Test' %></div>
        <div class="run-meta" style="font-size:0.8rem;color:var(--text-disabled);font-weight:500;">
          Status: <strong><%= r.success ? 'Passed' : (r.success === null ? 'Running / Pending' : 'Failed') %></strong> · 
          Duration: <strong><%= r.duration ? (r.duration / 1000).toFixed(1) + 's' : 'N/A' %></strong> ·
          Errors: <strong><%= typeof r.failedCount !== 'undefined' ? r.failedCount : 0 %></strong> ·
          Healing: <strong><%= (typeof r.healedCount !== 'undefined' && r.healedCount > 0) ? r.healedCount + ' healed' : 'none' %></strong>
        </div>
      </div>
    </a>
    
    <div class="run-actions" style="display:flex;gap:0.5rem;align-items:center;margin-left:1.5rem;">
      <% if (r.hasReport) { %>
      <a href="/export/report/<%= r.id %>?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm btn-primary" target="_blank">HTML Report</a>
      <a href="/export/pdf/<%= r.id %>?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm">Raw TXT</a>
      <% } else { %>
      <span class="run-no-report" style="color:var(--text-disabled);font-size:0.8rem;font-weight:500;">⏳ No Report</span>
      <% } %>
      <% if (r.hasAllure) { %>
      <a href="/allure-report?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm" target="_blank" style="background-color:var(--brand-ochre);color:var(--text);border-color:var(--border-strong);">Allure</a>
      <% } %>
    </div>
  </div>
  <% }) %>
</div>

<% } %>
