{% extends "base.html" %}
{% from "_macros.html" import status, sample_button %}
{% block title %}First-run check — Video to LLM{% endblock %}
{% set problems = problems | default([], true) %}
{% block content %}
<div class="page-head">
  <div>
    <h1>Is this computer ready?</h1>
    <p class="page-sub">Everything below runs here. Nothing is sent anywhere.</p>
  </div>
</div>

<ol class="panel" style="list-style:none;margin:0;padding:0">
  {% for check in report.checks %}
  <li style="display:flex;gap:var(--space-4);padding:var(--space-4);
             border-bottom:1px solid var(--color-divider)">
    <div class="mono text-muted" style="width:28px;flex:none">{{ "%02d"|format(loop.index) }}</div>
    <div style="flex:1;min-width:0">
      <div style="display:flex;align-items:baseline;gap:var(--space-3)">
        <h4 style="margin:0">{{ check.title }}</h4>
        <span class="status {{ 'status-done' if check.state.value == 'ok'
                               else 'status-attention' if check.state.value == 'fail'
                               else 'status-waiting' if check.state.value == 'warn'
                               else 'status-ready' }}">
          <span class="status-dot" aria-hidden="true"></span>
          <span>{{ {'ok':'Found','warn':'Worth a look','fail':'Needs setting up','optional':'Optional'}[check.state.value] }}</span>
        </span>
      </div>
      <p style="margin:var(--space-1) 0 0;font-size:14px">{{ check.detail }}</p>
      {% if check.remediation and check.state.value != 'ok' %}
        <p class="text-muted" style="margin:var(--space-1) 0 0;font-size:13px;white-space:pre-line">{{ check.remediation }}</p>
      {% endif %}
    </div>
  </li>
  {% endfor %}
</ol>

{% if problems %}
<div class="panel" style="border-left:3px solid var(--color-accent)" role="alert">
  <ul style="margin:0;padding-left:var(--space-4);font-size:14px">
    {% for problem in problems %}<li>{{ problem }}</li>{% endfor %}
  </ul>
</div>
{% endif %}

<div class="panel" style="margin-top:var(--space-4)">
  {% if report.ready %}
    <h4>Ready to go</h4>
    <p>You can process video on this computer now. Descriptions are optional and
       can be switched on later without redoing any work.</p>
    <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
      <a class="btn btn-primary" href="/jobs/new">Start a job</a>
      {{ sample_button() }}
    </div>
  {% else %}
    <h4>Not quite ready</h4>
    <p>Sort out the items marked above, then check again.</p>
    <a class="btn btn-secondary" href="/launch">Check again</a>
  {% endif %}
</div>
{% endblock %}