{% extends "base.html" %} {% block main_content %}
		<div class="container-fluid">
			<h3 class="offset-lg-2">{{page_title}}</h3>
            <form id="main_form" method="POST">
                <input id="offset" type="hidden" name="offset" value="{{offset}}">
                <input id="grouping" type="hidden" name="grouping" value="">
                <input id="size" type="hidden" name="size" value="">
                <input id="cwd" type="hidden" name="cwd" value="">
                <input id="folders" type="hidden" name="folders" value="False">
                <div class="row">
                    <div class="input-group col-lg-4">
                        {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start" )|safe }}
                        {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"], "", "rounded-end" )|safe }}
                    </div class="input-group...">
                    <div class="col my-auto d-flex justify-content-center">
                        <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
                        <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
                        <button id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
                    </div class="col...">
                </div class="row">
            </form
			<div class="row">
				<table class="table table-striped table-sm col-xl-12">
				<thead><tr class="table-primary"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody>

					{% for obj in entry_data %}
						<tr><td>
							{% if obj.type.name == "Directory" %}
								<i style="font-size:48;" class="fas fa-folder"></i><br><span class="figure-caption">{{obj.name}}</span>
							{% else %}
								<figure class="figure" font-size: 24px;>
									<div style="position:relative; width:100%">
										{% if obj.type.name=="Image" %}
											{% set icon="fa-file-image" %}
											<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
										{% elif obj.type.name == "Video" %}
											{% set icon="fa-film" %}
											<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
										{% elif obj.type.name == "Directory" %}
											{% set icon="fa-folder" %}
										{% else %}
											{% set icon="fa-question-circle" %}
										{% endif %}
										<img class="thumb" style="display:block" height="48" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img>
										{% if obj.type.name=="Image" or obj.type.name == "Video" %}
											</a>
										{% endif %}
										<div style="position:absolute; top: 2px; left: 2px;">
											<i style="font-size:16;background-color:black;color:white" class="fas {{icon}}"></i>
										</div>
									</div>
									<figcaption class="figure-caption">{{obj.name}}</figcaption>
								</figure>
							{% endif %}
						</td>
                        {% if obj.type.name != "Directory" %}
                        <td>{{obj.file_details.size_mb}}</td><td>{{obj.in_dir.in_path.path_prefix.replace("static/","")}}/{{obj.in_dir.rel_path}}</td><td>{{obj.file_details.hash}}</td>
						{% else %}
                        <td></td><td></td><td></td>
                        {% endif %}
                        </tr>
					{% endfor %}
				</tbody></table>
			</div class="row">
		</div class="container">
{% endblock main_content %}