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

<xf:form action="{{ link('two-step/toggle') }}" class="block" ajax="true">
	<div class="block-outer">
		<xf:macro template="filter_macros" name="quick_filter" arg-key="two-step" arg-class="block-outer-opposite" />
	</div>
	<div class="block-container">
		<xf:if is="$activeProviders is not empty">
			<div class="block-body">
				<xf:datalist>
					<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover">
						<xf:cell>{{ phrase('active_providers') }}</xf:cell>
					</xf:datarow>
					<xf:foreach loop="$activeProviders" value="$provider">
						<xf:datarow label="{$provider.title}" href="{{ link('two-step/edit', $provider) }}" />
					</xf:foreach>
				</xf:datalist>
			</div>
		</xf:if>

		<xf:if is="$inactiveProviders is not empty">
			<div class="block-body">
				<xf:datalist>
					<xf:datarow rowtype="subsection" rowclass="dataList-row--noHover">
						<xf:cell>{{ phrase('inactive_providers') }}</xf:cell>
					</xf:datarow>
					<xf:foreach loop="$inactiveProviders" value="$provider">
						<xf:datarow label="{$provider.title}" href="{{ link('two-step/edit', $provider) }}" />
					</xf:foreach>
				</xf:datalist>
			</div>
		</xf:if>
		<div class="block-footer">
			<span class="block-footer-counter">{{ display_totals(count($activeProviders) + count($inactiveProviders)) }}</span>
		</div>
	</div>
</xf:form>