{% include 'header.html' %}
<div class="container">
  {% include 'navigation.html' %}
  <div class="row">
    <div class="column">
      <h1>
        {% if unmatched_link %}Source Database <a href="{{ url_for('unmatched') }}">(Only unmatched)</a>
        {% else %}Unmatched in Source Database
        {% endif %}
      </h1>
      <p><input class="u-full-width" placeholder="{{ query_string }}" id="query_string"></p>
      <table width="100%">
        <tr>
          <th>Name</th>
          <th>Location</th>
          <th>Unit</th>
          <th>Matched</th>
        </tr>
        {% for row in table_data %}
        <tr>
          <td><a href="{{ url_for('process_detail', id=row.id) }}">{{row.name}}</a></td>
          <td>{{row.location}}</td>
          <td>{{row.unit}}</td>
          <td>
            {% if row.matched %}
              <a class="button" href="{{ url_for("match", source=row.id)}}"><i class="fa-solid fa-check"></i> EDIT</a>
            {% else %}
              <a class="button button-primary" href="{{ url_for("match", source=row.id)}}"><i class="fa-solid fa-circle-xmark"></i> ADD</a>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </table>
    </div>
  </div>
</div>

<script type="text/javascript">
var search_bar = document.getElementById("query_string");
search_bar.focus();

var do_search = function () {
  var qs = encodeURIComponent(document.getElementById("query_string").value);
  if (qs) {
    location.assign("{{ url_for('search') }}?database={{ database }}&q=" + qs);
  };
};

search_bar.addEventListener("click", do_search);
search_bar.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    do_search();
  }
});
</script>
{% include 'footer.html' %}
