{% extends 'base.html' %}
{% block title %}Offer: {{ offer.title }}{% endblock %}
{% block meta %}
    <meta name="description"
          content="{{ offer.user.username }} offers {{ offer.title }}!">
    <meta name="author" content="{{ offer.user.username }}">
{% endblock %}
{% block content %}
    {% if offer.user == request.user %}<div class="alert alert-info" role="alert">This is your offer!</div>{% endif %}
    <div class="show-offer-container row gx-5">
        <div class="show-img-container col-12 col-md-6">
            <img class="mb-3 img-fluid rounded"
                 alt="Generic placeholder image"
                 src="{{ offer.image.url }}">
        </div>
        <div class="show-offer-info col-12 col-md-6">
            <h1 class="mb-3">{{ offer.title }}</h1>
            <div class="mb-3 d-flex column-gap-2">
                <p class="mr-3">
                    <i class="fas fa-user"></i>
                    {% if offer.user == user %}
                        Me
                    {% else %}
                        {{ offer.user.username }}
                    {% endif %}
                </p>
                <p class="mr-3">
                    <i class="fas fa-map-marker-alt"></i> {{ offer.zipcode }}
                </p>
                {% if distance > 0 %}
                    <p class="pr-3">
                        <i class="fas fa-map-signs mr-1"></i>ca. {{ distance }} km
                    </p>
                {% endif %}
            </div>
            <h3>Description</h3>
            <p>{{ offer.description }}</p>
        </div>
    </div>
    {% if offer.user == user %}
        <a href="{% url 'offer_edit' offer.id %}" class="btn btn-pfl"><i class="fas fa-pen"></i></a>
        <!-- Button trigger modal -->
        <button type="button"
                class="btn btn-danger"
                data-bs-toggle="modal"
                data-bs-target="#exampleModal">
            <i class="fas fa-trash-alt"></i>
        </button>
        <!-- Modal -->
        <div class="modal fade"
             id="exampleModal"
             tabindex="-1"
             aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Delete offer</h1>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">Do you really want to delete this offer? This can't be undone.</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <a href="{% url 'offer_delete' offer.id %}"
                           type="button"
                           class="btn btn-danger">Delete</a>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <h3>Wishes</h3>
        <p>{{ offer.user.username }} would like some of the following in return:</p>
        <div class="mb-3">
            {% 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">There are currently no wishes!</div>
            {% endif %}
        </div>
        <a class="btn btn-pfl mb-3" href="{% url 'offer_trade' offer.id %}">Offer trade</a>
    {% endif %}
{% endblock %}