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

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

{% block modal_body %}
<form class="js-form" method="PUT" action="{{site.uri.public}}/api/users/u/{{user.user_name}}/roles">
    {% include "forms/csrf.html.twig" %}
    <div class="js-form-alerts">
    </div>
    <div class="js-form-roles">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>{{translate("NAME")}}</th>
                    <th>{{translate("DESCRIPTION")}}</th>
                    <th>{{translate("REMOVE")}}</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="padding-bottom">
            <label>{{translate("ROLE.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-8 col-sm-4">
            <button type="submit" class="btn btn-block btn-lg btn-success">{{translate("UPDATE")}}</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="user-roles-select-option" type="text/x-handlebars-template">
    <div>
        <strong>
            {{name}}
        </strong>
        <br>
        {{description}}
    </div>
</script>

<script id="user-roles-row" type="text/x-handlebars-template">
    <tr class="uf-collection-row">
        <td>
            {{name}}
            <input type="hidden" name="value[{{ rownum }}][role_id]" value="{{id}}">
        </td>
        <td>
            {{description}}
        </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 %}