<!DOCTYPE html>
<html lang="en">
<head>
	{% include 'head.html' %}
	<title>{{ section[0]|upper() }}{{ section[1:] }} | Tanabata File Manager</title>
	<link rel="stylesheet" href="{{ url_for('static', filename='css/interface.css') }}">
	{% if section == 'files' %}
	<!-- <script src="{{ url_for('static', filename='js/jquery.lazy.min.js') }}"></script> -->
	{% endif %}
</head>
<body data-bs-theme="dark">
	{% if section != 'settings' %}
	<header>
		<div class="sorting">
			<div class="highlighted" id="select">Select</div>
			<div id="sorting">Sorting by <span class="highlighted" id="attribute">{{ sorting['key'] }} ({% if sorting['asc'] %}asc{% else %}desc{% endif %})</span> <img src="{{ url_for('static', filename='images/icon-expand.svg') }}" alt="" id="icon-expand"></div>
			<form id="sorting-options" style="display: none">
				{% for opt in sorting_options %}
				<div class="form-check sorting-option">
					<label class="form-check-label" for="{{ opt }}">{{ opt }}</label>
					<input type="radio" class="form-check-input" name="sorting" value="{{ opt }}" id="{{ opt }}" {% if opt == sorting['key'] %}checked prev-checked{% endif %}>
				</div>
				{% endfor %}
				<hr>
				<div class="form-check sorting-option">
					<label class="form-check-label" for="asc">ascending</label>
					<input type="radio" class="form-check-input" name="order" value="asc" id="asc" {% if sorting['asc'] %}checked prev-checked{% endif %}>
				</div>
				<div class="form-check sorting-option">
					<label class="form-check-label" for="desc">descending</label>
					<input type="radio" class="form-check-input" name="order" value="desc" id="desc" {% if not sorting['asc'] %}checked prev-checked{% endif %}>
				</div>
			</form>
		</div>
		{% block Header %}{% endblock %}
	</header>
	{% endif %}
	<main>
		{% block Main %}{% endblock %}
	</main>
	{% if section != 'settings' %}
	<div class="selection-manager" style="display: none">
		<div class="selection-header">
			<div id="selection-info"><span id="selection-count">0</span> selected</div>
			{% if section == 'files' %}
			<div id="selection-edit-tags">Edit tags</div>
			<div id="selection-add-to-pool">Add to pool</div>
			{% endif %}
			<div id="selection-delete">Delete</div>
		</div>
		<hr>
		{% if section == 'files' %}
		<div class="selection-tags" style="display: none">
			<div class="tags-container tags-container-selected" id="selection-tags-selected">
				{% for tag in tags_all %}
				<div class="tag-preview" tag_id="{{ tag['id'] }}" style="{% if tag['color'] %}background-color: #{{ tag['color'] }};{% elif tag['category_color'] %}background-color: #{{ tag['category_color'] }};{% endif %};display: none">{{ tag['name'] }}</div>
				{% endfor %}
			</div>
			<input type="text" class="form-control filtering" id="selection-tags-filter" placeholder="Filter tags...">
			<div class="tags-container" id="selection-tags-other">
				{% for tag in tags_all %}
				<div class="item-preview tag-preview" tag_id="{{ tag['id'] }}"{% if tag['color'] %} style="background-color: #{{ tag['color'] }}"{% elif tag['category_color'] %} style="background-color: #{{ tag['category_color'] }}"{% endif %}>{{ tag['name'] }}</div>
				{% endfor %}
			</div>
		</div>
		{% endif %}
	</div>
	{% endif %}
	{% if section == 'files' %}
	<div class="viewer-wrapper" style="display: none">
		<div class="viewer-nav viewer-nav-close" id="view-close">
			<div class="viewer-nav-icon" style="background-image: url({{ url_for('static', filename='images/layer-controls.png') }}); background-position: -3px 0;"></div>
		</div>
		<div class="viewer-nav viewer-nav-prev" id="view-prev">
			<div class="viewer-nav-icon" style="background-image: url({{ url_for('static', filename='images/layer-controls.png') }}); background-position: 0-25px;"></div>
		</div>
		<div class="viewer-nav viewer-nav-next" id="view-next">
			<div class="viewer-nav-icon" style="background-image: url({{ url_for('static', filename='images/layer-controls.png') }}); background-position: 0-63px;"></div>
		</div>
		<iframe src="" frameborder="0" id="viewer"></iframe>
	</div>
	{% endif %}
	<footer>
		{% if section == 'categories' %}
		<a href="/categories/new" class="nav curr"><img src="{{ url_for('static', filename='images/icon-add.svg') }}" alt="Add category" class="navicon"></a>
		{% else %}
		<a href="/categories" class="nav"><img src="{{ url_for('static', filename='images/icon-category.svg') }}" alt="Categories" class="navicon"></a>
		{% endif %}

		{% if section == 'tags' %}
		<a href="/tags/new" class="nav curr"><img src="{{ url_for('static', filename='images/icon-add.svg') }}" alt="Add tag" class="navicon"></a>
		{% else %}
		<a href="/tags" class="nav"><img src="{{ url_for('static', filename='images/icon-tag.svg') }}" alt="Tags" class="navicon"></a>
		{% endif %}

		{% if section == 'files' %}
		<a href="/files/new" class="nav curr"><img src="{{ url_for('static', filename='images/icon-add.svg') }}" alt="Add file" class="navicon"></a>
		{% else %}
		<a href="/files" class="nav"><img src="{{ url_for('static', filename='images/icon-file.svg') }}" alt="Files" class="navicon"></a>
		{% endif %}

		{% if section == 'pools' %}
		<a href="/pools/new" class="nav curr"><img src="{{ url_for('static', filename='images/icon-add.svg') }}" alt="Add pool" class="navicon"></a>
		{% else %}
		<a href="/pools" class="nav"><img src="{{ url_for('static', filename='images/icon-pool.svg') }}" alt="Pools" class="navicon"></a>
		{% endif %}

		{% if section == 'settings' %}
		<a href="/settings" class="nav curr"><img src="{{ url_for('static', filename='images/icon-settings.svg') }}" alt="Settings" class="navicon"></a>
		{% else %}
		<a href="/settings" class="nav"><img src="{{ url_for('static', filename='images/icon-settings.svg') }}" alt="Settings" class="navicon"></a>
		{% endif %}
	</footer>
	<script src="{{ url_for('static', filename='js/interface.js') }}"></script>
	<script src="{{ url_for('static', filename='js/'+ section + '.js') }}"></script>
</body>
</html>
