{% extends 'base.html.twig' %}

{% block body %}
    {% if offer.byUser == user %}
        <div class="alert alert-info" role="alert">This is your offer!</div>
    {% endif %}

    <h1 class="mb-3">{{ offer.title }}</h1>

    <div class="show-offer-container d-flex flex-wrap">
        <div class="show-img-container">
            <img class="mb-3 img-fluid rounded" alt="Generic placeholder image" src="{{ asset('uploads/photos/' ~ offer.photofilename) }}">
        </div>
        <div class="show-offer-info">
          <h3>Description</h3>
          <p>{{ offer.description }}</p>
          <h3>From</h3>
          <p>{% if offer.byUser == user %}Me{% else %}{{ offer.byUser }}{% endif %} in {{ offer.zipCode }}</p>
        </div>
    </div>

    {% if offer.byUser == user %}
        <button href="{{ path('edit_offer', {'id': offer.id}) }}" class="btn btn-info"><i class="fas fa-pen"></i></button>
        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-trash-alt"></i></button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Warning</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this offer?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <a type="button" class="btn btn-danger" href="{{ path('delete_offer', {'id': offer.id}) }}">Delete</a>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <h3>Wishes</h3>
        <p>{{ offer.byUser }} would like some of the following in return:</p>
        <div class="mb-3">
            {% if wishes == [] %}
                <div class="alert alert-warning" role="alert">
                    There are currently no wishes!
                </div>
            {% else %}
                <ul class="list-group">
                {% for wish in wishes %}
                    <li class="list-group-item"> {{ wish.title }}</li>
                {% endfor %}
                </ul>
            {% endif %}
            </div>
            <button class="btn btn-primary">Offer trade</button>
        {% endif %}
{% endblock %}