{% extends "base.html" %}

{% block title %}{{ title }} in {{ hit_title }}{% endblock %}

{% block style %}
<link href="{{ url_for("static", filename="css/diff.css") }}" rel="stylesheet"/>
{% endblock %}

{% block content %}
<div class="container">
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Home</a></li>
      <li class="breadcrumb-item active">{{ title }}</li>
    </ol>
  </nav>

  <div class="d-flex flex-wrap align-items-baseline gap-3 mb-1">
    <h1 class="h4 mb-0">Link "{{ title }}" in "{{ hit_title }}"</h1>
    <a href="https://en.wikipedia.org/wiki/{{ title }}" target="_blank" class="text-muted small">{{ title }} ↗</a>
    <a href="https://en.wikipedia.org/wiki/{{ hit_title }}" target="_blank" class="text-muted small">{{ hit_title }} ↗</a>
  </div>

  <div class="d-flex gap-3 mb-4 text-muted small">
    <span>{{ total }} mentions total</span>
    <span>{{ with_link }} already linked ({{ "{:.0%}".format(with_link / total) }})</span>
  </div>

  <div class="mb-4">
    <table class="diff">{{ diff | safe }}</table>
  </div>

  <form method="POST" class="mb-4">
    <input type="hidden" name="hit" value="{{ hit_title }}">
    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-success">Save edit</button>
      <a href="{{ url_for("article_page", url_title=url_title, after=hit_title) }}" class="btn btn-outline-secondary">Skip</a>
    </div>
  </form>

  {% if hits %}
  <details class="border rounded p-3">
    <summary class="text-muted small" style="cursor:pointer">{{ hits | length }} other candidates</summary>
    <ol class="mt-3 mb-0 small">
    {% for hit in hits %}
      <li class="mb-1">
        <a href="{{ url_for("article_page", url_title=url_title, title=hit.title) }}">{{ hit.title }}</a>
      </li>
    {% endfor %}
    </ol>
  </details>
  {% endif %}
</div>
{% endblock %}