{% from 'macros/pagination.html' import render_pagination %}
{% extends "base.html" %}

{% block navbar_start %}
<div class="navbar-item">{{ gettext("All basic services") }}</div>
{% endblock %}

{% block content %}
<div class="section has-text-centered">
    <div class="columns is-centered">
        <div class="column is-one-third">
            <h1 class="title">
                {{ gettext("Basic services") }}
            </h1>
            <form method="get">
                <div class="field">
                    <div class="control">
                        {{ form.search(class_="input is-large") }}
                    </div>
                    <p class="help">{{ gettext("Search by name") }}</p>
                </div>
                <input type="hidden" name="page" value="1">
                <button class="button is-block is-primary is-large is-fullwidth">
                    {{ gettext("Search") }}
                </button>
            </form>
        </div>
    </div>
    <h1 class="title">
        {{ gettext("Results") }} ({{ view_model.total_results }})
    </h1>
</div>

{% if view_model.show_results %}
<div class="section">
    <div class="columns is-centered">
        <div class="column is-one-third">
            {{ render_pagination(view_model.pagination) }}
            {% for row in view_model.results.rows %}
            <article class="media">
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong class="is-size-5">
                                <a href="{{ row.basic_service_url }}">{{ row.name }}</a>
                            </strong>
                            <br>
                            <small>{{ row.provider_name }}</small>
                            <br>
                            <span>{{ row.description }}</span>
                        </p>
                    </div>
                    <div>
                        <span class="tag is-light">{{ row.created_on }}</span>
                    </div>
                </div>
            </article>
            {% endfor %}
            {{ render_pagination(view_model.pagination) }}
        </div>
    </div>
</div>
{% endif %}
{% endblock %}