<xf:if is="$userGroup.isInsert()">
	<xf:title>{{ phrase('add_user_group') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_user_group:') }} {$userGroup.title}</xf:title>
</xf:if>

<xf:pageaction if="$userGroup.isUpdate()">
	<xf:button href="{{ link('user-groups/delete', $userGroup) }}" icon="delete" overlay="true" />
</xf:pageaction>

<xf:form action="{{ link('user-groups/save', $userGroup) }}" ajax="true" class="block"
	data-xf-init="permission-form"
	data-permission-type="global">

	<div class="block-container">
		<div class="block-body">
			<xf:textboxrow name="title" value="{$userGroup.title}" maxlength="{{ max_length($userGroup, 'title') }}"
				label="{{ phrase('title') }}" />

			<xf:numberboxrow name="display_style_priority" value="{$userGroup.display_style_priority}" min="0"
				label="{{ phrase('display_styling_priority') }}"
				explain="{{ phrase('if_usermultiple_groups_user_title_from_highest_priority') }}" />

			<xf:radiorow name="user_title_override" value="{{ $userGroup.user_title ? 1 : 0 }}"
				label="{{ phrase('user_title_override') }}"
				explain="{{ phrase('you_may_use_html') }}">

				<xf:option value="0" label="{{ phrase('use_default_user_title_ladder') }}" />
				<xf:option value="1" label="{{ phrase('use_following_user_title:') }}">
					<xf:textbox name="user_title" value="{$userGroup.user_title}"
						maxlength="{{ max_length($userGroup, 'user_title') }}" size="50" />
				</xf:option>
			</xf:radiorow>

			<xf:codeeditorrow name="username_css" value="{$userGroup.username_css}"
				mode="css" data-line-wrapping="true"
				class="codeEditor--autoSize"
				label="{{ phrase('user_name_css') }}" />

			<xf:css src="public:app_user_banners.less" />
			<xf:textboxrow name="banner_text" value="{$userGroup.banner_text}" maxlength="{{ max_length($userGroup, 'banner_text') }}"
				label="{{ phrase('user_banner_text') }}"
				explain="{{ phrase('banner_displayed_under_name_of_members_of_this_group') }}" />

			<xf:formrow label="{{ phrase('user_banner_styling') }}">
				<xf:radio name="banner_css_class"
					value="{{ $userGroup.banner_css_class ? $userGroup.banner_css_class : 'userBanner userBanner--primary' }}"
					listclass="listColumns">

					<xf:foreach loop="$displayStyles" value="$class">
						<xf:option value="{$class}">
							<span title="{$class}" class="{$class}" data-xf-init="tooltip" style="display: inline">{{ phrase('banner') }}</span>
						</xf:option>
					</xf:foreach>

					<xf:option value="" selected="$userGroup.banner_css_class AND !in_array($userGroup.banner_css_class, $displayStyles)"
						label="{{ phrase('other_using_custom_css_class_name') }}">

						<xf:textbox name="banner_css_class_other"
							value="{{ ($userGroup.banner_css_class AND !in_array($userGroup.banner_css_class, $displayStyles)) ? $userGroup.banner_css_class : '' }}"
							maxlength="{{ max_length($userGroup, 'banner_css_class') }}" />
					</xf:option>
				</xf:radio>
			</xf:formrow>
		</div>

		<xf:js src="xf/permission.js" min="1" />
		<xf:css src="permission.less" />

		<xf:macro template="permission_macros" name="edit_groups"
			arg-interfaceGroups="{$permissionData.interfaceGroups}"
			arg-permissionsGrouped="{$permissionData.permissionsGrouped}"
			arg-values="{$permissionData.values}" />

		<xf:submitrow icon="save" sticky="true" />
	</div>

</xf:form>