{% extends "base.html" %}
{% load static tz %}
{% load core_tags %}

{% block body %}
    <div id="toolbar">
        <form id="changelist-search" action="{{ request.get_full_path }}" method="get">
            <div>
                <label for="searchbar"><img src="/static/admin/img/search.svg" alt="Search"></label>
                <select name="query_type" id="query_type">
                    <option {% if request.GET.query_type == 'all' %}selected{% endif %} value="all">All</option>
                    <option {% if request.GET.query_type == 'fulltext' %}selected{% endif %} value="fulltext">Content</option>
                    <option {% if request.GET.query_type == 'meta' %}selected{% endif %} value="meta">Metadata</option>
                    <option {% if request.GET.query_type == 'url' %}selected{% endif %} value="url">URL</option>
                    <option {% if request.GET.query_type == 'title' %}selected{% endif %} value="title">Title</option>
                    <option {% if request.GET.query_type == 'timestamp' %}selected{% endif %} value="timestamp">Timestamp</option>
                    <option {% if request.GET.query_type == 'tags' %}selected{% endif %} value="tags">Tags</option>
                </select>
                <input type="text" size="40" name="q" value="{{ request.GET.q }}" id="searchbar" autofocus placeholder="Title, URL, tags, timestamp, or content...".>
                <input type="submit" value="Search" style="height: 36px; padding-top: 6px; margin: 8px"/>
                <input type="button"
                       value="♺"
                       title="Refresh..."
                       onclick="location.href='{{ request.get_full_path }}'"
                       style="background-color: rgba(121, 174, 200, 0.8); height: 30px; font-size: 0.8em; margin-top: 12px; padding-top: 6px; float:right">
                </input>
                &nbsp;
                &nbsp;
                {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }} total
                &nbsp;
               (Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }})
            </div>
        </form>
    </div>
    <div style="width: 100%; overflow-x: auto;">
        <table id="table-bookmarks" style="width: 100%; table-layout: fixed">
            <thead>
                <tr>
                    <th style="width: 132px">Bookmarked</th>
                    <th>Snapshot ({{page_obj.paginator.count}})</th>
                    <th style="width: 280px">Files</th>
                    <th>Original URL</th>
                </tr>
            </thead>
            <tbody>
                {% for link in object_list %}
                    {% include 'index_row.html' with link=link  %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    <br/>
    <center>
        Showing {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }} total
        <br/>
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?{% url_replace page='1' %}">&laquo; first</a> &nbsp;
                <a href="?{% url_replace page=page_obj.previous_page_number %}">previous</a>
                &nbsp;
            {% endif %}
    
            <span class="current">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
        
            {% if page_obj.has_next %}
                &nbsp;
                <a href="?{% url_replace page=page_obj.next_page_number %}">next </a> &nbsp;
                <a href="?{% url_replace page=page_obj.paginator.num_pages %}">last &raquo;</a>
            {% endif %}
        </span>
        <br>
    </center>
{% endblock %}
