{%  extends "WebFrontBundle::layout.html.twig" %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_responsive.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/select2.min.css")}}">

{% endblock %}

{% block body %}

test

<!-- Home -->

<div class="home">

    <div class="home_background parallax-window" data-parallax="scroll" data-image-src="{{ asset("assets/uploads/airports/"~airport[0].getAbr()~".jpg")}}"></div>
    <div class="home_content">
        <div class="home_title" style="font-size: 36px;"> {{ airport[0].getTitle() }} </div>
    </div>

</div>

<!-- Offers -->

<div class="offers">

    <!-- Offers -->

    <div class="container">
        <p style="
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    animation: flash;
    color: red;
">Toute réservation faite moins de 24 heures avant l'heure du service ne garantit pas que celui-ci pourra être réalisé, même si le paiement en ligne a été effectué.</p>
            <style>
                .offers_grid {
                    padding: 2%;
                    border-radius: 10px;
                    box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc, 0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999, 0px 7px 2px rgb(0 0 0 / 50%), 0px 7px 2px rgb(0 0 0 / 10%), 0px 7px 2px rgb(0 0 0 / 73%), 0px 3px 5px rgb(0 0 0 / 30%), 0px 5px 10px rgb(0 0 0 / 37%), 0px 10px 10px rgb(0 0 0 / 10%), 0px 20px 20px rgb(0 0 0 / 10%);
                }
            </style>

             {% if airport[0].getAbr() == "OZZ" %}


                <div class="row">
                    <div class="col-lg-12 alert alert-danger" role="alert" style="font-size: x-large;">
                       <center> L'ensemble des services sont suspendus pour le moment ! Merci. </center>
                    </div>
                </div>



            
            {% else %}
                  
                {% for pack in packs %}
                    {% if pack.getTitle() == "Pass Lounge VIP" %}
                         <div class="row">
                             <div class="col-lg-12">
                        <!-- Offers Grid -->
                        
                                 <div class="offers_grid">

<!-- Offers Item -->
                                    <div class="offers_item rating_4">
                                        <div class="row">
                                            <div class="col-lg-1 temp_col"></div>
                                            <div class="col-lg-3 col-1680-4">
                                                <div class="offers_image_container">
                                                    
                                                    <div class="offers_image_background" style="border-radius: 10px; background-image:url({{ asset("assets/uploads/offers/fast_track_vip_cmn.jpg")}});"></div>
                                                        
                                                    

                                                    <div class="offer_name"><a href="#">{{ pack.getTitle() }}</a></div>

                                                </div>
                                            </div>
                                            <div class="col-lg-8">
                                                <div class="offers_content">
                                                    {% set europrice =  pack.getPriceAdlt() %}
                                                    {% set madprice =  europrice*10 %}
                                                    <div class="offers_price"> {{ europrice|round }} €/ {{ madprice }} MAD  <span>{% trans %}Per person & per way{% endtrans %} <b>(HT)</b></span></div>
                                                    <div class="rating_r rating_r_4 offers_rating" data-rating="4">
                                                        <i></i>
                                                        <i></i>
                                                        <i></i>
                                                        <i></i>
                                                        <i></i>
                                                    </div>

                                                    <div>
                                                    

                                                        <p class="offers_text">
                                                                Besoin de <u>vous détendre avant le départ de votre avion</u>, optez pour le salon VIP. Avec un accès de 3 heures, Savourez de délicieuses collations et une gamme de boissons, ou consultez les e-mails de dernière minute avec notre WiFi gratuit, espaces fumeurs est mis à votre disposition.
                                                        </p>
                                                    
                                                     
                                                </div>
                                                    
                                                




                                            <div class="button book_button" style="float: right;"><a style="font-size: 20px;" href="{{ path("book_fasttrack",{"airport":airport[0].getAbr(),"fasttrack":pack.getTitle(),"idpack":pack.getId()}) }}">{% trans %}Book{% endtrans %}<span></span><span></span><span></span></a></div>
                                            <div class="offer_reviews">
                                                <div class="offer_reviews_content">
                                                    <div class="offer_reviews_title">{% trans %}very good{% endtrans %}</div>
                                                    <div class="offer_reviews_subtitle">{% trans %}100 reviews{% endtrans %}</div>
                                                </div>
                                                <div class="offer_reviews_rating text-center">9.1</div>
                                            </div>
                                        </div>
                                    </div>



                                    
                                </div>
                            </div>
                            </div>
                             <!-- Offers Item -->
                            </div>
                            
                            
                    </div>

                    {% endif %}

                {% endfor %}

                {% endif %}
              
        </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script src="{{ asset("assets/plugins/parallax-js-master/parallax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/Isotope/isotope.pkgd.min.js")}}"></script>

    <script src="{{ asset("assets/js/select2.min.js")}}"></script>

    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2({
                width: '100%'
            });

        });
        $('.alert').alert();

    </script>
    <style>
    .offers_text {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        margin-top: 3px;
        margin-bottom: 0px;
    }
    </style>
{% endblock %}