<xf:title>{{ phrase('pwa_setup') }}</xf:title>
<xf:description>{{ phrase('properly_configured_progressive_web_app_allows_users_to_install_your_site_to_their_device') }}</xf:description>

<xf:if is="$isInstallable">
	<div class="blockMessage blockMessage--success blockMessage--iconic">
		{{ phrase('your_board_meets_requirements_to_be_installable_progressive_web_app') }}
	</div>
<xf:else />
	<div class="blockMessage blockMessage--error blockMessage--iconic">
		{{ phrase('your_board_does_not_meet_requirements_to_be_installable_progressive_web_app') }}
	</div>
</xf:if>

<div class="blockMessage blockMessage--highlight">
	{{ phrase('browsers_only_check_for_updates_to_these_values_periodically_24_hours') }}
</div>

<xf:form action="{{ link('pwa') }}" ajax="true" class="block">
	<div class="block-container">
		<h3 class="block-formSectionHeader">
			<span class="block-formSectionHeader-aligner">{{ phrase('requirements') }}</span>
		</h3>
		<div class="block-body">
			<xf:formrow label="{{ phrase('https_enabled') }}"
				explain="{{ phrase('your_board_must_be_served_over_https_for_progressive_web_app_support') }}">

				<xf:if is="$xf.request.isSecure() || $xf.request.isHostLocal()">
					{{ phrase('yes') }}
				<xf:else />
					{{ phrase('no') }}
				</xf:if>
			</xf:formrow>
		</div>

		<h3 class="block-formSectionHeader">
			<span class="block-formSectionHeader-aligner">{{ phrase('options') }}</span>
		</h3>
		<div class="block-body">
			<xf:foreach loop="$optionGroup.Options" value="$option">
				<xf:macro template="option_macros" name="option_row"
					arg-group="{$optionGroup}"
					arg-option="{$option}" />
			</xf:foreach>
		</div>

		<h3 class="block-formSectionHeader">
			<span class="block-formSectionHeader-aligner">{{ phrase('language_settings') }}</span>
		</h3>
		<div class="block-body">
			<xf:inforow>
				{{ phrase('these_settings_reflect_default_language_x', {'title': $language.title|parens}) }}
			</xf:inforow>

			<xf:selectrow name="language[language_code]" value="{$language.language_code}"
				label="{{ phrase('locale') }}">

				<xf:option value="">&nbsp;</xf:option>
				<xf:options source="$languageLocales" />
			</xf:selectrow>

			<xf:radiorow name="language[text_direction]" value="{$language.text_direction}"
				label="{{ phrase('text_direction') }}">

				<xf:option value="LTR">{{ phrase('left_to_right') }}</xf:option>
				<xf:option value="RTL">{{ phrase('right_to_left') }}</xf:option>
			</xf:radiorow>
		</div>


		<h3 class="block-formSectionHeader">
			<span class="block-formSectionHeader-aligner">{{ phrase('style_properties') }}</span>
		</h3>
		<div class="block-body p-styleProperties">
			<xf:inforow>
				{{ phrase('these_settings_reflect_default_style_x', {'title': $style.title|parens}) }}
			</xf:inforow>

			<xf:foreach loop="$stylePropertyMaps" value="$map">
				<xf:macro template="style_property_macros" name="property_edit"
					arg-property="{$map.Property}"
					arg-definitionEditable="{{ $map.isDefinitionEditable() }}" />
			</xf:foreach>

			<xf:macro template="public:color_picker_macros" name="color_picker_scripts"
				arg-colorData="{$styleColorData}" />
		</div>

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