{% extends "base.html" %} {% block main_content %}
    <div class="container-fluid">
        <h3 class="offset-2">{{page_title}}</h3>
        <form id="main_form" method="POST">
            <input id="offset" type="hidden" name="offset" value="{{OPT.offset}}">
            <input id="grouping" type="hidden" name="grouping" value="">
            <input id="folders" type="hidden" name="folders" value="False">
            <div class="col col-auto">
                <div class="input-group">
                    {{CreateSelect( "noo", OPT.noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start py-1 my-1")|safe }}
                    {{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"], "", "rounded-end py-1 my-1" )|safe }}
                    <div class="mb-1 col my-auto d-flex justify-content-center">
                        {% set prv_disabled="" %}
                        {% if OPT.offset|int == 0 %}
                            {% set prv_disabled="disabled" %}
                        {% endif %}
                        <button id="prev" {{prv_disabled}} name="prev" class="prev sm-txt btn btn-outline-secondary">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
                        </button>
                        <span class="sm-txt my-auto">&nbsp;{{OPT.how_many}} files&nbsp;</span>
                        {% set nxt_disabled="" %}
                        {% if entry_data|length < OPT.how_many|int %}
                            {% set nxt_disabled="disabled" %}
                        {% endif %}
                        <button id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
                        </button>
                    </div class="col...">
                </div class="input-group...">
            </div class="col col-auto">
        </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 == "Image" or obj.type.name == "Video" %}
                            <figure class="figure" font-size: 24px;>
                                <div style="position:relative; width:100%">
                                    {% if obj.type.name=="Image" %}
                                        <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
                                    {% elif obj.type.name == "Video" %}
                                        <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
                                    {% 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>
                                <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 %}