{% extends "base.html" %}

{% block meta %}
<link rel="stylesheet" href="/static/search.css" />
<link rel="stylesheet" href="/static/labels.css" />
<link rel="stylesheet" href="/static/home.css" />
{% endblock %}

{% block content %}
<form action="/search" method="get">
    <div class="grid-selection">
        <div class="select-container">
            <b>Sort by:</b>
            <select name="sort">
                <option value="time" {% if "time" == request.args.get('sort') %}selected="selected"{% endif %}>Import Time</option>
                <option value="az" {% if "az" == request.args.get('sort') %}selected="selected"{% endif %}>A-Z</option>
                <option value="za" {% if "za" == request.args.get('sort') %}selected="selected"{% endif %}>Z-A</option>
                <option value="size" {% if "size" == request.args.get('sort') %}selected="selected"{% endif %}>Archive Size</option>
            </select>
            <b>Category:</b>
            <select onchange="this.form.submit()" name="category">
                <option value="0">None</option>
                {% for i in categories %}
                <option value="{{i[0]}}" {% if i[0] == request.args.get('category')|int %}selected="selected"{% endif %}>{{i[1]}}</option>
                {% endfor %}
            </select>
            <b>Count: </b><input type="number" name="count" step="1" placeholder="Number of items" {% if request.args.get('count') %}value="{{request.args.get('count')}}"{% else %} value="20"{% endif %}>
        </div>
        <div class="labels-container">
            {% for ltype in res_labels %}
            <div class="flex-item"><b>{{ltype}}</b>
                {% for for_temp in res_labels[ltype] %}
                <input type="checkbox" id="{{for_temp[0]}}" name="{{for_temp[0]}}" {% if for_temp[0]|string in labels %}checked{% endif %}><label for="{{for_temp[0]}}">{{for_temp[1]}}</label>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% if request.args.get('q') %}
    <input type="text" name="q" value="{{request.args.get('q')}}" placeholder="Keywords">
    {% else %}
    <input type="text" name="q" placeholder="Keywords">
    {% endif %}
    <input type="submit" value="Search!">

    {% if archives|length > 0 %}
    <div class="grid-container">
        <div class="grid-header"><b>ARCHIVE</b></div>
        <div class="grid-header"><b>SIZE</b></div>
        <div class="grid-header"><b>IMPORTED</b></div>
        {% for arch in archives %}
        <a class="grid-item" href="/view/{{arch[0]}}"><div class="grid-item clickable"><b>{{arch[1]}}</b></div></a>
        <div class="grid-item"><p> {{arch[2]|spacer}} </p></div>
        <div class="grid-item"><p> {{arch[3]|ctime}} </p></div>

        {% endfor %}
    </div>
    {% else %}
    <p>No matching archives</p>
    {% endif %}
    {% if total_count > page*count and page == 1 %}
    <div class="pageselect">
        <div class="align-right">
            {% if page-3 > 1 %}
            <div class="pageitem">…</div>
            {% endif %}
            {% for pagenum in range(page-3,page) %}
                {% if pagenum > 0 %}
                <input class="pagebutton" type=submit formaction="/search/{{pagenum}}" value="{{pagenum}}"> 
                {% endif %}
            {% endfor %}
        </div>
        <div class="pageitem" id="currentpage">{{page}}</div>
        <div class="align-left">
            {% for pagenum in range(page+1,page+4) %}
                {% if (pagenum-1)*count < total_count %}
                <input class="pagebutton" type=submit formaction="/search/{{pagenum}}" value="{{pagenum}}"> 
                {% endif %}
            {% endfor %}
            {% if (page+4)*count < total_count %}
            <div class="pageitem">…</div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</form>
{% endblock %}