{% extends 'base.html' %}
{% block scripts %}
    {{ super() }}
    <style>
        .item-gallery {
            display: inline-block;
            width: 350px;
            margin-right: 15px;
            margin-bottom: 15px;
            margin-top: 15px;
        }
        .item-gallery p {
            text-align: center;
        }
        a:hover {
            text-decoration: none !important;
        }
        p.empty {
            margin-top: 15px;
        }
    </style>
{% endblock %}
{% block content %}
    {% if items|length > 0 %}
        {% for item in items %}
            <a href="/result/{{ item.id_job }}">
                <div class="item-gallery">
                    <p>{{ item.name }}</p>
                    <img src="/gallery/{{ item.picture }}" alt="illustration" width="100%"/>
                </div>
            </a>
        {% endfor %}
        <table class="table table-striped">
        <thead>
            <tr>
                <th>
                    Reference genome
                </th>
                <th>
                    Query genome
                </th>
                <th>
                    Time elapsed
                </th>
                <th>
                    Maximum RAM usage
                </th>
            </tr>
        </thead>
        <tbody>
        {% for item in items %}
            <tr>
                <td>
                    {{ item.target }}
                </td>
                <td>
                    {{ item.query }}
                </td>
                <td>
                    {{ item.time_elapsed }}
                </td>
                <td>
                    {{ item.mem_peak }}
                </td>
            </tr>
        {% endfor %}
        </tbody>
        </table>
    {% else %}
        <p class="empty">Gallery is empty!</p>
    {% endif %}
{% endblock %}