{% extends "admin/core/base.html" %}
{% load foundation %}

{% block title %}Merge Users{% endblock %}
{% block title-section %}Merge user accounts{% endblock %}

{% block nav %}
    {% include "admin/press/nav.html" %}
{% endblock nav %}

{% block body %}
    <section>
        <div class="row expanded">
            <div class="large-12 columns">
                <div class="box">
                    <div class="title-area">
                        <h2>Merge and delete user</h2>
                    </div>
                    <div class="content">
                        <div class="row expanded">
                            <div class="large-6 columns">
                                <div class="input-group">
                                    <span class="input-group-label">Merge From</span>
                                    <input class="input-group-field" type="text" name="from"
                                           placeholder="Search by email, first name and last name">
                                </div>
                            </div>
                            <div class="large-6 columns">
                                <div class="input-group">
                                    <span class="input-group-label">Merge Into</span>
                                    <input class="input-group-field" type="text" name="into"
                                           placeholder="Search by email, first name and last name">
                                </div>
                            </div>
                            <div class="large-12 columns">
                                <input type="submit" class="button" value="Search" name="from_search"
                                       onclick="search_accounts()">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <form method="POST">
                {% csrf_token %}
                <div>
                    <div class="large-6 columns end">
                        <div class="box">
                            <div class="title-area">
                                <h2>Merger From</h2>
                            </div>
                            <table class="small scroll" id="from_table">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Email</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td colspan="4">Use the search box above to find users.</td>
                                </tr>
                                </tbody>
                            </table>
                            <span id="from_hidden" style="display: none">Loading...</span>
                        </div>
                    </div>
                    <div class="large-6 columns end">
                        <div class="box">
                            <div class="title-area">
                                <h2>Merge Into</h2>
                            </div>
                            <table class="small scroll" id="into_table">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Email</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td colspan="4">Use the search box above to find users.</td>
                                </tr>
                                </tbody>
                            </table>
                            <span id="into_hidden" style="display: none">Loading...</span>
                        </div>
                    </div>
                    <div class="large-12 columns">
                        <div class="box">
                            <p>Select a user from each column and click the button below. Note: this action is not
                                reversible.</p>
                            <button type="submit" name="merge_users" class="success button">Merge users</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
{% endblock %}

{% block js %}
    {% include "elements/jqte.html" %}
    {% include "elements/merge_users.html" %}
{% endblock %}