<xf:title>{{ phrase('th_themehouse_styles_uix') }}</xf:title>

<xf:if is="!$canWriteDirs && !$xf.options.th_enableFtp_uix">
	<div class="blockMessage blockMessage--error">
		<h2 style="margin: 0 0 .5em 0">UI.X Error</h2>
		<p>
			{{ phrase('thuix_writeable_error', {'url': link('options/groups', {'group_id': 'th_uix'})}) }}
		</p>
	</div>
</xf:if>

<xf:css src="th_style_list_uix.less" />

<xf:if is="$styles is not empty">
	<xf:form action="{{ link('styles/themehouse') }}" class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:foreach loop="$styles" value="$style">
						<xf:datarow>
							<xf:comment>
								<xf:cell class="dataList-cell--min dataList-cell--image uix_dataList-cell--thumbnail">
									<xf:if is="{$style.thumbnail_small_url}">
										<img src="{$style.thumbnail_small_url}">
									</xf:if>
								</xf:cell>
							</xf:comment>
							<xf:main label="{$style.product_name}"
									 hint="{$style.product_tagline}" />

							<xf:if is="{$style.installed}">
								<xf:cell class="dataList-cell--min uix_dataList-cel uix_dataList-cel--childStyles" href="{{ link('styles/themehouse/child-styles', null, { 'product_id': $style.id, 'style_id': $style.installed.style_id }) }}">{{ phrase('th_child_styles_uix') }}</xf:cell>
								<xf:if is="{$style.isOutdated}">
									<xf:cell class="dataList-cell--min uix_dataList-cel uix_dataList-cel--upgrade" href="{{ link('styles/themehouse/upgrade', null, { 'product_id': $style.id, 'style_id': $style.installed.style_id }) }}">{{ phrase('upgrade') }}</xf:cell>
									<xf:else />
									<xf:cell class="dataList-cell--min uix_dataList-cel uix_dataList-cel--forceReinstall" href="{{ link('styles/themehouse/upgrade', null, { 'product_id': $style.id, 'style_id': $style.installed.style_id }) }}">{{ phrase('th_force_reinstall_uix') }}</xf:cell>
								</xf:if>
								<xf:else />
								<xf:cell class="dataList-cel--min uix_dataList-cell"></xf:cell>
								<xf:cell class="dataList-cell--min uix_dataList-cel uix_dataList-cel--install" href="{{ link('styles/themehouse/install', null, { 'product_id': $style.id }) }}">{{ phrase('install') }}</xf:cell>
							</xf:if>
							<xf:cell class="dataList-cell--min uix_dataList-cel uix_dataList-cel--documentation" href="{$style.information_url}" target="_BLANK">{{ phrase('th_documentation_uix') }}</xf:cell>
						</xf:datarow>
					</xf:foreach>
				</xf:datalist>
			</div>
			<div class="block-footer">
				<span class="u-pullRight">{{ phrase('showing_x_of_y_items', {'count': count($styles), 'total': count($styles)}) }}</span>
			</div>
		</div>
	</xf:form>
	<xf:else />
	<div class="blockMessage">{{ phrase('th_no_active_licenses_found_uix') }}</div>
</xf:if>