{% extends "base.html" %}

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

{% block content %}
<form action="/search" method="get">
    <div class="grid-selection">
        <b>Sort by:</b>
        <select name="sort">
            <option value="time">Import Time</option>
            <option value="az">A-Z</option>
            <option value="za">Z-A</option>
            <option value="size">Archive Size</option>
        </select>
    </div>
    <div class="grid-selection">
        <b>Category:</b>
        <select name="category">
            {% for i in categories %}
            <option value="{{i[0]}}">{{i[1]}}</option>
            {% endfor %}
        </select>
    </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!">
    <div class="grid-selection"></div>
</form>
{% 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 %}
{% endblock %}