{% extends "admin/change_form.html" %} {% load i18n static admin_list %} {% load
admin_urls %} {% block object-tools-items %}
<li>
  <a href="{% url 'admin:drip_timeline' original.id 4 7 %}" class=""
    >View Timeline</a
  >
</li>
<li>
  <a href="{% url 'admin:drip_drip_history' original.pk %}" class="historylink">{% translate "History" %}</a>
</li>
{% if has_absolute_url %}
<li>
  <a
    href="../../../r/{{ content_type_id }}/{{ object_id }}/"
    class="viewsitelink"
    >{% trans "View on site" %}</a
  >
</li>
{% endif%} {% endblock %} {% block after_related_objects %}
<style type="text/css" media="screen">
  ul.field-name-selector {
    overflow: auto;
    margin: 0;
    padding: 0;
  }
  ul.field-name-selector li {
    list-style: none;
    float: left;
    margin: 0 4px 4px 0;
    padding: 2px 4px;
    background: #f7f7f7;
    border: 1px #ccc solid;
    cursor: pointer;
  }
  ul.field-name-selector li:hover {
    background: #eee;
  }
</style>

<script type="text/javascript" charset="utf-8">
  (function($) {
    $(document).ready(function($) {

      var data = {{field_data|safe}};

      function pull_field_name(target) {
        // target is input
        $(target).parent().find("ul").remove();

        var ul = $("<ul class='field-name-selector'/>");
        $(target).parent().append(ul);
        var val = $(target).val();

        for (var i=0; i < data.length; i++) {
          var item = data[i];
          if (item[0].indexOf(val) != -1) {
            $(ul).append(`<li data-field=${item[0]}>${item[0]} (${item[1]})</li>`);
          };
        };
      }

      $(document).on("click", "ul.field-name-selector li", function() {
        // clicking a pill clears all pills and places the value in
        $(this).parent().parent().find("input").val($(this).attr('data-field'));
        $(this).parent().remove();
      });

      $(document).on("focusin click keyup", "div.tabular td.field-field_name input, .grp-td.field_name input", function() {
        pull_field_name(this);
      });

    });
  })(django.jQuery);
</script>
{% endblock %}