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

{% block title %}Offer: {{ offer.title }}{% endblock %}

{% block meta %}
<meta name="description" content="{{offer.byuser }} offers {{ offer.title}}!" >
<meta name="author" content="{{ offer.byUser }}">
{% endblock %}

{% block body %}
    {% for message in app.flashes('error') %}
        <div class="alert alert-danger" role="alert">
            {{ message }}
        </div>
    {% endfor %}

    {% for message in app.flashes('success') %}
        <div class="alert alert-success" role="success">
            {{ message }}
        </div>
    {% endfor %}

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

    <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 w-50">
            <h1 class="mb-3">{{ offer.title }}</h1>
            <div class="mb-3 d-flex">
                <p class="pr-3">
                    <i class="fas fa-user"></i> 
                    {% if offer.byUser == user %}
                        Me
                    {% else %}
                        {{ offer.byUser }}
                    {% endif %}
                </p>
                <p class="pr-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.byUser == user %}
        <a href="{{ path('edit_offer', {'urlId': offer.urlId}) }}" class="btn btn-info mb-3"><i class="fas fa-pen"></i></a>
        <button type="button" class="btn btn-danger mb-3" 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', {'urlId': offer.urlId}) }}">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>
            <a class="btn btn-primary mb-3" href="{{ path('trade', {'urlId': offer.urlId}) }}">Offer trade</a>
        {% endif %}
{% endblock %}