<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
<meta charset="utf-8" />
<title>{{ app_name }} — {{ label.title }} {{ created }}</title>
<style>
:root{
  --bg-0:#080c13; --bg-1:#0d1421; --panel:rgba(16,26,43,.72);
  --blue:#4f8de0; --blue-hi:#8fc0ff;
  --accent:#3fae7c; --accent-hi:#4ec38a;
  --tx:#f5f5f7; --tx-2:#a8b0bd; --tx-3:#6b7583;
  --line:rgba(143,192,255,.12); --line-hi:rgba(143,192,255,.22);
  --ok:#4ec38a; --mid:#7aa9e6; --low:#e0705a; --bad:#d3574f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:linear-gradient(180deg,#0b111c 0%,#16263d 45%,#080c13 100%);
  color:var(--tx);font-size:14px;line-height:1.5;min-height:100vh;padding:38px 26px 60px;
  font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
.wrap{max-width:1180px;margin:0 auto}

header{display:flex;align-items:baseline;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
header h1{font-size:22px;font-weight:400;letter-spacing:.01em}
header h1 b{font-weight:600}
header .meta{margin-left:auto;color:var(--tx-3);font-size:12px;text-align:right}

.setup{display:flex;flex-wrap:wrap;gap:26px;margin:20px 0 26px;
  padding:15px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.setup div{font-size:12px;color:var(--tx-3)}
.setup b{display:block;color:var(--tx);font-size:14px;font-weight:500;margin-top:2px}

.winner{position:relative;border:1px solid rgba(78,195,138,.32);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(26,60,46,.8),rgba(20,28,44,.7));padding:20px 24px;
  display:flex;align-items:center;gap:22px}
.winner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--accent-hi),transparent)}
.winner img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid rgba(78,195,138,.4)}
.winner .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.winner h2{font-size:19px;font-weight:450;margin:6px 0 4px}
.winner p{color:var(--tx-2);font-size:13.5px}
.winner .score{margin-left:auto;text-align:right;padding-left:22px;border-left:1px solid var(--line)}
.winner .score .n{font-size:48px;font-weight:250;color:var(--accent-hi);line-height:1}
.winner .score .n span{font-size:15px;color:var(--tx-3)}
.winner .score .c{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-top:5px}

h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);margin:30px 0 12px}

table{width:100%;border-collapse:collapse;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--panel)}
th{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);
  text-align:right;padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{text-align:left;padding-left:18px}
