{% extends base_template %}
{% load static %}
{% block scriptHeader %}
    {{ block.super }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.2.0/diff.js"></script>
{% endblock scriptHeader %}
{% block styles %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "css/group.css" %}">
{% endblock styles %}
{% block content %}
    <div class="container">
        <form class="form-inline" onsubmit="appendParam(event)">
            <div class="input-group">
                <input type="text"
                       class="form-control"
                       placeholder="Enter ID to add"
                       name="addId">
                <button type="submit" class="btn btn-secondary">Add object by ID</button>
            </div>
        </form>
        <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="group-container mb-4">
                {% for object in object_list %}
                    <input class="checkbox"
                           type="checkbox"
                           id="to_merge_{{ object.pk }}"
                           name="to_merge"
                           value="{{ object.pk }}" />
                    <label id="label_{{ object.pk }}"
                           for="to_merge_{{ object.pk }}"
                           ondblclick="setPrimary({{ object.pk }})"
                           onmouseover="showPreview({{ object.pk }})">{{ object }} ({{ object.pk }})</label>
                    <div id="preview-{{ object.pk }}" class="preview">{{ object.djg_merge_preview }}</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>
{% endblock content %}
{% block scripts %}
    <script src="{% static "js/group.js" %}"></script>
{% endblock scripts %}