<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui">
    <p:dialog id="rolesPermissionsDialog" header="#{bundle['dataverse.permissions.roles.header']}" widgetVar="roleForm" modal="true" styleClass="largePopUp"> 
        <p:panel id="editRolePanel" styleClass="panelLayoutBlock" widgetVar="editRole">
            <p:panel id="editRolePropertiesPanel" styleClass="panelLayoutBlock" widgetVar="roleProperties">
                <div class="row form-horizontal">
                    <div class="col-xs-6 form-group">
                        <label class="col-sm-3 control-label" for="roleName">
                            <span data-toggle="tooltip" data-placement="auto right" class="tooltiplabel text-info" data-container="body" data-original-title="#{bundle['dataverse.permissions.roles.name.title']}">
                                #{bundle['dataverse.permissions.roles.name']}
                            </span>
                        </label>
                        <div class="col-sm-9">
                            <p:panelGrid columns="2" styleClass="noBorders">
                                <p:inputText id="roleName" value="#{managePermissionsPage.role.name}"/>
                                <p:message for="roleName"/>
                            </p:panelGrid>
                        </div>
                    </div>
                    <div class="col-xs-6 form-group">
                        <label class="col-sm-3 control-label" for="roleName">
                            <span data-toggle="tooltip" data-placement="auto right" class="tooltiplabel text-info" data-container="body" data-original-title="#{bundle['dataverse.permissions.roles.id.title']}">
                                #{bundle['dataverse.permissions.roles.id']}
                            </span>
                        </label>
                        <div class="col-sm-9">
                            <p:panelGrid columns="2" styleClass="noBorders">
                                <p:inputText id="roleAlias" value="#{managePermissionsPage.role.alias}"/>
                                <p:message for="roleAlias"/>
                            </p:panelGrid>
                        </div>
                    </div>
                    <div class="col-xs-6 form-group">
                        <label class="col-sm-3 control-label" for="roleName">
                           <span data-toggle="tooltip" data-placement="auto right" class="tooltiplabel text-info" data-container="body" data-original-title="#{bundle['dataverse.permissions.roles.description.title']}">
                                #{bundle.description}
                            </span>
                        </label>
                        <div class="col-sm-9">
                            <p:panelGrid columns="2" styleClass="noBorders" style="width:100%;">
                                <h:panelGroup>
                                    <p:inputText id="roleDescription" styleClass="form-control" value="#{managePermissionsPage.role.description}"/>
                                </h:panelGroup>
                                <p:message for="roleDescription"/>
                            </p:panelGrid>
                        </div>
                    </div>
                </div>
            </p:panel>
            <p:panel id="editRolePermissionPanel" styleClass="panelLayoutBlock" header="#{bundle['dataverse.permissions.roles.roleList.header']}">
                <h:selectManyCheckbox value="#{managePermissionsPage.selectedPermissions}"
                                      layout="pageDirection" styleClass="selectManyCheckboxBlock">
                    <f:selectItems value="#{managePermissionsPage.permissions}" var="pmsn"
                                   itemLabel="#{pmsn.humanName} &#160; &#60;span class=&#34;label label-default&#34;&#62;#{pmsn.name()}&#60;/span&#62;"
                                   itemValue="#{pmsn.name()}" itemLabelEscaped="false"/>
                </h:selectManyCheckbox>
            </p:panel>
            <div id="editRoleButtonPanel" class="button-block">
                <p:commandLink type="button" styleClass="btn btn-default" 
                               value="#{bundle.saveChanges}" 
                               oncomplete="roleForm.hide()"
                               update="roleDisplay availableRoles @([id$=Messages])"
                               actionListener="#{managePermissionsPage.updateRole}"/>
                <button type="button" class="btn btn-default" onclick="roleForm.hide()" value="Cancel">#{bundle.cancel}</button>
            </div>
        </p:panel>
    </p:dialog>
</ui:composition>