{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% block title %}User {{ username }}{% endblock %}
{% block content %}
    <div class="mb-3">
        <h1>{{ user.username }}'s {% trans "Profile" %}</h1>
    </div>
    <h2 class="h3">{% trans "Wishlist" %}</h2>
    <div class="mb-4">
        {% if wishes %}
            <ul class="list-group">
                {% for wish in wishes %}<li class="list-group-item">{{ wish.title }}</li>{% endfor %}
            </ul>
        {% else %}
            <div class="alert alert-warning" role="alert">{% trans "There are currently no wishes!" %}</div>
        {% endif %}
    </div>
    <div class="mb-3">
        <h2 class="h3">{% trans "Offers" %}</h2>
    </div>
    {% if offers %}
        <div class="card-deck d-flex justify-content-around justify-content-sm-around justify-content-md-between flex-wrap">
            {% for offer in offers %}
                <div class="col">
                    <div class="card h-100 p-0 flex-column justify-content-between">
                        <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="#">
                                <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">{% trans "There are currently no active offers" %}.</div>
    {% endif %}
{% endblock %}