{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}Offers{% endblock %}
{% block content %}
    <h1 class="mt-3">
        Offers
        <button class="btn btn-pfl"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#filterCollapse"
                aria-expanded="true"
                aria-controls="filterCollapse">
            <i class="fa-solid fa-filter"></i> Filter
        </button>
    </h1>
    <form method="post"
          enctype="multipart/form-data"
          class="collapse"
          id="filterCollapse">
        {% csrf_token %}
        {{ form|crispy }}
        <button type="submit" class="btn btn-pfl">Filter</button>
    </form>
    {% if offers %}
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 mt-3 mb-3 row-gap-5">
            {% for offer in offers %}
                <div class="col">
                    <div class="card h-100 p-0">
                        <a href="{% url 'offer_detail' offer.id %}">
                            {% if offer.image %}
                                <img class="card-img-top offer-img" src="{{ offer.image.url }}"/>
                            {% else %}
                                <img class="card-img-top offer-img" src="{% static 'placeholder.jpg' %}" />
                            {% endif %}
                            <div class="card-body">
                                <h5 class="h5">{{ offer.title }}</h5>
                            </div>
                        </a>
                        <div class="card-footer d-flex justify-content-between">
                            <a href="{% url 'user_detail' offer.user.id %}">
                                <i class="fas fa-user mt-3"></i> {{ offer.user.username }}
                            </a>
                            <p class="zip">
                                <i class="fas fa-map-marker-alt mt-3"></i> {{ offer.zipcode }}
                            </p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-warning" role="alert">There are no active offers with the current filter.</div>
    {% endif %}
{% endblock %}