{% extends "../templates/basic.njk" %}
{% import "../components/_map.njk" as mapComponent %}
{% import "../components/_utils.njk" as utils %}

{% block head %}
    <title>DDStats - Maps!</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/maps.css">
{% endblock %}

{% block body %}
    <main class="flex-container">
        <form action="/maps" method="get" id="search">
            <h1>Search</h1>
            <input type="text" name="map" id="map" placeholder="Map name" value="{{ options.query.map }}">
            <input type="text" name="categories" id="categories" placeholder="Category" value="{{ options.query.categories }}">
            <input type="text" name="stars" id="stars" placeholder="Star amount" value="{{ options.query.stars }}">

            <div class="sorting">
                <label for="asc">
                    <input type="radio" name="order" id="asc" value="asc" {{ "checked" if options.query.sortyBy == "asc" }}>
                    Sort Ascending
                </label>
                <label for="desc">
                    <input type="radio" name="order" id="desc" value="desc" {{ "checked" if options.query.sortyBy == "desc" }}>
                    Sort Descending
                </label>
            </div>

            <button type="submit">Search!</button>
        </form>        

        <div class="flex-container pages">
            {{ utils.pager(data.maps.pageInfo.page, data.maps.pageInfo.totalPages, options.query) }}
        </div>

        {% for map in data.maps.maps %}
            {{ mapComponent.card(map) }}
        {% endfor %}

        <div class="flex-container pages">
            {{ utils.pager(data.maps.pageInfo.page, data.maps.pageInfo.totalPages) }}
        </div>
    </main>
{% endblock %}