{% extends "base.html" %}

{% block title %}Missing Link{% endblock %}

{% block content %}
<div class="container">
  <div class="row justify-content-center mt-5">
    <div class="col-md-6 text-center">
      <h1 class="mb-2">Missing Link</h1>
      <p class="text-muted mb-4">Find Wikipedia articles that mention a topic but don't link to it — then add the link.</p>
      <form class="d-flex gap-2 justify-content-center mb-5" action="{{ url_for('index') }}">
        <input class="form-control" name="q" placeholder="Article title…" style="max-width:360px" autofocus>
        <button class="btn btn-primary" type="submit">Search</button>
      </form>
      <div class="row g-4 text-start mt-1">
        <div class="col-md-4">
          <div class="d-flex gap-3">
            <span class="fs-4">🔍</span>
            <div>
              <h6 class="mb-1">Search</h6>
              <p class="text-muted small mb-0">Enter a Wikipedia article title. Missing Link searches for other articles that mention it by name but don't have a wikilink.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="d-flex gap-3">
            <span class="fs-4">👀</span>
            <div>
              <h6 class="mb-1">Review</h6>
              <p class="text-muted small mb-0">For each candidate article, a diff shows exactly what would change. You can see the proposed link in context before doing anything.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="d-flex gap-3">
            <span class="fs-4">✅</span>
            <div>
              <h6 class="mb-1">Save or skip</h6>
              <p class="text-muted small mb-0">Save the edit directly to Wikipedia with one click, or skip to the next candidate. Log in with your Wikipedia account to save edits.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if debug %}
  <div class="row mt-5">
    <div class="col">
      <h2 class="h6 text-muted text-uppercase mb-3">Examples</h2>
      <table class="table table-sm table-hover w-auto">
        <thead class="table-light">
          <tr>
            <th>Article</th>
            <th class="text-end">Total</th>
            <th class="text-end">% linked</th>
          </tr>
        </thead>
        <tbody>
        {% for item in examples %}
        <tr>
          <td><a href="{{ article_url(item.title) }}">{{ item.title }}</a></td>
          <td class="text-end text-muted">{{ item.total }}</td>
          <td class="text-end text-muted">{{ "{:.0%}".format(item.with_links / item.total) }}</td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}