{% extends "modals/modal.html.twig" %}

{% block modal_title %}{{translate("ORGANISATION.MERGE")}}{% endblock %}

{% block modal_body %}
<form class="js-form" method="POST" action="{{site.uri.public}}/api/organisations/merge">
    {% include "forms/csrf.html.twig" %}
    <input type="hidden" name="source_slug" value="{{organisation.slug}}">
    <div class="js-form-alerts">
    </div>
    <div class="js-form-organisations">
        <p>{{translate("ORGANISATION.MERGE_INFORM", {name: organisation.name})}}<br><small>{{translate("MERGE_CANNOT_UNDONE")}}</small></p>
        <div class="padding-bottom">
            <label>{{translate("MERGE_INTO")}}:</label>
            <select class="form-control js-select-new" type="text" name="target_slug"></select>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-8 col-sm-4">
            <button type="submit" class="btn btn-block btn-lg btn-success">{{translate("MERGE")}}</button>
        </div>
        <div class="col-xs-4 col-sm-3 pull-right">
            <button type="button" class="btn btn-block btn-lg btn-link" data-dismiss="modal">{{translate('CANCEL')}}</button>
        </div>
    </div>
</form>

{# This contains a series of <script> blocks, each of which is a client-side Handlebars template.
 # Note that these are NOT Twig templates, although the syntax is similar.  We wrap them in the `verbatim` tag,
 # so that Twig will output them directly into the DOM instead of trying to treat them like Twig templates.
 #
 # These templates require handlebars-helpers.js, moment.js
#}
{% verbatim %}
<script id="organisation-select-option" type="text/x-handlebars-template">
    <div>
        <strong>
            {{name}}
        </strong>
        <br>
        {{description}}
    </div>
</script>
{% endverbatim %}

<!-- Include validation rules -->
<script>
    {% include "pages/partials/page.js.twig" %}
</script>
{% endblock %}