{% extends "mapentity/mapentity_list.html" %}
{% load i18n mapentity_tags %}
{% load static %}

{% block change_style %}
    <script>
        style_others = window.SETTINGS.map.styles.others;
        window.SETTINGS.map.styles.others = function (feature) {
            if (feature.properties.draft) {
                return window.SETTINGS.map.styles.draftpath;
            }
            return style_others;
        };
    </script>
{% endblock change_style %}

{% block extrahead %}
    {{ block.super }}
    {% csrf_token %}

    <script type="text/javascript">

        $(function () {
            $('#btn-merge').click(function () {
                const table = $('#objects-list').DataTable();
                if (table.rows( { selected: true } )[0].length != 2) {
                    $('#btn-confirm').hide();
                    $('#confirm-merge .modal-body h4').html("{% trans 'Select two paths to merge them' %}");
                } else {
                    $('#confirm-merge .modal-body h4').html('{% trans "Are you sure you want to merge these paths ?" %}');
                    $('#btn-confirm').show();
                }
            });

            $('#btn-confirm').click(function () {
                $('#confirm-merge .modal-body h4').html($('#wait_lightbox').html());
                $('#btn-confirm').hide();

                const table = $('#objects-list').DataTable();
                const params = {
                    path: table.rows( { selected: true } ).data().pluck('id').toArray(),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                }

                $.post("{% url 'core:path-drf-merge-path' %}",
                    params,
                    function (response) {
                        $('#btn-confirm').show();

                        if (response.error) {
                            $('#confirm-merge .modal-body h4').html(response.error);
                            $('#btn-confirm').hide();
                        } else {
                            location.reload();
                        }
                    }
                );
            });

        });

    </script>

{% endblock %}

{% block actions %}
    {% if perms.core.change_path %}
        <a class="dropdown-item" href="#confirm-merge" id="btn-merge" role="button" data-toggle="modal">
            <i class="bi bi-bezier"></i> {% trans "Merge" %}
        </a>
    {% endif %}
{% endblock %}

{% block container %}
    {{ block.super }}
    <div id="wait_lightbox" style="display: none;">
        <div class="progress progress-striped active">
            <div class="bar" style="width: 100%;"></div>
        </div>
    </div>

    <div class="modal fade" id="confirm-merge" tabindex="-1" role="dialog" aria-labelledby="confirm-mergeLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>{% trans "Merge paths" %}</h4>
                </div>
                <div class="modal-body">
                    <h4></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {% trans "Cancel" %}
                    </button>
                    <button type="button" id="btn-confirm" class="btn btn-success success">
                        {% trans "Merge" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{%  endblock %}