{% extends "base.html" %}
{% block title %}Coverage — Swiss Truth{% endblock %}

{% block content %}
<style>
  .cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; }

  .cov-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
  }
  .cov-card.gap    { border-left: 3px solid #ef4444; }
  .cov-card.medium { border-left: 3px solid #f59e0b; }
  .cov-card.good   { border-left: 3px solid #22c55e; }

  .cov-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
  .cov-name   { font-weight: 700; font-size: 0.95rem; color: #111; }
  .cov-pct    { font-size: 1.4rem; font-weight: 700; }
  .cov-pct.red    { color: #ef4444; }
  .cov-pct.yellow { color: #f59e0b; }
  .cov-pct.green  { color: #22c55e; }

  .cov-bar-wrap { height: 6px; background: #f3f4f6; border-radius: 99px; overflow: hidden; margin-bottom: 0.8rem; }
  .cov-bar-fill { height: 100%; border-radius: 99px; transition: width .4s; }
  .cov-bar-fill.red    { background: #ef4444; }
  .cov-bar-fill.yellow { background: #f59e0b; }
  .cov-bar-fill.green  { background: #22c55e; }

  .cov-meta { font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.8rem; }

  .topics-list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
  .topic-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
  .topic-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .topic-dot.covered { background: #22c55e; }
  .topic-dot.gap     { background: #ef4444; }
  .topic-text        { color: #374151; }
  .topic-text.gap    { color: #9ca3af; }

  .btn-gen {
    display: inline-block;
    font-size: 0.78rem; font-weight: 600;
    background: #f0f4ff; color: #3b4fc4;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
  }
  .btn-gen:hover { background: #e0e7ff; }

  .summary-bar {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 14px; padding: 1rem 1.4rem;
    margin-bottom: 1.5rem;
  }
  .summary-item { text-align: center; }
  .summary-value { font-size: 1.6rem; font-weight: 700; color: #111; line-height: 1; }
  .summary-label { font-size: 0.72rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }
</style>

<div style="margin-bottom:1.2rem; display:flex; align-items:baseline; gap:1rem;">
  <h1 style="font-size:1.4rem;font-weight:700;color:#111;margin:0;letter-spacing:-0.02em;">Coverage Dashboard</h1>
  <span style="font-size:0.85rem;color:#9ca3af;">Topic-Lücken pro Domain</span>
</div>

{% set total_topics   = domains | sum(attribute='total_topics') %}
{% set covered_topics = domains | sum(attribute='covered_topics') %}
{% set gap_domains    = domains | selectattr('coverage_pct', 'lt', 50) | list | length %}
{% set good_domains   = domains | selectattr('coverage_pct', 'ge', 80) | list | length %}

<div class="summary-bar">
  <div class="summary-item">
    <div class="summary-value">{{ domains | length }}</div>
    <div class="summary-label">Domains</div>
  </div>
  <div class="summary-item">
    <div class="summary-value">{{ covered_topics }}/{{ total_topics }}</div>
    <div class="summary-label">Topics abgedeckt</div>
  </div>
  <div class="summary-item">
    <div class="summary-value" style="color:#ef4444;">{{ gap_domains }}</div>
    <div class="summary-label">Domains mit Lücken (&lt;50%)</div>
  </div>
  <div class="summary-item">
    <div class="summary-value" style="color:#22c55e;">{{ good_domains }}</div>
    <div class="summary-label">Gut abgedeckt (≥80%)</div>
  </div>
  <div class="summary-item">
    <div class="summary-value">{{ domains | sum(attribute='certified') }}</div>
    <div class="summary-label">Zertifizierte Claims</div>
  </div>
</div>

<div class="cov-grid">
  {% for d in domains %}
  {% if d.coverage_pct < 50 %}{% set color = 'red' %}{% set card_class = 'gap' %}
  {% elif d.coverage_pct < 80 %}{% set color = 'yellow' %}{% set card_class = 'medium' %}
  {% else %}{% set color = 'green' %}{% set card_class = 'good' %}{% endif %}

  <div class="cov-card {{ card_class }}">
    <div class="cov-header">
      <span class="cov-name">{{ d.name }}</span>
      <span class="cov-pct {{ color }}">{{ d.coverage_pct }}%</span>
    </div>

    <div class="cov-bar-wrap">
      <div class="cov-bar-fill {{ color }}" style="width:{{ d.coverage_pct }}%"></div>
    </div>

    <div class="cov-meta">
      {{ d.certified }} zertifizierte Claims · {{ d.covered_topics }}/{{ d.total_topics }} Topics abgedeckt
    </div>

    <div class="topics-list">
      {% for t in d.topics %}
      <div class="topic-row">
        <span class="topic-dot {{ 'covered' if t.covered else 'gap' }}"></span>
        <span class="topic-text {{ '' if t.covered else 'gap' }}">{{ t.topic }}</span>
      </div>
      {% endfor %}
    </div>

    {% if current_user and current_user.role == 'admin' %}
    <a href="/admin/generate?domain={{ d.id }}" class="btn-gen">+ Claims generieren</a>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endblock %}