<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Battle Report: {{agentA}} vs {{agentB}}</title>
  <style>{{{styles}}}</style>
</head>
<body>
  <h1>Battle Report</h1>
  <p style="color: var(--text-secondary)">{{mode}} &bull; {{date}}</p>

  <div class="card">
    <h2>Result</h2>
    <div class="stats-grid">
      <div class="stat-box">
        <div class="stat-value {{winnerClass agentA winner}}">{{agentA}}</div>
        <div class="stat-label">Agent A</div>
      </div>
      <div class="stat-box">
        <div class="stat-value">vs</div>
        <div class="stat-label">{{mode}}</div>
      </div>
      <div class="stat-box">
        <div class="stat-value {{winnerClass agentB winner}}">{{agentB}}</div>
        <div class="stat-label">Agent B</div>
      </div>
    </div>
    <p style="margin-top: 1rem"><strong>Winner:</strong> <span class="winner">{{winner}}</span></p>
    <p><strong>Reason:</strong> {{reason}}</p>
  </div>

  <div class="card">
    <h2>Narrative</h2>
    <p>{{narrative}}</p>
  </div>

  {{#each rounds}}
  <div class="card">
    <h2>Round {{this.round}}</h2>
    <div class="round">
      <h3>{{../agentA}}</h3>
      <div class="transcript">{{this.agentAResponse}}</div>
    </div>
    <div class="round">
      <h3>{{../agentB}}</h3>
      <div class="transcript">{{this.agentBResponse}}</div>
    </div>
  </div>
  {{/each}}

  <div class="card">
    <h2>Coaching Priorities</h2>
    <div class="stats-grid">
      <div>
        <h3>{{agentA}}</h3>
        <ul>{{#each coachingA}}<li>{{this}}</li>{{/each}}</ul>
      </div>
      <div>
        <h3>{{agentB}}</h3>
        <ul>{{#each coachingB}}<li>{{this}}</li>{{/each}}</ul>
      </div>
    </div>
  </div>

  <footer style="margin-top: 2rem; color: var(--text-secondary); font-size: 0.8rem; text-align: center">
    Generated by Miyagi CLI &bull; {{generatedAt}}
  </footer>
</body>
</html>
