<xf:if is="$notice.isInsert()">
	<xf:title>{{ phrase('add_notice') }}</xf:title>
<xf:else />
	<xf:title>{{ phrase('edit_notice:') }} {$notice.title}</xf:title>
</xf:if>

<xf:pageaction if="$notice.isUpdate()">
	<xf:button href="{{ link('notices/reset', $notice) }}" overlay="true">{{ phrase('reset') }}</xf:button>
	<xf:button href="{{ link('notices/delete', $notice) }}" icon="delete" overlay="true" />
</xf:pageaction>

<xf:form action="{{ link('notices/save', $notice) }}" ajax="true" class="block">
	<div class="block-container">
		<h2 class="block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" role="tablist">
			<span class="hScroller-scroll">
				<a class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="notice-options">{{ phrase('notice_options') }}</a>
				<xf:macro id="helper_criteria::user_tabs" />
				<xf:macro id="helper_criteria::page_tabs" />
			</span>
		</h2>

		<ul class="tabPanes block-body">
			<li class="is-active" role="tabpanel" id="notice-options">
				<xf:textboxrow name="title" value="{$notice}"
					label="{{ phrase('title') }}"
					explain="{{ phrase('notice_title_explain') }}" />

				<xf:codeeditorrow name="message" value="{$notice}"
					mode="html" data-line-wrapping="true"
					class="codeEditor--autoSize codeEditor--proportional"
					label="{{ phrase('message') }}"
					hint="{{ phrase('you_may_use_html') }}"
					explain="{{ phrase('the_message_to_be_shown_when_the_display_criteria_are_met') }}" />

				<hr class="formRowSep" />

				<xf:radiorow name="display_image" value="{$notice}"
					label="{{ phrase('display_image') }}">

					<xf:option value=""
						label="{{ phrase('no_image') }}" />
					<xf:option value="avatar"
						label="{{ phrase('show_visitors_avatar') }}" />
					<xf:option value="image"
						label="{{ phrase('specify_image:') }}">
						<xf:assetupload name="image_url" value="{$notice}" asset="notice_images" />
					</xf:option>
				</xf:radiorow>

				<xf:radiorow name="display_style" value="{$notice}"
					label="{{ phrase('display_styling') }}">

					<xf:option value="primary">{{ phrase('primary') }}</xf:option>
					<xf:option value="accent">{{ phrase('accent') }}</xf:option>
					<xf:option value="dark">{{ phrase('dark') }}</xf:option>
					<xf:option value="light">{{ phrase('light') }}</xf:option>
					<xf:option value="custom" label="{{ phrase('other_using_custom_css_class_name:') }}">
						<xf:textbox name="css_class" value="{$notice.css_class}"
							maxlength="{{ max_length($notice, 'css_class') }}"
							dir="ltr" />
					</xf:option>
				</xf:radiorow>

				<xf:radiorow name="visibility" value="{$notice}"
					label="{{ phrase('visibility') }}"
					explain="{{
						phrase('notice_visibility_explain',
						{
							'styleUrl': link(
								'styles/style-properties/group',
								{'style_id': $xf.options.defaultStyleId},
								{'group': 'page'}
							)
						})
					}}">

					<xf:option>{{ phrase('never_hide') }}</xf:option>
					<xf:option value="wide">{{ phrase('hide_wide', {'width': property('responsiveWide')}) }}</xf:option>
					<xf:option value="medium">{{ phrase('hide_medium', {'width': property('responsiveMedium')}) }}</xf:option>
					<xf:option value="narrow">{{ phrase('hide_narrow', {'width': property('responsiveNarrow')}) }}</xf:option>
				</xf:radiorow>

				<hr class="formRowSep" />

				<xf:radiorow name="notice_type" value="{$notice}"
					label="{{ phrase('notice_type') }}"
					explain="{{ phrase('notice_display_type_desc') }}">

					<xf:foreach loop="$noticeTypes" key="$typeId" value="$typeValue">
						<xf:if is="$typeId == 'floating'">
							<xf:option value="{$typeId}"
								data-xf-init="disabler"
								data-container=".js-hiderContainer"
								data-hide="yes">{$typeValue}</xf:option>
						<xf:else />
							<xf:option value="{$typeId}">{$typeValue}</xf:option>
						</xf:if>
					</xf:foreach>

				</xf:radiorow>

				<div class="js-hiderContainer">

					<xf:numberboxrow name="display_duration" value="{$notice}" step="100"
						label="{{ phrase('display_duration_milliseconds') }}"
						explain="{{ phrase('notice_display_length_desc') }}" />

					<xf:numberboxrow name="delay_duration" value="{$notice}" step="100"
						label="{{ phrase('delay_duration_milliseconds') }}"
						explain="{{ phrase('notice_fade_delay_desc') }}" />
				</div>

				<hr class="formRowSep" />

				<xf:checkboxrow label="{{ phrase('options') }}">
					<xf:option name="dismissible" selected="$notice.dismissible"
						label="{{ phrase('notice_may_be_dismissed') }}"
						hint="{{ phrase('users_may_hide_this_notice_when_they_have_read_it') }}">

						<xf:dependent>
							<xf:checkbox>
								<xf:option value="1" label="{{ phrase('automatically_dismiss_notice') }}"
									name="auto_dismiss" selected="$notice.auto_dismiss">
									<xf:hint>{{ phrase('automatically_dismiss_notice_explain') }}</xf:hint>
								</xf:option>
							</xf:checkbox>
						</xf:dependent>

					</xf:option>
					<xf:option name="active" selected="$notice.active"
						label="{{ phrase('notice_is_active') }}"
						hint="{{ phrase('use_this_to_temporarily_disable_this_notice') }}" />
				</xf:checkboxrow>

				<xf:macro id="display_order_macros::row" arg-value="{$notice}" />
			</li>

			<xf:macro id="helper_criteria::user_panes"
				arg-criteria="{{ $userCriteria.getCriteriaForTemplate() }}"
				arg-data="{{ $userCriteria.getExtraTemplateData() }}" />

			<xf:macro id="helper_criteria::page_panes"
				arg-criteria="{{ $pageCriteria.getCriteriaForTemplate() }}"
				arg-data="{{ $pageCriteria.getExtraTemplateData() }}" />

		</ul>

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