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

{% block navbar_start %}
{{ navbar(navbar_items) }}
{% endblock %}

{% block content %}
<div class="section has-text-centered">
    <div class="columns is-centered">
        <div class="column is-one-third">
            <h1 class="title">
                {{ gettext("Offers") }}
            </h1>
            <form method="get">
                <div class="field">
                    <div class="control">
                        <div class="select is-large is-fullwidth">
                            {{ form.select }}
                        </div>
                    </div>
                    <p class="help">{{ gettext("Search by offer ID or offer name") }}</p>
                </div>
                <div class="field">
                    <div class="control">
                        {{ form.search(class_="input is-large") }}
                    </div>
                </div>
                <div class="field">
                    <label class="label">{{ gettext("Sort by") }}</label>
                    <div class="control">
                        {% for subfield in form.radio %}
                        <span>{{ subfield }} {{ subfield.label }}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="field">
                    {{ form.include_expired_plans }} {{ form.include_expired_plans.label }}
                </div>
                <div class="field">
                    {{ form.include_basic_services }} {{ form.include_basic_services.label }}
                </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 column in view_model.results.rows %}
            <article class="media">
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong class="is-size-5">
                                <a href="{{ column.offer_details_url }}">{{ column.name }}</a>
                            </strong>
                            <br>
                            {% if column.is_basic_service %}
                            <small>@{{ column.provider_name }}</small>
                            {% else %}
                            <small><a href="{{ column.provider_url }}">@{{ column.provider_name }}</a></small>
                            {% endif %}
                            <br>
                            <span>
                                {{ column.description }}
                            </span>
                        </p>
                    </div>
                    <div>
                        {% if column.is_basic_service %}
                        <span class="tag is-link">{{ gettext("Basic Service") }}</span>
                        {% endif %}
                        {% if column.is_cooperating %}
                        <span class="tag is-primary">{{ gettext("Cooperating plan") }}</span>
                        {% endif %}
                        {% if column.is_public_service %}
                        <span class="tag is-warning">{{ gettext("Public") }}</span>
                        {% endif %}
                        {% if column.is_expired %}
                        <span class="tag is-danger">{{ gettext("Expired") }}</span>
                        {% endif %}
                        {% if column.is_own_plan %}
                        <span class="tag is-info">{{ gettext("Our plan") }}</span>
                        {% endif %}
                        {% if column.is_own_basic_service %}
                        <span class="tag is-info">{{ gettext("My offer") }}</span>
                        {% endif %}
                    </div>
                </div>
                {% if not column.is_basic_service %}
                <div class="media-right">
                    <p class="is-size-5">
                        {{ column.price_per_unit }}
                    </p>
                </div>
                {% endif %}
                <div class="media-right">
                    {% if column.show_consumption_icon %}
                        {% if column.is_consumption_disabled %}
                        <span class="has-text-grey-light">{{ "basket-shopping"|icon }}</span>
                        {% else %}
                        <a href="{{ column.consumption_url }}">{{ "basket-shopping"|icon }}</a>
                        {% endif %}
                    {% endif %}
                </div>
            </article>
            {% endfor %}
            {{ render_pagination(view_model.pagination) }}
        </div>
    </div>
</div>
{% endif %}
{% endblock %}