{% extends 'index.html' %}
{% load static %} 
<link rel="stylesheet" href="{% static 'css/styles.css' %}">

{% block content %}

        {% if active_offers_list %}
            {% for Offer in active_offers_list %}

                <div class='offer-box-wrapper'>
                    <div class='offer-box-row'>
                        <div class='offer-box-wrapper-photo'>
                            {% for photo in Offer.images.all %}
                                {% if photo.main_image == True%}
                                    <img src="{{ photo.image.url }}">
                                {% endif %}
                            {% endfor %} 
                        </div>
                        <div class='offer-box-wrapper-content'>
                            <a href ="{{ Offer.get_absolute_url}}"> <h2> {{ Offer.title}} </h2></a>
                            <p> {{ Offer.description|truncatewords:50 }} </p>
                            <ul>
                            <li> Ilośc miejsc do spania: {{Offer.Places_to_sleep}} </li>
                            <li> Skrzynia biegów: {{Offer.get_gearbox_display}}</li>
                            </ul>
                            <div class='offer-box-price'>Cena: {{ Offer.price }} PLN / dzień </div>
                        </div>
                    </div>
                </div>
        {% endfor %}
        {% endif %}

<nav aria-label="...">
{% if is_paginated %}
  <ul class="pagination">
        {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}" tabindex="-1">Previous</a></li>
        {% else %}    
            <li class="page-item disabled"></li>
        {% endif %}

        {% for i in paginator.page_range %}
            {% if page_obj.number == i %}
                <li class="page-item active"><a class="page-link" href="#">{{ i }} <span class="sr-only">(current)</span></a></li>
            {% else %}
                <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}#">Next</a></li>
        {% else %}
             <li class="page-item disabled"></li>
        {% endif %}

  </ul>
{% endif %}
</nav>

{% endblock %}