{% extends "base.html" %} {% block main_content %}
    <script src="{{ url_for( 'internal', filename='js/files_support.js')}}?v={{js_vers['fs']}}"></script>

    <div class="container-fluid">
        <h3 class="offset-2">{{page_title}}</h3>
            <div class="col col-auto">
                <div class="input-group">
                    {{CreateSelect( "noo", OPT.noo, ["Oldest", "Newest","A to Z", "Z to A"], "changeOPT(getPageFileList); return false", "rounded-start py-1 my-1")|safe }}
                    {{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"], "changeOPT(getPageFileList); return false", "rounded-end py-1 my-1" )|safe }}
                    <div class="mb-1 col my-auto d-flex justify-content-center">
                        <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary" onClick="prevPage(getPageFileList)">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#prev"/></svg>
                        </button>
                        <span class="how_many_text sm-txt my-auto">&nbsp;{{OPT.how_many}} files&nbsp;</span>
                        <button id="next" name="next" class="next sm-txt btn btn-outline-secondary" onClick="nextPage(getPageFileList)">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#next"/></svg>
                        </button>
                    </div class="col...">
                </div class="input-group...">
            </div class="col col-auto">
    </div class="container">
    <div id="file_list_div" class="container-fluid pt-2">
    </div class="container">
    <div class="container-fluid">
        <input type="hidden" name="cwd" id="cwd" value="{{OPT.cwd}}">
        <div class="row">
            <div class="col my-auto d-flex justify-content-center">
                <button aria-label="prev" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary disabled" onClick="prevPage(getPageFileList)" disabled>
                    <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#prev"/></svg>
                </button>
                <span class="how_many_text sm-txt my-auto">&nbsp;{{OPT.how_many}} files&nbsp;</span>
                <button aria-label="next" id="next" name="next" class="next sm-txt btn btn-outline-secondary" onClick="nextPage(getPageFileList)">
                    <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#next"/></svg>
                </button>
            </div class="col my-auto">                                                                                                                                                                                   </div class="row">
    </div class="container-fluid">
{% endblock main_content %}
{% block script_content %}
<script>
    // this is the list of entry ids for the images for ALL matches for this query
    var entryList={{query_data.entry_list}}
    var OPT = {{ OPT.to_dict()|tojson }};
    // set from query data and stored in OPT for convenience.  It can be 0 -
    // this implies no content in the Path at all
    OPT.root_eid = {{ query_data.root_eid }};

    // pageList is just those entries shown on this page from the full entryList
    var pageList=[]
    // force pageList to set pageList for & render the first page
    getPage( 1, getPageFileList )
</script>
{% endblock script_content %}