{% 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 %}