{% extends "base.html" %}

{% block styles %}
<link href="/static/css/index.css" rel="stylesheet" />
{% endblock %}

{% block title %}/{{title}}{% endblock %}

{% block body %}
{% if let Some(parent_path) = title.parent() -%}
	<a id="go-up" href="/fs/{{parent_path}}">Go up</a>
{%- endif %}

<svg width="64" height="64" style="display: none">
	<g id="icon-download"><path style="fill: none; stroke: currentColor; stroke-width: 6" d="M 15,30 32,47 49,30 M 32,0 V 44 Z M 4,59 H 60" /></g>
	<g id="icon-fullscreen"><path style="fill: currentColor; stroke: none" d="M25,0 H0 V25 Z M0,39 V64 H25 Z M39,64 H64 V39 Z M39,0 H64 V25 Z" /></g>
	<g id="icon-directory"><path d="M0 16 H5 l3 -8 h18 l3 8 H64 v40 H0 Z" style="fill: currentColor; stroke: none" /></g>
	<g id="icon-file"><path d="M10 4 H38 l16 16 V60 H10 Z" style="fill: none; stroke: currentColor; stroke-width: 8" /></g>
	<g id="icon-unknown"><path style="fill: currentColor; stroke: none" d="M24.6 44.5v-1q0-5.3.9-8.5 1-3.2 2.7-5.1 1.8-2 4.4-3.6 1.9-1.2 3.3-2.5 1.5-1.3 2.4-2.9.9-1.6.9-3.6t-1-3.7q-1-1.5-2.7-2.4-1.7-.8-3.7-.8t-3.8.8q-1.7.9-2.9 2.6-1 1.7-1.2 4.2H11.5q.1-6.1 3-10 2.7-4 7.3-6 4.5-2 10-2 6 0 10.7 2 4.7 2 7.4 5.8 2.6 3.7 2.6 9 0 3.6-1.2 6.4-1.1 2.7-3.2 4.9-2.1 2-5 3.8-2.4 1.4-4 3-1.5 1.5-2.2 3.6-.8 2-.8 5v1zm6 19.5q-3 0-5.2-2.1-2.2-2.2-2.1-5.2 0-3 2-5.1 2.2-2.2 5.3-2.2 2.9 0 5 2.2 2.3 2.1 2.3 5 0 2.1-1 3.8-1 1.6-2.7 2.6-1.7 1-3.6 1z" /></g>
	<g id="icon-close"><path style="fill: none; stroke: currentColor; stroke-width: 6" d="M50,14 L14,50 M14,14 L50,50" /></g>
	<g id="icon-next"><path style="fill: none; stroke: currentColor; stroke-width: 6" d="M23,14 L41,32 L23,50" /></g>
	<g id="icon-previous"><path style="fill: none; stroke: currentColor; stroke-width: 6" d="M41,14 L23,32 L41,50" /></g>
</svg>

<main>
	<table id="listing-container">
		<thead>
			<tr>
				<th tabindex="0" id="header--thumbnailType"><span class="sort-status">-</span></th>
				<th tabindex="0" id="header--name">Name <span class="sort-status">-</span></th>
				<th tabindex="0" id="header--modifiedTime">Last Modified <span class="sort-status">-</span></th>
				<th tabindex="0" id="header--size">Size <span class="sort-status">-</span></th>
			</tr>
		</thead>
		<tbody id="listing">
			{% for entry in entries -%}
				{%- let thumbnail = entry.thumbnail.as_rich_or_alt() -%}
				{# Note: JS changes the data attributes to camelCase #}
				<tr class="entry" data-thumbnail-type="{{entry.thumbnail.ty()}}" {% if let Either::Left(rich) = thumbnail %}data-rich-preview="{{rich.ty.as_str()}}"{% endif %} data-name="{{entry.name}}" data-modified-time="{{entry.modified_time.timestamp()}}" {% if let Some(size) = entry.size %}data-size="{{size.number}}"{% endif %}>
					<td>
						{%- match thumbnail -%}
						{%- when Either::Left with (rich) -%}
							<img class="thumbnail" src="{{rich.url}}" alt="Rich thumbnail" />
						{%- when Either::Right with (alt) -%}
							<svg class="thumbnail" viewBox="0 0 64 64" aria-label="{{alt}}"><use xlink:href="#icon-{{alt}}" /></svg>
						{%- endmatch -%}
					</td>
					<td><a href="/fs/{{title.join(entry.name).unwrap()}}" class="entry-link">{{entry.name}}</a></td>
					<td><span>{{entry.modified_time.format("%Y-%m-%d %H:%M:%S")}}</span></td>
					<td>
						{%- if let Some(size) = entry.size -%}
							<span title="{{size.number}}" class="entry-size">
								{%- if size.should_format -%}
									{{size.number|filesizeformat}}
								{%- else -%}
									{{size.number}}
								{%- endif -%}
							</span>
						{%- endif -%}
					</td>
				</tr>
			{%- endfor %}
		</tbody>
	</table>
</main>

<figure id="preview">
	<div id="preview-item-container"></div>
	<figcaption id="preview-bar">
		<div class="left">
			<span id="preview-title" title="Item Name"></span>
			<span id="preview-meta" title="Item Size"></span>
		</div>
		<div class="spacer"></div>
		<div class="right">
			<button id="preview-previous" title="Previous" onclick="preview_previous()">
				<svg role="presentation" viewBox="0 0 64 64"><use xlink:href="#icon-previous" /></svg>
			</button>
			<span id="preview-position">
				<span id="preview-position-current" title="Current Index"></span>
				&sol;
				<span id="preview-position-total" title="Number of Previewable Items"></span>
			</span>
			<button id="preview-next" title="Next (Double-click for slideshow)" onclick="preview_next()" ondblclick="slideshow_start()">
				<svg role="presentation" viewBox="0 0 64 64"><use xlink:href="#icon-next" /></svg>
			</button>
			<button id="preview-fullscreen-toggle" onclick="preview_toggle_fullscreen()" title="Fullscreen">
				<svg role="presentation" viewBox="0 0 64 64"><use xlink:href="#icon-fullscreen" /></svg>
			</button>
			<a download id="preview-download" title="Download">
				<svg role="presentation" viewBox="0 0 64 64"><use xlink:href="#icon-download" /></svg>
			</a>
			<button id="preview-close" title="Close preview" onclick="preview_close()">
				<svg role="presentation" viewBox="0 0 64 64"><use xlink:href="#icon-close" /></svg>
			</button>
		</div>
	</figcaption>
</figure>
{% endblock %}

{% block scripts %}
<script src="/static/js/index.js"></script>
{% endblock %}