{% extends "index.html" %}

{% block content %}
  <section class="section">
    <div class="container">
      <div class="level" style="margin-bottom: 0.75rem;">
        <div class="level-left">
          <div>
            <h1 class="title is-4" style="margin-bottom: 0.2rem;">Contact Match</h1>
            <p class="is-size-7 has-text-grey">
              Manually link Signal, WhatsApp, Instagram, and XMPP identifiers to people.
            </p>
          </div>
        </div>
        <div class="level-right">
          <a class="button is-light" href="{% url 'compose_workspace' %}">
            <span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
            <span>Manual Workspace</span>
          </a>
        </div>
      </div>

      {% if notice_message %}
        <article class="notification is-{{ notice_level|default:'info' }} is-light">
          {{ notice_message }}
        </article>
      {% endif %}

      <div class="columns is-variable is-4">
        <div class="column is-5">
          <article class="box">
            <h2 class="title is-6">Create Or Link Identifier</h2>
            <form method="post">
              {% csrf_token %}
              <div class="field">
                <label class="label is-small">Service</label>
                <div class="select is-fullwidth">
                  <select name="service" required>
                    {% for key, label in service_choices %}
                      <option value="{{ key }}" {% if key == prefill_service %}selected{% endif %}>
                        {{ label }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="field">
                <label class="label is-small">Identifier</label>
                <div class="control">
                  <input class="input" type="text" name="identifier" value="{{ prefill_identifier }}" required>
                </div>
              </div>
              <div class="field">
                <label class="label is-small">Existing Person</label>
                <div class="select is-fullwidth">
                  <select name="person_id">
                    <option value="">- Select person -</option>
                    {% for person in people %}
                      <option value="{{ person.id }}">{{ person.name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="field">
                <label class="label is-small">Or Create Person</label>
                <div class="control">
                  <input class="input" type="text" name="person_name" placeholder="New person name">
                </div>
              </div>
              <button class="button is-link" type="submit">
                <span class="icon is-small"><i class="fa-solid fa-link"></i></span>
                <span>Save Match</span>
              </button>
            </form>
          </article>
        </div>

        <div class="column is-7">
          <article class="box">
            <h2 class="title is-6">Discovered Contacts</h2>
            {% if candidates %}
              <div class="table-container">
                <table class="table is-fullwidth is-hoverable is-striped">
                  <thead>
                    <tr>
                      <th>Person</th>
                      <th>Detected Name</th>
                      <th>Service</th>
                      <th>Identifier</th>
                      <th>Suggested Match</th>
                      <th>Status</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for row in candidates %}
                      <tr>
                        <td>{{ row.linked_person_name|default:"-" }}</td>
                        <td>{{ row.detected_name|default:"-" }}</td>
                        <td>
                          {{ row.service|title }}
                        </td>
                        <td><code>{{ row.identifier }}</code></td>
                        <td>
                          {% if not row.linked_person and row.suggestions %}
                            <div class="buttons are-small">
                              {% for suggestion in row.suggestions %}
                                <form method="post" style="display: inline-flex;">
                                  {% csrf_token %}
                                  <input type="hidden" name="service" value="{{ row.service }}">
                                  <input type="hidden" name="identifier" value="{{ row.identifier }}">
                                  <input type="hidden" name="person_id" value="{{ suggestion.person.id }}">
                                  <button
                                    type="submit"
                                    class="button is-small is-success is-light is-rounded"
                                    title="Accept suggested match">
                                    <span class="icon is-small"><i class="fa-solid fa-check"></i></span>
                                    <span>{{ suggestion.person.name }}</span>
                                  </button>
                                </form>
                              {% endfor %}
                            </div>
                          {% else %}
                            <span class="has-text-grey">-</span>
                          {% endif %}
                        </td>
                        <td>
                          {% if row.linked_person %}
                            <span class="tag is-success is-light">linked</span>
                          {% else %}
                            <span class="tag is-warning is-light">unlinked</span>
                          {% endif %}
                        </td>
                        <td>
                          <a class="button is-small is-light" href="{{ row.compose_url }}">
                            <span class="icon is-small"><i class="fa-solid fa-paper-plane"></i></span>
                            <span>Message</span>
                          </a>
                        </td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% else %}
              <p class="has-text-grey">No contacts discovered yet.</p>
            {% endif %}
          </article>
        </div>
      </div>
    </div>
  </section>

{% endblock %}