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

{% block modal_title %}{{ translate("PERMISSION.MANAGE") }}{% endblock %}

{% block modal_size %}modal-lg{% endblock %}

{% block modal_body %}
    <form class="js-form" method="PUT" action="{{ site.uri.public }}/api/roles/r/{{ role.slug }}/permissions">
        {% include "forms/csrf.html.twig" %}
        <div class="js-form-alerts">
        </div>
        <div class="js-form-permissions">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>{{ translate("NAME") }}</th>
                        <th>{{ translate("DESCRIPTION") }}</th>
                        <th>{{ translate("PERMISSION.HOOK_CONDITION") }}</th>
                        <th>{{ translate("REMOVE") }}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="padding-bottom">
                <label>{{ translate("PERMISSION.ASSIGN_NEW") }}:</label>
                <select class="form-control js-select-new" type="text">
                    <option></option>
                </select>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <button type="submit"
                        class="btn btn-block btn-lg btn-success">{{ translate("PERMISSION.UPDATE") }}</button>
            </div>
            <div class="col-xs-12 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="role-permissions-select-option" type="text/x-handlebars-template">
    <div>
        <strong>
            {{name}}
        </strong>
        <br>
        {{description}}
        <div>
            <code>{{this.slug}}</code>
        </div>
        <div>
            ↳ <code>{{conditions}}</code>
        </div>
    </div>
</script>

<script id="role-permissions-row" type="text/x-handlebars-template">
    <tr class="uf-collection-row">
        <td>
            {{name}}
            <input type="hidden" name="value[{{ rownum }}][permission_id]" value="{{id}}">
        </td>
        <td>
            {{description}}
        </td>
        <td class="uf-collection-col-wrap">
            <div>
                <code>{{this.slug}}</code>
            </div>
            <div>
                ↳ <code>{{conditions}}</code>
            </div>
        </td>
        <td>
            <button type="button" class="btn btn-link btn-trash js-delete-row pull-right" title="Delete"> <i class="fa fa-trash"></i> </button>
        </td>
    </tr>
</script>
{% endverbatim %}

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