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

<xf:form action="{{ link('attachments') }}" class="block" ajax="true"

	data-xf-init="select-plus"
	data-sp-checkbox=".dataList-cell--toggle input:checkbox"
	data-sp-container=".dataList-row"
	data-sp-control=".dataList-cell a">

	<div class="block-outer">
		<div class="filterBlock">
			<ul class="listInline">
				<li>
					<xf:select name="content_type" class="filterBlock-input" value="{$linkFilters.content_type}">
						<xf:option>{{ phrase('(all_content_types)') }}</xf:option>
						<xf:foreach loop="$handlers" key="$contentType" value="$handler">
							<xf:option value="{$contentType}">{$handler.getContentTypePhrase()}</xf:option>
						</xf:foreach>
					</xf:select>
				</li>
				<li>
					<xf:textbox name="username" value="{$linkFilters.username}" ac="single"
						class="input filterBlock-input"
						placeholder="{{ phrase('user_name') }}" />
				</li>
				<li style="display: inline-block; vertical-align: bottom">
					<!-- inline style is to workaround Safari alignment issue -->
					<div class="inputGroup inputGroup--auto">
						<xf:dateinput name="start" value="{{ $linkFilters.start ? date($linkFilters.start, 'Y-m-d') : '' }}"
							class="filterBlock-input filterBlock-input--small" />
						<span class="inputGroup-text">-</span>
						<xf:dateinput name="end" value="{{ $linkFilters.end ? date($linkFilters.end, 'Y-m-d') : '' }}"
							class="filterBlock-input filterBlock-input--small" />
						<span class="inputGroup-splitter"></span>
					</div>
				</li>
				<li>
					<xf:select name="date_preset" class="js-presetChange filterBlock-input">
						<xf:option label="{{ phrase('date_presets:') }}" value="-1" />
						<xf:optgroup>
							<xf:options source="{$datePresets}" />
							<xf:option value="1995-01-01">{{ phrase('all_time') }}</xf:option>
						</xf:optgroup>
					</xf:select>
				</li>
				<li>
					<xf:button type="submit" class="button--small">{{ phrase('go') }}</xf:button>
				</li>
			</ul>
		</div>
	</div>
	<div class="block-container">
		<xf:if is="$attachments is not empty">
			<h2 class="block-tabHeader">
				<span class="tabs">
					<label class="tabs-tab {{ (!$linkFilters.mode || $linkFilters.mode == 'recent') ? 'is-active' : '' }}">
						<input type="radio" name="mode" value="recent"
							style="display: none"
							data-xf-click="submit"
							{{ (!$linkFilters.mode || $linkFilters.mode == 'recent') ? 'checked="checked"' : '' }} />
						{{ phrase('most_recent') }}
					</label>
					<label class="tabs-tab {{ $linkFilters.mode == 'size' ? 'is-active' : '' }}">
						<input type="radio" name="mode" value="size"
							style="display: none"
							data-xf-click="submit"
							{{ $linkFilters.mode == 'size' ? 'checked="checked"' : '' }} />
						{{ phrase('largest') }}
					</label>
				</span>
			</h2>
			<div class="block-body">
				<xf:datalist>
					<xf:foreach loop="$attachments" value="$attachment">
						<xf:datarow>
							<xf:toggle name="attachment_ids[]" value="{$attachment.attachment_id}" />

							<xf:cell
								class="dataList-cell--min dataList-cell--alt dataList-cell--image dataList-cell--imageMediumWide"
								href="{{ link('attachments/view', $attachment) }}">
								<xf:if is="$attachment.has_thumbnail">
									<img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}"
										width="{$attachment.thumbnail_width}" height="{$attachment.thumbnail_height}" loading="lazy" />
								<xf:else />
									<xf:fa icon="fa-file fa-2x" />
								</xf:if>
							</xf:cell>

							<xf:cell href="{{ link('attachments/view', $attachment) }}" class="dataList-cell--main">
								<div class="dataList-mainRow">{$attachment.filename}</div>
								<div class="dataList-subRow">
									<ul class="listInline listInline--bullet">
										<li><xf:date time="{$attachment.Data.upload_date}" /></li>
										<li>{{ $attachment.Data.User.username ?: phrase('unknown_user') }}</li>
										<li>{$attachment.file_size|file_size}</li>
									</ul>
								</div>
							</xf:cell>

							<xf:cell
								href="{{ (!$attachment.unassociated && $attachment.getContainerLink()) ? $attachment.getContainerLink() : link('attachments/view', $attachment) }}"
								target="{{ !$attachment.unassociated ? '_blank' : '' }}"
								class="dataList-cell--action">
								<xf:if is="!$attachment.unassociated">
									{{ phrase('view_host_content') }}
									<span class="dataList-secondRow">{$attachment.getContentTypePhrase()|parens}</span>
								<xf:else />
									{{ phrase('unassociated') }}
								</xf:if>
							</xf:cell>

							<xf:delete href="{{ link('attachments/delete', $attachment, $linkFilters) }}" />
						</xf:datarow>
					</xf:foreach>
				</xf:datalist>
			</div>
			<div class="block-footer block-footer--split">
				<span class="block-footer-counter">{{ display_totals($attachments, $total) }}</span>
				<span class="block-footer-select"><xf:checkbox standalone="true"><xf:option check-all="< .block-container" label="{{ phrase('select_all') }}" /></xf:checkbox></span>
				<span class="block-footer-controls">
					<xf:button type="submit" name="delete_attachments" icon="delete" />
				</span>
			</div>
		<xf:else />
			<div class="block-body block-row">{{ phrase('no_results_found') }}</div>
		</xf:if>
	</div>
	<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
		link="attachments" params="{$linkFilters}"
		wrapperclass="block-outer block-outer--after" />

</xf:form>

<xf:js>
	$(function()
	{
		$('.js-presetChange').change(function(e)
		{
			var $ctrl = $(this),
			value = $ctrl.val(),
			$form = $ctrl.closest('form');

			if (value == -1)
			{
				return;
			}

			$form.find($ctrl.data('start') || 'input[name=start]').val(value);
			$form.find($ctrl.data('end') || 'input[name=end]').val('');
			$form.submit();
		});
	});
</xf:js>