td{padding:12px 10px;text-align:right;font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(143,192,255,.07);color:var(--tx-2);font-size:13px}
td:first-child{text-align:left;padding-left:18px}
tr:last-child td{border-bottom:none}
tr.win td{background:linear-gradient(90deg,rgba(78,195,138,.12),transparent 65%)}
.file{display:flex;align-items:center;gap:11px}
.file img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line-hi)}
.file .t{color:var(--tx);font-size:13px}
.file .s{color:var(--tx-3);font-size:11px;margin-top:2px}
.sc{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.sc .n{font-size:20px;font-weight:300;color:var(--tx)}
tr.win .sc .n{color:var(--accent-hi)}
.lamp{width:8px;height:8px;border-radius:50%;display:inline-block}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.vcard{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px}
.vcard .h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.vcard .h b{font-size:13px;font-weight:500}
.vcard .h .s{margin-left:auto;font-size:18px;font-weight:300;color:var(--tx)}
.vcard p{color:var(--tx-2);font-size:12.5px}
.vcard .kv{display:flex;flex-wrap:wrap;gap:12px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.vcard .kv div{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.vcard .kv b{display:block;font-size:13px;color:var(--tx);text-transform:none;letter-spacing:0;
  font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums}

.chart{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:15px;margin-top:10px;font-size:11.5px;color:var(--tx-2)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:15px;height:2px;border-radius:2px;display:block}

.note{margin-top:14px;padding:12px 15px;border-radius:12px;border:1px solid var(--line);
  background:rgba(143,192,255,.05);font-size:12px;color:var(--tx-2);line-height:1.6}
.note b{color:var(--tx);font-weight:500}
.warn{margin-top:14px;padding:12px 15px;border-radius:12px;
  border:1px solid rgba(224,138,68,.28);background:rgba(224,138,68,.08);
  font-size:12px;color:var(--tx-2);line-height:1.6}
.warn b{color:var(--tx)}
footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--tx-3);font-size:11.5px;display:flex;gap:14px;flex-wrap:wrap}
</style>
</head>
<body>
<div class="wrap">

  <header>
    <h1>fini<b>SCOPE</b></h1>
    <span style="color:var(--tx-3);font-size:12px">{{ label.title }}</span>
    <div class="meta">
      {{ created }}<br>{{ label.profile }}: {{ profile_label }}
    </div>
  </header>

  <div class="setup">
    <div>{{ label.images }}<b>{{ metrics|length }}</b></div>
    <div>{{ label.window }}<b>{{ window_size }} px · {{ window_mode }}</b></div>
    {% if sampling %}<div>{{ label.sampling }}<b>{{ sampling }}</b></div>{% endif %}
    {% if pixel_um %}<div>{{ label.pixel }}<b>{{ pixel_um }} µm</b></div>{% endif %}
    {% if focal_mm %}<div>{{ label.focal }}<b>{{ focal_mm }} mm</b></div>{% endif %}
    {% if aperture_mm %}<div>{{ label.aperture }}<b>{{ aperture_mm }} mm</b></div>{% endif %}
  </div>

  {% if winner %}
  <div class="winner">
    {% if winner.thumb %}<img src="{{ winner.thumb }}" alt="">{% endif %}
    <div>
      <div class="k">{{ label.winner }}</div>
      <h2>{{ winner.name }}</h2>
      <p>{{ label.wins }}</p>
    </div>
    <div class="score">
      <div class="n">{{ winner.score }}<span> / 100</span></div>
      <div class="c">{{ label.score }}</div>
    </div>
  </div>
  {% endif %}

  <h3>{{ label.comparison }}</h3>
  <table>
    <thead>
      <tr>
        <th>{{ label.image }}</th><th>{{ label.score }}</th>
        <th>{{ label.sharpness }}</th><th>{{ label.detail }}</th>
        <th>{{ label.snr }}</th><th>{{ label.noise }}</th>
        <th>{{ label.contrast }}</th><th>as3</th>
      </tr>
    </thead>
    <tbody>
      {% for m in metrics %}
      <tr class="{{ 'win' if m.is_winner }}">
        <td>
          <div class="file">
            {% if m.thumb %}<img src="{{ m.thumb }}" alt="">{% endif %}
            <div><div class="t">{{ m.name }}</div><div class="s">{{ m.subtitle }}</div></div>
          </div>
        </td>
        <td><div class="sc"><span class="lamp" style="background:{{ m.lamp_color }}"></span>
            <span class="n">{{ m.score }}</span></div></td>
        <td>{{ m.mtf50 }}</td>
        <td>{{ m.detail }}</td>
        <td>{{ m.snr }}</td>
        <td>{{ m.noise }}</td>
        <td>{{ m.contrast }}</td>
        <td style="color:var(--tx-3)">{{ m.as3 }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <h3>{{ label.spectrum }}</h3>
  <div class="chart">
    {{ chart_svg }}
    <div class="legend">
      {% for m in metrics %}
      <span><i style="background:{{ m.curve_color }}"></i>{{ m.name }}</span>
      {% endfor %}
    </div>
  </div>
  <div class="note">{{ chart_note }}</div>

  <h3>{{ label.verdicts }}</h3>
  <div class="cards">
    {% for m in metrics %}
    <div class="vcard">
      <div class="h">
        <span class="lamp" style="background:{{ m.lamp_color }}"></span>
        <b>{{ m.name }}</b>
        <span class="s">{{ m.score }}</span>
      </div>
      <p><b style="color:var(--tx)">{{ m.verdict }}</b> {{ m.verdict_long }}</p>
      <div class="kv">
        {% for key, value in m.extras %}<div>{{ key }}<b>{{ value }}</b></div>{% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>

  {% if warnings %}
  <div class="warn">
    {% for w in warnings %}<div>{{ w }}</div>{% endfor %}
  </div>
  {% endif %}

  <div class="note" style="margin-top:22px">{{ score_note }}</div>

  <footer>
    <span>{{ label.made_with }} {{ app_name }} {{ app_version }}</span>
    <span>·</span>
    <span>© {{ app_year }} {{ app_author }} —
      <a href="{{ app_url }}" style="color:var(--blue-hi);text-decoration:none">{{ app_url_label }}</a></span>
    <span>·</span>
    <span>{{ label.licence }}</span>
    <span>·</span>
    <span><a href="{{ donate_url }}" style="color:inherit;text-decoration:none"
      ><span style="color:var(--ok)">&#9829;</span> {{ label.donate }}</a></span>
  </footer>
</div>
</body>
</html>
