<ol class="breadcrumb">
    <li><a href="{{app_context}}/app">{{__ "Home"}}</a></li>
    <li><a href="{{app_context}}/app/{{conn_name}}">{{conn_name}}</a>&nbsp;({{__ "connection"}})</li>
    <li><a href="{{app_context}}/app/{{conn_name}}/{{db_name}}">{{db_name}}</a>&nbsp;({{__ "database"}})</li>
    <li><a href="{{app_context}}/app/{{conn_name}}/{{db_name}}/{{coll_name}}/view">{{coll_name}}</a>&nbsp;({{__ "collection"}})</li>
</ol>
<div class="row">
    <div class="col-lg-12">
        <div class="col-sm-12 col-md-3 col-lg-3 pad-bottom justifiedButtons no-pad-left">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <a class="btn btn-success btn-sm" href="{{app_context}}/app/{{conn_name}}/{{db_name}}/{{coll_name}}/new">{{__ "New document"}}</a>
                <a class="btn btn-info btn-sm" href="{{app_context}}/app/{{conn_name}}/{{db_name}}/{{coll_name}}/indexes">{{__ "Indexes"}}</a>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 justifiedButtons">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <a type="button" class="btn btn-warning btn-sm action_button" data-toggle="modal" data-target="#searchModal">{{__ "Search"}}</a>
                <a type="button" class="btn btn-primary btn-sm" id="btnqueryDocuments" data-toggle="modal" data-target="#queryDocuments">{{__ "Query"}}</a>
                <a type="button" class="btn btn-danger btn-sm action_button" id="searchReset">{{__ "Reset"}}</a>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 text-right">
            <div class="form-group">
                <label for="docsPerPage" class="col-sm-6 control-label paginateLabel">Docs per page</label>
                <div class="col-sm-6">
                    <select class="form-control input-sm" id="docsPerPage">
                        <option>5</option>
                        <option>10</option>
                        <option>25</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2 text-right no-pad-right">
            <div class="recordCount">
                <strong>{{__ "Total records"}}:</strong> <span id="recordCount">0</span>
                <button class="btn btn-sm btn-danger" id="btnMassDelete">Delete all</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div id="doc_load_placeholder" class="col-lg-12"><h3 class="text-center">{{__ "Finding docs"}} <i class="fa fa-spinner fa-spin"></i></h3></div>
        <div id="doc_none_found" class="col-lg-12 hidden">
            <div class="col-lg-12">
                <h3 class="text-center">{{__ "No documents found"}}</h3>
            </div>
        </div>
        <div id="coll_docs"></div>
    </div>
</div>
<div class="col-lg-12">
    <div id="pager" class="text-center pagination-sm"></div>
</div>
<input type="hidden" id="page_num" value="{{page_num}}">
