{% extends "base.html" %}
{% load i18n widget_tweaks template_tools %}

{% block head %}
    {{ block.super }}
    <script type="text/javascript" src="{{ STATIC_URL }}common/js/ajax-modal.js"></script>
    <style>
        .show-duplicates {
            cursor: pointer;
        }
        .show-duplicates .fa.fa-caret-down {
            display: none;
        }
        .show-duplicates.active .fa.fa-caret-down {
            display: inline-block;
        }
        .show-duplicates.active .fa.fa-caret-right {
            display: none;
        }
        .duplicates-container {
            display: none;
            font-size: 12px;
        }
        .duplicates-container.active {
            display: table-row;
        }
    </style>
    {{ search_original_form.media }}
{% endblock %}

{% block subtitle %}
    <i class="fa fa-code-fork"></i> {% trans 'Merge users' %}
    <a href="" class="btn btn text-primary" data-toggle="modal" data-target="#info-list">
        <i class="fa fa-info-circle fa-2x"></i>
    </a>
{% endblock %}

{% block actions %}
    <a href="{% url 'accounts:user-list' %}" class="btn btn-default">
        {% trans 'Back to the user list' %}
    </a>
{% endblock %}

{% block main %}
    {% include 'cms/accounts/mtpuser_merge_info_modals.html' %}
    <form class="form" style="width: 150px;" id="search-original">
        {% for field in search_original_form %}
            <div class="form-group">
                {% render_field field class+="form-control" %}
            </div>
        {% endfor %}
        <script type="text/javascript">
            $(document).ready(function(){
                var merge_detail_url = '{% url "accounts:user-merge-detail" %}';
                $('#search-original select').change(function(){
                    if ($(this).val() !== '') {
                        window.location.href = merge_detail_url + '?user_uuid=' + $(this).val()
                    }
                });
            });
        </script>
    </form>
    {% if mtpuser_list %}
        <div class="panel panel-default">
            <table class="table table-bordered table-stripped" id="duplicates-table">
                <thead>
                    <tr>
                        <th></th>
                        <th>{% trans 'Username' %}</th>
                        <th>{% trans 'First name' %}</th>
                        <th>{% trans 'Last name' %}</th>
                        <th>{% trans 'Email' %}</th>
                        <th>{% trans 'Origin' %}</th>
                        <th>{% trans 'Creation date' %}</th>
                        <th>
                            {% trans 'Users to merge' %}
                            <a href="" class="text-primary" data-toggle="modal" data-target="#info-merge-count">
                                <i class="fa fa-info-circle"></i>
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for mtpuser in mtpuser_list %}
                        {% include 'cms/accounts/mtpuser_merge_item.html' %}
                    {% endfor %}
                </tbody>
            </table>
            <div class="panel-footer">
                {% pagination %}
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.show-duplicates').click(function(){
                    // Hide all the others duplicates
                    $('#duplicates-table .active').removeClass('active');

                    // Show the wanted duplicate container
                    $(this).addClass('active');
                    $('.duplicates-' + $(this).data('user-id')).addClass('active');
                });
            });
        </script>
    {% else %}
        <p>{% trans 'No duplicate users found.' %}</p>
    {% endif %}
{% endblock %}