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

<xf:form action="{{ link('logs/username-change/toggle') }}" class="block" ajax="true">
	<div class="block-container">
		<div class="block-body">
			<xf:datalist data-xf-init="responsive-data-list">
				<xf:datarow rowtype="header">
					<xf:cell class="dataList-cell--min">&nbsp;</xf:cell>
					<xf:cell>{{ phrase('old_username') }}</xf:cell>
					<xf:cell>{{ phrase('new_username') }}</xf:cell>
					<xf:cell>{{ phrase('change_state') }}</xf:cell>
					<xf:cell>{{ phrase('date') }}</xf:cell>
					<xf:cell class="dataList-cell--min" colspan="2">&nbsp;</xf:cell>
				</xf:datarow>

				<xf:foreach loop="$entries" value="$entry">
					<xf:datarow rowclass="dataList-row--noHover">
						<xf:cell class="dataList-cell--min dataList-cell--image dataList-cell--imageSmall"
							href="{{ link('users/edit', $entry.User) }}" data-xf-init="tooltip" title="{{ phrase('current_username:') }} {$entry.User.username}">
							<xf:avatar user="$entry.User" size="s" href="" />
						</xf:cell>
						<xf:cell>
							{$entry.old_username}
						</xf:cell>
						<xf:cell>
							{$entry.new_username}
							<xf:if is="$entry.change_reason">
								<a role="button"
									tabindex="0"
									data-xf-init="tooltip"
									data-trigger="hover focus click"
									title="{{ phrase('change_reason:') }} {$entry.change_reason}"><xf:trim>
									<xf:fa icon="fa-info-circle" />
								</xf:trim></a>
							</xf:if>
						</xf:cell>
						<xf:cell>
							<xf:if is="$entry.change_state == 'approved'">
								{{ phrase('approved') }}
							<xf:elseif is="$entry.change_state == 'moderated'" />
								{{ phrase('awaiting_approval') }}
							<xf:elseif is="$entry.change_state == 'rejected'" />
								{{ phrase('rejected') }}
								<xf:if is="$entry.reject_reason">
									<a role="button"
										tabindex="0"
										data-xf-init="tooltip"
										data-trigger="hover focus click"
										title="{{ phrase('reason:') }} {$entry.reject_reason}"><xf:trim>
										<xf:fa icon="fa-info-circle" />
									</xf:trim></a>
								</xf:if>
							</xf:if>
						</xf:cell>
						<xf:cell>
							<xf:date time="{$entry.change_date}" />
						</xf:cell>
						<xf:toggle name="visible[{$entry.change_id}]" selected="$entry.visible"
							class="dataList-cell--separated" submit="true"
							tooltip="{{ phrase('toggle_visibility') }}" />
						<xf:action href="{{ link('logs/username-change', $entry) }}" overlay="true">
							{{ phrase('view') }}
						</xf:action>
					</xf:datarow>
				<xf:else />
					<xf:datarow>
						<xf:cell colspan="7">{{ phrase('no_entries_have_been_logged') }}</xf:cell>
					</xf:datarow>
				</xf:foreach>
			</xf:datalist>
		</div>
	</div>
	<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
		link="logs/username-change"
		wrapperclass="block-outer block-outer--after" />
</xf:form>