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

<xf:pageaction>
	<xf:button href="{{ link('payment-profiles/add') }}" icon="add" overlay="true">{{ phrase('add_payment_profile') }}</xf:button>
</xf:pageaction>

<xf:if is="!$xf.livePayments">
	<div class="blockMessage blockMessage--important blockMessage--iconic">
		{{ phrase('live_payments_have_been_disabled') }}
	</div>
</xf:if>

<xf:if is="$providers is not empty">
	<xf:form action="{{ link('payment-profiles/toggle') }}" class="block" ajax="true">
		<div class="block-outer">
			<xf:macro id="filter_macros::quick_filter" arg-key="payment-profiles" arg-class="block-outer-opposite" />
		</div>
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:foreach loop="$providers" key="$providerId" value="$provider">
						<xf:if is="{$groupedProfiles.{$providerId}} is not empty">
							<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover">
								<xf:cell colspan="3">{$provider.title}</xf:cell>
							</xf:datarow>
							<xf:foreach loop="{$groupedProfiles.{$providerId}}" value="$profile">
								<xf:datarow
									label="{$profile.title}"
									hint="{{ $profile.display_title ?: '' }}"
									href="{{ link('payment-profiles/edit', $profile) }}"
									delete="{{ link('payment-profiles/delete', $profile) }}" />
							</xf:foreach>
						</xf:if>
					</xf:foreach>
				</xf:datalist>
			</div>
			<div class="block-footer">
				<span class="block-footer-counter">{{ display_totals($totalProfiles) }}</span>
			</div>
		</div>
	</xf:form>
<xf:else />
	<div class="blockMessage">{{ phrase('no_items_have_been_created_yet') }}</div>
</xf:if>