<!-- Article Scorecard: per-article performance with attention flags -->

<!-- Filters -->
<div class="card mb-4" style="padding:0.75rem 1rem;">
  <form class="flex flex-wrap gap-3 items-end"
        hx-get="{{ url_for('admin.seo_scorecard') }}"
        hx-target="#tab-content"
        hx-trigger="change"
        hx-include="this">
    <input type="hidden" name="days" value="{{ date_range_days }}">

    <div>
      <label class="text-xs font-semibold text-slate block mb-1">Template</label>
      <select name="template_slug" class="form-input" style="min-width:140px">
        <option value="">All</option>
        {% for item in scorecard %}
        {% if item.template_slug and item.template_slug not in seen_templates %}
        <option value="{{ item.template_slug }}" {% if item.template_slug == current_template %}selected{% endif %}>{{ item.template_slug }}</option>
        {% endif %}
        {% endfor %}
      </select>
    </div>

    <div>
      <label class="text-xs font-semibold text-slate block mb-1">Language</label>
      <select name="language" class="form-input" style="min-width:80px">
        <option value="">All</option>
        <option value="en" {% if current_language == 'en' %}selected{% endif %}>EN</option>
        <option value="de" {% if current_language == 'de' %}selected{% endif %}>DE</option>
      </select>
    </div>

    <div>
      <label class="text-xs font-semibold text-slate block mb-1">Sort</label>
      <select name="sort" class="form-input" style="min-width:120px">
        {% for col, label in [('impressions', 'Impressions'), ('clicks', 'Clicks'), ('ctr', 'CTR'), ('position_avg', 'Position'), ('pageviews', 'Pageviews'), ('published_at', 'Published')] %}
        <option value="{{ col }}" {% if col == current_sort %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>

    <div>
      <label class="text-xs font-semibold text-slate block mb-1">Dir</label>
      <select name="dir" class="form-input" style="min-width:80px">
        <option value="desc" {% if current_dir == 'desc' %}selected{% endif %}>Desc</option>
        <option value="asc" {% if current_dir == 'asc' %}selected{% endif %}>Asc</option>
      </select>
    </div>
  </form>
</div>

{% if scorecard %}
<div class="card" style="overflow-x:auto">
  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th style="text-align:right">Impressions</th>
        <th style="text-align:right">Clicks</th>
        <th style="text-align:right">CTR</th>
        <th style="text-align:right">Pos</th>
        <th style="text-align:right">Views</th>
        <th style="text-align:right">Bounce</th>
        <th>Published</th>
        <th>Flags</th>
      </tr>
    </thead>
    <tbody>
      {% for a in scorecard %}
      <tr>
        <td style="max-width:250px">
          <a href="/{{ a.language or 'en' }}{{ a.url_path }}" target="_blank" class="text-sm" title="{{ a.url_path }}">{{ a.title or a.url_path }}</a>
          {% if a.template_slug %}
          <br><span class="text-xs text-slate">{{ a.template_slug }}</span>
          {% endif %}
        </td>
        <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(a.impressions | int) }}</td>
        <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(a.clicks | int) }}</td>
        <td style="text-align:right" class="mono text-sm">{{ "%.1f" | format((a.ctr or 0) * 100) }}%</td>
        <td style="text-align:right" class="mono text-sm">{{ "%.1f" | format(a.position_avg or 0) }}</td>
        <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(a.pageviews | int) }}</td>
        <td style="text-align:right" class="mono text-sm">
          {% if a.bounce_rate is not none %}{{ "%.0f" | format(a.bounce_rate * 100) }}%{% else %}-{% endif %}
        </td>
        <td class="mono text-sm">{{ a.published_at[:10] if a.published_at else '-' }}</td>
        <td>
          {% if a.flag_low_ctr %}
          <span class="badge-warning" style="font-size:0.625rem">Low CTR</span>
          {% endif %}
          {% if a.flag_no_clicks %}
          <span class="badge-danger" style="font-size:0.625rem">No Clicks</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<p class="text-xs text-slate mt-2">{{ scorecard | length }} articles shown</p>
{% else %}
<div class="card text-center" style="padding:2rem">
  <p class="text-slate text-sm">No published articles match the current filters, or no search/analytics data synced yet.</p>
</div>
{% endif %}
