{% extends "partials/layout.html" %}

{% block pageContent %}
    <div class="box">
        <h2>{{ "Merge Package" | tr }}: {{ pkgbase.Name }}</h2>

        <p>
            {{
                "Use this form to merge the package base %s%s%s into "
                "another package."
                | tr | format("<strong>", pkgbase.Name, "</strong>") | safe
            }}
            {{ "The following packages will be deleted: " | tr }}
        </p>

        <ul>
            {% for package in pkgbase.packages.all() %}
                <li>{{ package.Name }}</li>
            {% endfor %}
        </ul>

        <p>
            {{ "Once the package has been merged it cannot be reversed. " | tr }}
            {{ "Enter the package name you wish to merge the package into. " | tr }}
            {{ "Select the checkbox to confirm action." | tr }}
        </p>

        <form id="merge-form" action="/pkgbase/{{ pkgbase.Name }}/merge" method="post">
            <fieldset>
                <input type="hidden" name="next" value="{{ next }}" />
                <p>
                    <label id="merge-into" for="merge_into">
                        {{ "Merge into:" | tr }}
                    </label>
                    <input id="merge_into"
                           type="text"
                           name="into"
                           value="{{ into }}"
                           autocomplete="off"
                    />
                </p>

                <p>
                    <label class="confirmation">
                        <input type="checkbox" name="confirm" />
                        {{ "Confirm package merge" | tr }}
                    </label>
                </p>

                <p>
                    <input class="button"
                           type="submit"
                           value="{{ 'Merge' | tr }}"
                    />
                </p>
            </fieldset>
        </form>

		{# Bootstrap typeahead-pkgbase-merge.js #}
		<script type="text/javascript"
				src="/static/js/typeahead-pkgbase-merge.js"></script>

    </div>

{% endblock %}