{% set offers = __SELF__.offers %}

<div class="product_box">
    {% for offer in offers %}
    <div class="product_item wow bounceInUp"

        data-wow-duration="1s"

        {% if loop.index > 4 %}
            {% if loop.index - 3 < 10 %}
                data-wow-delay=".{{ loop.index - 3 }}s"
            {% else %}
                data-wow-delay="{{ (loop.index - 3) / 10 }}s"
            {% endif %}
        {% else %}
            {% if loop.index < 10 %}
                data-wow-delay=".{{ loop.index }}s"
            {% else %}
                data-wow-delay="{{ loop.index / 10 }}s"
            {% endif %}
        {% endif %}
    >
        <div class="item_head">
            <div class="item_lot">
                {{ 'page.prod_id'|_ }} №:
            </div>
            <div class="item_num">
                № {{offer.id}}
            </div>
        </div>
        <div class="inline_num">
            № {{offer.id}}
        </div>
        <div class="item_photo">
            <img src="{{ offer.images[0].thumb(308,180,{'mode':'crop'}) }}" alt="">
        </div>
        <div class="item_group">
            <div class="item_title">
                {{ offer.name }}
            </div>
            <div class="item_sub_title">
                {{ offer.description }}
            </div>
        </div>
        <div class="item_group">
            <div class="item_sub_name">
                {{ 'page.prod_amount'|_ }}:
            </div>
            <div class="item_name">
                {{ offer.quantity }} {{ offer.measure.code }}.
            </div>
        </div>
        <div class="item_group">
            <div class="item_sub_name">
                {{ 'page.prod_price'|_ }}:
            </div>
            <div class="item_name">
                {{ offer.price }} {{offer.currency.code}} / 1 {{ offer.measure.code }}.
            </div>
        </div>
        <div class="item_group">
            <div class="item_sub_name">
                {{ 'page.prod_finishdate'|_ }}:
            </div>
            <div class="item_name">
                {{ offer.ends_at|date('d.m.Y') }}
            </div>
        </div>
        <div class="item_row">
            <a href="{{ 'offer'|page({ slug: offer.slug, id: offer.id }) }}" class="item_btn">
                {{ 'page.more'|_ }}
            </a>
            <div class="views">
                <span>
                    <img src="{{ 'assets/images/svg/watched.svg'|theme }}" alt="eye-icon">
                </span>
                <p>
                    {{ offer.number_of_views }}
                </p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if this.page.id != 'index' %}

    {% if offers.total > offers.perPage %}

    <div class="cat_end">
        <a href="{{ offers.previousPageUrl|default('#') }}&sort_order={{ __SELF__.sortParam }}" class="cat_arrow left">
            <img src="{{ 'assets/images/svg/arrow-right.svg'|theme }}" alt="">
        </a>
        <form method="get" class="cat_form">
            <input type="text" value="{{offers.currentPage|default('1')}}" name="page"> 
        </form>
        <a href="{{ offers.nextPageUrl|default('#') }}&sort_order={{ __SELF__.sortParam }}" class="cat_arrow ">
            <img src="{{ 'assets/images/svg/arrow-right.svg'|theme }}" alt="">
        </a>
        <div class="cat_page">
            {{ (offers.total / offers.perPage)|round(0,'ceil') }} {{ 'page.pages'|_ }}
        </div>
    </div>

    {% endif %}

{% endif %}