{% extends "webpage/base.html" %}
{% block scriptHeader %}
    {{ block.super }}
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.2.0/diff.js"></script>
{% endblock scriptHeader %}
{% block content %}
    {% if merged_ids %}
        {% for merge_id in merged_ids %}Merged {{ merge_id }}{% endfor %}
    {% else %}
        <style>
.checkbox:checked ~ .card{
  background: #ffc107;
}
.checkbox {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 18rem;
    height: 100%;
    z-index: 999;
    cursor: pointer;
}
.checkbox:hover ~ .card {
  background: #ffc107;
}

.card_area{
  position: relative;
  margin-bottom: 30px;
}
.primary {
  border: 4px solid red !important;
}
.preview {
  display: none;
}
#preview-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10em;
  background-color: #F5F5F5;
  border-top: 1px solid black;
  overflow: scroll;
}
.preview-content {
  border: 1px solid black;
}
.fundament-default-footer {
  margin-top: 40em !important;
}
.relations {
  white-space: pre;
}
        </style>
        <div class="container">
            <form class="mt-5" method="post">
                {% csrf_token %}
                <button id="submitbtn" type="submit" class="btn btn-primary" disabled>Merge selected</button>
                <input type="hidden"
                       name="content_type"
                       value="{{ content_type.app_label }}.{{ content_type.model }}" />
                <input type="hidden" id="inputprimary" name="primary" />
                <div id="primarymsg">Select one option as the primary option</div>
                <div class="card-columns mt-5">
                    {% for object in object_list %}
                        <div class="card_area">
                            <input class="checkbox"
                                   type="checkbox"
                                   id="to_merge"
                                   name="to_merge"
                                   value="{{ object.pk }}"
                                   ondblclick="setPrimary({{ object.pk }})"
                                   onmouseover="showPreview({{ object.pk }})" />
                            <div id="preview-{{ object.pk }}" class="preview">
                                <p class="str">{{ object }}</p>
                                <p class="dates">
                                    {% if object.start_date_written %}
                                        {{ object.start_date_written }}
                                        {% if object.end_date_written %}-{% endif %}
                                    {% endif %}
                                    {% if object.end_date_written %}{{ object.end_date_written }}{% endif %}
                                </p>
                                <p class="notes">
                                    {% if object.notes %}{{ object.notes }}{% endif %}
                                </p>
                                <p class="relations">
                                    {% for rel in object.personinstitution_set.all %}{{ rel }}{% endfor %}
                                    {% for rel in object.personplace_set.all %}{{ rel }}{% endfor %}
                                </p>
                            </div>
                            <div class="card border" style="width: 18rem;" id="card-{{ object.pk }}">
                                <div class="card-body">
                                    <h5 class="card-title">{{ object }} ({{ object.pk }})</h5>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </form>
            <div id="preview-area" class="row">
                <div id="primary-preview-area" class="col-sm preview-content"></div>
                <div id="current-preview-area" class="col-sm preview-content"></div>
            </div>
        </div>
    {% endif %}
{% endblock content %}
{% block scripts %}
    <script>
function setPrimary(id) {
  document.getElementById("inputprimary").value = id;
  Array.from(document.getElementsByClassName("primary")).forEach(function(el) {
    el.classList.remove("primary");
  });
  document.getElementById("card-"+id).classList.add("primary");
  document.getElementById("submitbtn").removeAttribute("disabled");
  document.getElementById("primary-preview-area").innerHTML = document.getElementById("preview-"+id).innerHTML;
  document.getElementById("primary-preview-area").style.border = "2px solid red";
  document.getElementById("primarymsg").innerHTML = "&nbsp;";
}
function showPreview(id) {
  previewarea = document.getElementById("current-preview-area");
  previewarea.innerHTML = "";

  preview = document.getElementById("preview-"+id);
  parray = preview.getElementsByTagName("p");
  for (let i=0; i<parray.length; i++) {
    diff = mydiff(parray[i]);
    previewarea.appendChild(mydiff(parray[i]));
  }
}

function mydiff(el) {
  primary = document.getElementById("primary-preview-area");
  pel = primary.getElementsByClassName(el.classList.value)[0];
  p = document.createElement('p');
  p.classList.add(el.classList.value);
  if (pel) {
    const diff = Diff.diffChars(el.innerHTML, pel.innerHTML);
    diff.forEach((part) => {
      const color = part.added ? 'green' : part.removed ? 'red' : 'grey';
      span = document.createElement('span');
      span.style.color = color;
      span.innerHTML = part.value;
      p.appendChild(span);
    });
  }
  return p;
}
  
    </script>
{% endblock scripts %}