{% extends "frontend/base.html" %}
{% load static %}
{% load i18n %}
{% block "styles" %}
<link rel="stylesheet" href="{% static "vendor/css/tabella.css" %}">
{% endblock %}

{% block "content" %}
        <!--===== INNERPAGE-WRAPPER ====-->
        <section class="innerpage-wrapper">
            <div id="payment-success" class="section-padding">
        <div class="container text-center">
            <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-8 col-lg-offset-2">
                    <div class="payment-success-text">
                        <h1>Angebote vergleichen</h1>
                        {% if object.offer_set.all %}
                        <div id="offers" style="text-align: center;"></div>
                        {% else %}
                        <div class="alert alert-warning alert-dismissible text-center" role="alert">
                            Leider sind zu deiner Anfrage keine Angebote eingegangen...
                        </div>
                        {% endif %}
                    </div>
                </div><!-- end columns -->
            </div><!-- end row -->
        </div><!-- end container -->
    </div><!-- end coming-soon-text -->
</section><!-- end innerpage-wrapper -->
{% endblock %}

{% block "modal" %}
<div id="accept-offer" class="modal custom-modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Angebot akzeptieren?</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div><!-- end modal-header -->
            
            <div class="modal-body">
                <form method="POST"> 
                {% csrf_token %}
                <p>Bist du sicher, dass du das Angebot von <span id="hotel_name"></span> annehmen möchtest?</p>
                <p>Deine Sicherheitsleistung von € {{ object.budget }} wird zur Bezahlung der Buchung verwendet und kann damit nicht mehr rückerstattet werden.</p>
                <p>Die von dir angegebenen Daten werden dem Reiseanbieter zur Bearbeitung deiner Buchung zur Verfügung gestellt.</p>
                <div class="checkbox">
                    <label><input type="checkbox" required id="id_terms" name="terms"> {% trans "Ich erkläre mich einverstanden mit den" %} <a href="#">{% trans "Allgemeinen Geschäftsbedingungen" %}</a> {% trans "und der" %} <a href="#">{% trans "Datenschutzerklärung" %}</a>.</label>
                </div>
                <input type="hidden" required id="id_offer" name="offer" />
                <button class="btn btn-orange btn-block">Zahlungspflichtig buchen!</button>
                </form>
            </div><!-- end modal-bpdy -->
        </div><!-- end modal-content -->
    </div><!-- end modal-dialog -->
</div><!-- end edit-profile -->

{% for offer in offer.object_set.all %}
<div id="gallery{{ offer.id }}" class="modal custom-modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Galerie</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div><!-- end modal-header -->
            
            <div class="modal-body">
                
            </div><!-- end modal-bpdy -->
        </div><!-- end modal-content -->
    </div><!-- end modal-dialog -->
</div><!-- end edit-profile -->
{% endfor %}
{% endblock %}

{% block "scripts" %}
<script src="{% static "vendor/js/tabella.min.js" %}"></script>
<script src="{% url "auction:offer_table" object.uuid %}"></script>
<script src="{% static "auction/js/offer-selection.js" %}"></script>
{% endblock %}