{% extends 'tbudddy/tbudddy.html.twig' %}

{% block body %}
    <div class="site-section site-section-sm pb-0 ">

        {% if top_image != 'null' %}
        <div class="custom_top_cover_image" style="background-image: url('/uploads/hosts/{{ top_image }}')">
        </div>
        {% endif %}
        {% if top_image == 'null' %}
            <div class="custom_top_cover_image" style="background-image: url('{{ asset('assets/tbudddy/images/top_custom_image2.jpg') }}')">
            </div>
        {% endif %}
    </div>
{#    background-image: url('../images/images/cover_woman.png');#}


    <div class="site-section site-section-sm pb-0 top_slider">
        <div class="container">
            <div>
                <div class="anfitriao_header col-md-12">
                    <div class="row  justify-content-center">
                        <div class="col-md-0">
                            <i class="fas fa-medal icon_size_anfitriao"></i>
                        </div>
                        <div class="col-md-3" style="line-height: 50px;padding: 0;">
                            <div class="text_custom_color_font cover_text_title cover_anfitriao_title"><span> Anfitrião desde {{date_sub}}</span></div>
                        </div>
                        <div class="col-md-0">
                            <i class="fas fa-user-check icon_size_anfitriao"></i>
                        </div>
                        <div class="col-md-2" style="line-height: 50px;padding: 0;">
                            <div class="text_custom_color_font cover_text_title cover_anfitriao_title"><span> Verificado</span></div>
                        </div>
                        <div class="col-md-0">
                            <i class="fas fa-map-marker-alt icon_size_anfitriao"></i>
                        </div>
                        <div class="col-md-3" style="line-height: 50px;">
                            <div class="text_custom_color_font cover_text_title cover_anfitriao_title"><span> {{operator_info.location}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="site-section site-section-sm bg-light">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <span class="anfitriao_title custom_font">{{operator_info.name}}</span>
                    <div class="custom_font">
                        <p style="color: #484848; font-size: 16px;">{{operator_description|raw }}</p>
                    </div>
                </div>
                <div class="col-md-6 order-first order-md-last">

                    {% if operator_image == false %}
                        <img src="/uploads/users/{{ operator_image }}" style="width: 100%;"><br>
                    {% endif %}
                    {% if operator_image != false %}
                        <img src="/uploads/users/{{ operator_image.filename }}" style="width: 100%;"><br>
                    {% endif %}

{#
<div class="avaliation" style="text-align: right; padding: 10px;"> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star-half-alt star_color"></i> <span class="custom_font" style="color: #333333;">50 Avaliações</span>#}
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="site-section site-section-sm bg-light offers_div" style="background-color: #EFEFEF !important;     padding-bottom: 0;">
        <div class="container_desteni">
            <div class="offers">
                <b class="custom_font" style="color: #333333; font-size: 42px">Minhas Atividades</b>
            </div>

            <div class="container">
                <div class="row mb-5">
                    <section class="actividate_slide" style=" width: 100%;">
                        {% for operator_product in get_active_product %}
                            <div>
                                <div class="property-entry h-100" style="background: none;">
                                    <a href="{{ path('product', {'id':  operator_product.product_id  , 'title': operator_urlNormalize(products.title)}) }}" class="offer_thumbail">
                                        <img src="/uploads/products/{{ operator_product.product_id }}-10x12.jpg" alt="Image" class="img-fluid">
                                    </a>
                                    <div class="offer_text_event">
                                        <div class="event_title">{{operator_urlNormalize(products.title)}}</div>
                                        <div class="event_desc">{{ operator_product.short_description }}</div>
                                        <div class="event_button">
                                            <form action="{{ path('product', {'id':  operator_product.product_id, 'title':  operator_product.title }) }}" method="post">
                                                <input class="custom-button event_style_button" onclick="window.location.href='{{ path('product', {'id':  operator_product.product_id  , 'title': operator_urlNormalize(products.title)}) }}" type="submit" value="Conferir atividade">
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        {% endfor %}

{#                        <div>#}
{#                            <div class="property-entry h-100" style="background: none;">#}
{#                                <a href="" class="offer_thumbail">#}
{#                                    <img src="{{ asset('assets/tbudddy/images/images/horse2.png') }}" alt="Image" class="img-fluid">#}
{#                                </a>#}
{#                                <div class="offer_text_event">#}
{#                                    <div class="event_title">Passeio a cavalo</div>#}
{#                                    <div class="event_desc">Um passeio por montanhas locais com vistas deslumbrantes da natureza.</div>#}
{#                                    <div class="event_button"> <button class="custom-button event_style_button">Conferir atividade</button></div>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
                    </section>
                </div>
            </div>
        </div>
    </div>


    {% if host_view == 'view' %}

    <div class="site-section site-section-sm bg-light">
        <div class="container">
            <h2 class="custom_font">{% trans %}for_you{% endtrans %}</h2>
            <div class="row mb-5">

                    {% for products in get_active_product %}
                        <div>
                            <div class="property-entry h-100">
                                <a href="{{ path('product', {'id':  products.product_id  , 'title': urlNormalize(products.title)}) }}" class="property-thumbnail">
                                    <img class="img-fluid product_img_{{ products.id }}" src="/uploads/products/{{products.product_id}}-6x5.jpg"  alt="Image">
                                </a>
                                <div class="">
                                    <h2 class="property-title custom_font"><a href=""> {{ products.title }}</a></h2>
                                    <span class="property-location d-block custom_font">{{products.short_description}}</span>


                                    <strong class="custom_font" style="color: #000;"><span class="product_price_{{ products.product_id }}"></span> €/{% trans %}person{% endtrans %}</strong>
                                    <script>
                                        $(".product_img_{{ products.id }}").error(function () {
                                            $(this).unbind("error").attr("src", "/assets/tbudddy/images/no-image.png");
                                        });

                                        var valor_xxx = {{ products.amount }};
                                        var resutado =  (valor_xxx / 100).toFixed(2);

                                        $('.product_price_{{ products.product_id }}').html(resutado);
                                    </script>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
            </div>

        </div>
    </div>


    <div class="site-section experience_section">
        <div class="container">
            <b class="custom_font" style="font-size: 28px;">{% trans %}popular_expericence{% endtrans %}  </b><b class="custom_font" style="font-size: 18px">(Algarve), </b><b class="custom_font" style="font-size: 12px;"><a style=" color: #AAAAAA" href="">{% trans %}change_location{% endtrans %}</a> </b>


            {% for experience in get_active_product %}

                    <div class="row experience_spacing">
                        <div class="col-md-8 col-lg-8">
                            <a href="{{ path('product', {'id':  experience.product_id  , 'title': experience.title}) }}" class="service ">
                                <img src="/uploads/products/{{experience.product_id}}-16x7.jpg" class=" product_activ_img_{{ experience.id }}" style="width: 100%; height: 350px;">
                            </a>
                        </div>
                        <div class="col-md-4 col-lg-4">
                            <span class="custom_font experience_title">{{experience.title}}</span>
                            <p class="custom_font experience_desc">{{ experience.short_description }}</p>
{#                                                        <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i>#}
{#                                                        <p class="custom_font experience_comment">(1203 Comentários)</p>#}
                            <button class="custom-button experience_button" onclick="window.location.href='{{ path('product', {'id':  experience.product_id  , 'title': experience.title}) }}">{% trans %}know_more{% endtrans %}</button>
                        </div>
                    </div>

            {% endfor %}





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

    <div class="contact_anfitriao" style="height: auto;background-color: #2D2D2D;color: #fff;margin-top: -49px;text-align: center;font-size: 25px;padding: 30px; margin-bottom: -64px;">
        <div class="title_contact"><b>Dúvidas? Entre em contacto comigo</b></div>
        <div class="row justify-content-center">
            <div class="col-md-3"><i class="fas fa-phone-square-alt icon_size_anfitriao"></i> <span style="vertical-align: text-bottom;">(+351) {{user_info.phone}}</span></div>
            <div class="col-md-4"><i class="fas fa-envelope icon_size_anfitriao"></i> <span style="vertical-align: text-bottom;">{{user_info.email}}</span></div>
        </div>
    </div>

<script>
    $("img").error(function () {
        $(this).unbind("error").attr("src", "/assets/tbudddy/images/no-image.png");
    });

</script>
{#    <div class="site-section site-section-sm bg-light">#}
{#        <div class="container">#}
{#            <div class="row">#}
{#                <div class="col-md-12">#}
{#                    <div class="comment"><b class="custom_font" style="color: #333333;font-size: 28px;">20 Comentários</b></div>#}
{#                    <hr>#}
{#                    <div class="row">#}
{#                        <div class="col-md-6 float-left"><div class="comment_title"><b class="custom_font" style="color: #333333">Simplesmente perfeito</b></div></div>#}
{#                        <div class="col-md-6  float-right order-first order-md-last"><div class="comment_time"><b class="custom_font">Enviado em 19/12/2019</b></div></div>#}
{#                    </div>#}
{#                    <div class="row">#}
{#                        <div class="col-md-3 float-left"><div class="comment_stars"><b class="custom_font" style="color: #333333">#}
{#                                    <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i>#}
{#                                </b></div></div>#}
{#                    </div>#}
{#                    <div class="row">#}
{#                        <div class="col-md-12 float-left"><div class="comment_title"><b class="custom_font" style="color: #333333; font-weight: 500;">#}
{#                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas libero vel risus lacinia, at maximus felis venenatis. Phasellus vel semper velit, at dapibus lectus. Donec eget lobortis turpis. Aenean sem enim, tincidunt sed sollicitudin sed, ultrices ac augue. Fusce ultrices eros orci, vitae consequat diam malesuada non. Etiam lacinia sed mauris eget faucibus. Aliquam ultricies quam sed aliquet vulputate. Donec at congue elit. Quisque ultrices purus orci. Phasellus consequat turpis pharetra, consequat velit ut, fringilla enim. Curabitur mauris diam, laoreet vitae velit vitae, bibendum vestibulum ex.#}
{#                                </b>#}
{#                            </div></div>#}
{#                    </div>#}
{#                    <div class="row">#}
{#                        <div class="col-md-3 float-left"><div class="comment_title"><b class="custom_font" style="color: #333333;font-size: 14px;">Publicado por Ruan</b></div></div>#}
{#                    </div>#}

{#                    <hr>#}
{#                    <div class="row">#}
{#                        <div class="col-md-6 float-left"><div class="comment_title"><b class="custom_font" style="color: #333333">Fui com a familia</b></div></div>#}
{#                        <div class="col-md-6  float-right order-first order-md-last"><div class="comment_time"><b class="custom_font">Enviado em 06/11/2019</b></div></div>#}
{#                    </div>#}
{#                    <div class="row">#}
{#                        <div class="col-md-3 float-left"><div class="comment_stars"><b class="custom_font" style="color: #333333">#}
{#                                    <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star-half-alt star_color"></i>#}
{#                                </b></div></div>#}
{#                    </div>#}
{#                    <div class="row">#}
{#                        <div class="col-md-12 float-left"><div class="comment_title"><b class="custom_font" style="color: #333333; font-weight: 500;">#}
{#                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas libero vel risus lacinia, at maximus felis venenatis. Phasellus vel semper velit, at dapibus lectus. Donec eget lobortis turpis. Aenean sem enim, tincidunt sed sollicitudin sed, ultrices ac augue. Fusce ultrices eros orci, vitae consequat diam malesuada non. Etiam lacinia sed mauris eget faucibus. Aliquam ultricies quam sed aliquet vulputate. Donec at congue elit. Quisque ultrices purus orci. Phasellus consequat turpis pharetra, consequat velit ut, fringilla enim. Curabitur mauris diam, laoreet vitae velit vitae, bibendum vestibulum ex.#}
{#                                </b>#}
{#                            </div></div>#}
{#                    </div>#}
{#                    <div class="row">#}
{#                        <div class="col-md-3 float-left"><div class="comment_title"><b class="custom_font" style="color: #333333;font-size: 14px;">Publicado por Joana</b></div></div>#}
{#                    </div>#}
{#                    <div class="row">#}
{#                        <button class="comment_button">carregar mais comentários</button>#}
{#                    </div>#}

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