{% extends "base.html" %}
{% from "macros.html" import finding %}
{% block title %}PagePatrol report · {{ report.results[0].page_title or report.target }}{% endblock %}
{% block content %}
  <header>
    <h1>{{ report.results[0].page_title or "Untitled page" }}</h1>
    <p>{{ report.url }}</p>
  </header>

  <div class="totals">
    <div class="total error"><b>{{ totals.error }}</b>errors</div>
    <div class="total warning"><b>{{ totals.warning }}</b>warnings</div>
    <div class="total info"><b>{{ totals.info }}</b>notes</div>
  </div>

  {% if report.results | length > 1 %}
  <nav>
    {% for r in report.results %}
    <a href="#vp-{{ r.viewport.name }}">{{ r.viewport.name }} · {{ r.findings | length }}</a>
    {% endfor %}
  </nav>
  {% endif %}

  {% for r in report.results %}
  <section class="viewport" id="vp-{{ r.viewport.name }}">
    <h2>{{ r.viewport.name }} <span class="check">{{ r.viewport.width }}×{{ r.viewport.height }}</span></h2>
    <div class="layout">
      <div class="shot">
        {% if r.annotated_screenshot %}
        <div class="shot-toggle">
          <label><input type="radio" name="shot-{{ loop.index }}" checked onchange="this.closest('.shot').querySelector('img').src='{{ r.annotated_screenshot }}'"> marked</label>
          <label><input type="radio" name="shot-{{ loop.index }}" onchange="this.closest('.shot').querySelector('img').src='{{ r.screenshot }}'"> clean</label>
        </div>
        <img src="{{ r.annotated_screenshot }}" alt="Screenshot at {{ r.viewport.name }} with findings marked" loading="lazy">
        {% elif r.screenshot %}
        <img src="{{ r.screenshot }}" alt="Screenshot at {{ r.viewport.name }}" loading="lazy">
        {% endif %}
      </div>

      <div>
        {% if r.review_summary %}<p class="summary"><span class="ai">AI</span> {{ r.review_summary }}</p>{% endif %}
        {% if r.review_error %}<p class="summary failed">AI review failed: {{ r.review_error }}</p>{% endif %}
        {% if r.findings %}
        <div class="findings">
          {% for g in group_by_check(r.findings) %}
          <div class="group">
            <div class="group-head {{ g.severity.value }}"><span class="check">{{ g.check }}</span> <span class="count">{{ g.count }}</span></div>
            {% for f in g.findings[:5] %}{{ finding(f) }}{% endfor %}
            {% if g.count > 5 %}
            <details>
              <summary>{{ g.count - 5 }} more</summary>
              {% for f in g.findings[5:] %}{{ finding(f) }}{% endfor %}
            </details>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="empty">No issues found at this size.</div>
        {% endif %}

        {% if r.console %}
        <details class="console">
          <summary>Console output ({{ r.console | length }})</summary>
          <ul>
            {% for m in r.console %}
            <li class="{{ m.type }}"><code>[{{ m.type }}] {{ m.text }}</code>{% if m.location %} <span class="check">{{ m.location }}</span>{% endif %}</li>
            {% endfor %}
          </ul>
        </details>
        {% endif %}
      </div>
    </div>
  </section>
  {% endfor %}

  <footer>
    {% if report.llm %}AI review by {{ report.llm.model }} ({{ report.llm.depth }}, {{ "{:,}".format(report.llm.input_tokens) }} in / {{ "{:,}".format(report.llm.output_tokens) }} out tokens{% if report.llm.cost_usd is not none %}, about ${{ "%.3f"|format(report.llm.cost_usd) }}{% endif %}) &middot; {% endif %}
    PagePatrol {{ report.pagepatrol_version }} · {{ report.started_at.strftime("%Y-%m-%d %H:%M UTC") }} · {{ report.duration_s }}s
  </footer>
{% endblock %}