{% extends 'base.html' %}
{% load i18n %}
{% 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">{% trans "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 %}
                        {% trans "You" %}
                    {% else %}
                        {{ offer.user.username }}
                    {% endif %}
                </p>
                <p class="mr-3">
                    <i class="fas fa-map-marker-alt"></i> {{ offer.zipcode }}
                </p>
                {% if dist %}
                    <p class="pr-3">
                        <i class="fas fa-map-signs mr-1"></i> ca. {{ dist }} km
                    </p>
                {% endif %}
            </div>
            <h3>{% trans "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">{% trans "Delete offer" %}</h1>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="{% trans 'Close' %}"></button>
                    </div>
                    <div class="modal-body">{% trans "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">{% trans "Cancel" %}</button>
                        <a href="{% url 'offer_delete' offer.id %}"
                           type="button"
                           class="btn btn-danger">{% trans "Delete" %}</a>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <h3>{% trans "Wishes" %}</h3>
        <p>{{ offer.user.username }} {% trans "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">{% trans "There are currently no wishes!" %}</div>
            {% endif %}
        </div>
        <form method="post" action="{% url 'offer_trade' %}">
            {% csrf_token %}
            <input type="hidden" name="offer" value="{{ offer.id }}"/>
            <button class="btn btn-pfl mb-3" data-umami-event="Trade offer">{% trans "Offer trade" %}</button>
        </form>
    {% endif %}
{% endblock %}