{% 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 unlinked mentions of a Wikipedia article and add the links.</p>
      <form class="d-flex gap-2 justify-content-center" 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>
  </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 %}