{% extends 'base.html' %}
{% load static %}
{% block title %}Offers{% endblock %}
{% block content %}
    <h1>Offers</h1>
    {% if offers %}
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-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 %}