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

<xf:pageaction>
	<xf:button href="{{ link('content-types/add') }}" icon="add">{{ phrase('add_content_type_field') }}</xf:button>
</xf:pageaction>

<xf:foreach loop="$_fieldsGrouped" key="$contentType" value="$fields">
	<div class="block">
		<div class="block-container">
			<h2 class="block-header">
				<a href="{{ link('content-types/add', [], {'content_type':$contentType}) }}" class="u-pullRight"><xf:fa icon="fa-plus-circle" /></a>
				{$contentType}
			</h2>
			<div class="block-body">
				<xf:datalist>
				<xf:foreach loop="{$fields}" value="$field">
					<xf:datarow href="{{ link('content-types/edit', $field) }}"
						label="{$field.field_name}"
						hint="{$field.field_value}"
						hash="{$field.content_type}_{$field.field_name}"
						dir="auto" />
				</xf:foreach>
				</xf:datalist>
			</div>
		</div>
	</div>
</xf:foreach>

<div class="block">
	<div class="block-container">

		<h2 class="block-tabHeader tabs hScroller" role="tablist">
			<span class="hScroller-scroll">
				<span class="tabs-tab tab tab-label">{{ phrase('group_by:') }}</span>
				<xf:if is="$group == 'field_name'">
					<a class="tabs-tab" role="tab" tabindex="0" aria-controls="content_type" href="{{ link('content-types', null, {'group':'content_type'}) }}">{{ phrase('content_types') }}</a>
					<a class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="field_name">{{ phrase('type_fields') }}</a>
				<xf:else />
					<a class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="content_type">{{ phrase('content_types') }}</a>
					<a class="tabs-tab" role="tab" tabindex="0" aria-controls="field_name" href="{{ link('content-types', null, {'group':'field_name'}) }}">{{ phrase('type_fields') }}</a>
				</xf:if>
			</span>
		</h2>

		<ul class="tabPanes block-body">
			<xf:if is="$group == 'field_name'">
				<li role="tabpanel" id="content_type">-</li>
				<li role="tabpanel" id="field_name" class="is-active">
					<xf:foreach loop="$typesGrouped" key="$fieldName" value="$fields">
						<xf:formrow label="{$fieldName}" rowtype="noColon boldLabel stickyLabel">
							<a href="{{ link('content-types/add', [], {'field_name':$fieldName}) }}"
								class="u-pullRight"
								data-xf-click="overlay"
								data-xf-init="tooltip"
								title="{{ phrase('add_x_content_type_field', {'type':$fieldName}) }}">
								<xf:fa icon="fa-plus-circle" />
							</a>
							<xf:macro name="field_list" arg-fields="{$fields}" arg-label="content_type" />
						</xf:formrow>
					</xf:foreach>
				</li>
			<xf:else />
				<li class="is-active" role="tabpanel" id="content_type">
					<xf:foreach loop="$fieldsGrouped" key="$contentType" value="$fields">
						<xf:formrow label="{$contentType}" rowtype="noColon boldLabel stickyLabel">
							<span class="u-anchorTarget" id="__{$contentType}"></span>
							<a href="{{ link('content-types/add', [], {'content_type':$contentType}) }}"
								class="u-pullRight"
								data-xf-click="overlay"
								data-xf-init="tooltip"
								title="{{ phrase('add_x_content_type_field', {'type':$contentType}) }}">
								<xf:fa icon="fa-plus-circle" />
							</a>
							<xf:macro name="field_list" arg-fields="{$fields}" arg-label="field_name" />
						</xf:formrow>
					</xf:foreach>
				</li>
				<li role="tabpanel" id="field_name">-</li>
			</xf:if>
		</ul>
	</div>
</div>

<xf:macro name="field_list" arg-fields="!" arg-label="!">
	<ol class="formRow-linkList">
		<xf:foreach loop="$fields" value="$field">
			<li>
				<!--<a href="{{ link('content-types/delete', $field) }}" data-xf-click="overlay" class="link-delete"><xf:fa icon="fa-trash-alt" /></a>-->
				<span class="u-anchorTarget" id="__{$field.content_type}_{$field.field_name}"></span>
				<a href="{{ link('content-types/edit', $field, {'group':$label == 'content_type' ? 'field_name' : 'content_type'}) }}" data-xf-click="overlay">
					<span class="link-title">{$field.{$label}}</span>
					<span class="link-hint">{$field.field_value}</span>
				</a>
			</li>
		</xf:foreach>
	</ol>
</xf:macro>