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

<xf:pageaction>
	<xf:button href="{{ link('widgets/add') }}" icon="add" overlay="true">{{ phrase('add_widget') }}</xf:button>
</xf:pageaction>

<xf:if is="$groupedWidgets is not empty">
	<div class="block">
		<div class="block-outer">
			<xf:macro template="filter_macros" name="quick_filter" arg-key="widgets" arg-class="block-outer-opposite" />
		</div>
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:foreach loop="$positions" key="$positionId" value="$position">
						<xf:if is="{$groupedWidgets.{$positionId}} is not empty">
							<tbody class="dataList-rowGroup">
								<xf:if is="$positionId == ''">
									<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover"
										label="{{ phrase('(no_position)') }}"
										explain="{{ phrase('widget_no_position_explain')|raw }}"
										colspan="2" />
								<xf:else />
									<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover"
										label="{$position.title}"
										explain="{$position.description|raw}"
										colspan="2" />
								</xf:if>
								<xf:foreach loop="{$groupedWidgets.{$positionId}}" value="$widget">
									<xf:datarow
										label="{$widget.title}"
										hint="{$widget.widget_key}"
										href="{{ link('widgets/edit', $widget) }}">
										<xf:delete href="{{ link('widgets/delete', $widget, $positionId ? {'position_id': $positionId} : {}) }}"
											tooltip="{{ $positionId ? phrase('delete_from_this_position') : phrase('delete') }}" />
									</xf:datarow>
								</xf:foreach>
							</tbody>
						</xf:if>
					</xf:foreach>
				</xf:datalist>
				<div class="block-footer">
					<span class="block-footer-counter">{{ display_totals($totalWidgets) }}</span>
				</div>
			</div>
		</div>
	</div>
<xf:else />
	<div class="blockMessage">{{ phrase('no_items_have_been_created_yet') }}</div>
</xf:if>