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

{% block title %}{{ event.title }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('lightgallery') }}
    {{ encore_entry_link_tags('sliders') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('lightgallery') }}
    {{ encore_entry_script_tags('sliders_advert') }}
{% endblock %}

{% block body %}
    {% import '/include/breadcrumb.html.twig' as breadcrumb %}

    {{ breadcrumb.render([
        {'url': url('home'), 'text': 'Promotip'},
        {'url': url(channel.getRoute|replace({'_category' : ''})), 'text': channel.getName},
        {'url': url(channel.getRoute, {category : category.getTitleSlug}), 'text': category.title},
        {'text': event.title},
    ]) }}

    {#  <div class="container-fluid bg-category">
    </div>#}

    <div class="container" style="margin-top:50px">
        <div class="row mb-5 pb-5">
            <div class="col-12 col-sm-5 d-block d-xs-none" id="gallery">
                <div class="card border-0">
                    {% if event.photos|first.imageName is defined %}
                        <a href="{{ asset('/media/events/' ~ event.photos|first.imageName) | imagine_filter('event_full') }}"
                           class="photo">
                            <img class="img-fluid"
                                 src="{{ asset('/media/events/' ~ event.photos|first.imageName) | imagine_filter('event_fluid') }}"
                                 alt="{{ event.photos|first.imageAlt }}">
                        </a>
                    {% else %}
                        <img class="img-fluid" src="/assets/images/no-image.png" alt=""/>
                    {% endif %}
                </div>
                <div class="thumbs mt-2">
                    {% for photo in event.photos[1:] %}
                        <a href="{{ asset('/media/events/' ~ photo.imageName) | imagine_filter('event_full') }}"
                           class="photo">
                            <img class="img-fluid"
                                 src="{{ asset('/media/events/' ~ photo.imageName) | imagine_filter('event_small_thumb') }}"
                                 alt="{{ photo.imageAlt }}">
                        </a>
                    {% endfor %}
                </div>
            </div>
            <div class="col-12 col-sm-7 pt-0 mt-0 border-left">
                <h4 class="xs-fw-400 text-auro">{{ event.title }}</h4>
                <div class="col-12 col-sm-5 d-block d-sm-none" id="gallery_slider">
                    <div class="card border-0">
                        {% if event.photos|first.imageName is defined %}
                            <a href="{{ asset('/media/events/' ~ event.photos|first.imageName) | imagine_filter('event_full') }}"
                            class="photo">
                                <img class="img-fluid xs-box-border-radius"
                                    src="{{ asset('/media/events/' ~ event.photos|first.imageName) | imagine_filter('event_fluid') }}"
                                    alt="{{ event.photos|first.imageAlt }}">
                            </a>
                        {% else %}
                            <img class="img-fluid xs-box-border-radius" src="/assets/images/no-image.png" alt=""/>
                        {% endif %}
                    </div>
                    <div class="thumbs mt-2">
                        <div class="splide splide_active_advert my-5">
                            <div class="splide__track">
                                <ul class="splide__list">
                                    {% for photo in event.photos[1:] %}
                                        <li class="splide__slide">
                                            <a href="{{ asset('/media/events/' ~ photo.imageName) | imagine_filter('event_full') }}"
                                            class="photo">
                                                <img class="img-fluid xs-box-border-radius"
                                                    src="{{ asset('/media/events/' ~ photo.imageName) | imagine_filter('event_small_thumb') }}"
                                                    alt="{{ photo.imageAlt }}">
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card border-left-0 border-right-0 border-bottom-0 pt-3 mt-3">{{ event.description|raw }} </div>
                {% if event.price is not empty %}
                    <div class="text-right font-weight-bold font-italic" style="color: #800080;">Prijs {{ event.price|replace({".": ","}) }}€</div>
                {% endif %}
            </div>
        </div>
    </div>

    <section class="container-fluid bg-openingshours xs-background-none" style="margin-top:150px">
        <section class="container" style="margin-top: 35px;">
            <div class="row">
                <div class="col-12 col-lg-4 py-4 bg-add xs-box-border-radius xs-mb-1-half xs-gradient-box-shadow advert-cc">
                    <div class="row">
                        <div class="col-6 col-sm-12">
                            <i class="fa fa-map-marker mr-1"></i> <b>Waar</b>
                        </div>
                        <div class="col-6 col-sm-12">
                            {% if event.address != null %}
                                {{ event.address }} {{ event.housenumber }} {{ event.box }}<br>
                            {% else %}
                                {{ event.company.address }} {{ event.company.housenumber }} {{ event.company.box }}<br>
                            {% endif %}
                            {{ geoPlace[0].postcode }} {{ geoPlace[0].locality }}
                        </div>
                    </div>
                </div>

                {% if (event.company.phonenumber is defined and event.company.phonenumber is not null) %}
                    <div class="col-12 col-lg-4 py-4 bg-pho xs-box-border-radius xs-mb-1-half xs-gradient-box-shadow advert-cc">
                        <div class="row">
                            <div class="col-6 col-sm-12">
                                <i class="fa fa-phone mr-1"></i> <b>Contact</b>
                            </div>
                            <div class="col-6 col-sm-12">
                                <a href="tel:{{ event.company.phonenumber|phone_number_format('E164') }}" class="text-dark">
                                    {{ event.company.phonenumber|phone_number_format('NATIONAL') }}
                                </a>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <div class="col-12 col-lg-4 py-4 bg-web2 xs-box-border-radius xs-mb-1-half xs-gradient-box-shadow advert-cc">
                    <div class="row">
                        <div class="col-6 col-sm-12">
                            <i class="fa fa-calendar"></i> <b>Wanneer</b>
                        </div>
                        <div class="col-6 col-sm-12">
                            {% if expired_advert(event) %}
                                Afgelopen
                            {% else %}
                                {{ event.eventStartDate|date('d/m/Y') }} {% trans %} till {% endtrans %} {{ event.eventEndDate|date('d/m/Y') }}
                                <br>
                                {{ event.startHour|date('H:i') }} - {{ event.endHour|date('H:i') }}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {# </section> #}

        <div class="row">
            <div class="col-md-4 offset-md-4 text-white text-center text-auro text-uppercase fw-800"
                 style="height:400px; top:50px">
                <p class="info-organization"><small>{% trans %}Information about the organization{% endtrans %}</small></p>
                <div class="hours">
                    <h6 class="text-beige"
                        style="font-size: 85%; font-weight: normal; padding: 20px 0 0 0; margin: 0">
                        <a href="{{ url('company_company', {'province' : province.nameDirify, 'city' : city.localityDirify, 'company' : event.company.companynameSlug }) }}" target="_blank"
                           rel="noopener nofollow" class="event-company-name text-auro" style="color:#ffdac5">{{ event.company.companyname }}</a><br><br class="d-block d-sm-none"><br class="d-block d-sm-none">
                        <a href="{{ event.company.website }}" target="_blank"
                           rel="noopener nofollow" class="event-company-website" style="color:#ffdac5">Bezoek onze website</a><br>
                    </h6>
                </div>
                <div class="col-md-4 offset-md-4 text-white text-center text-uppercase"
                     style="height:400px; top:50px">
                    <p>Deel deze advertentie</p>
                    <div class="sharethis-inline-share-buttons"></div>
                </div>
            </div>
        </div>


            </div>
            {#  <div class="col-6">
                    <div class="row" style="margin-top: 140px">
                        <div class="col-4 align-items-center text-center text-white">
                            <div class="hours">
                                <h6 class="text-beige"
                                    style="font-size: 85%; font-weight: normal; padding: 20px 0 0 0; margin: 0">
                                   {{ event.company.companyname }}<br>
                                    <a href="{{ event.company.website }}" style="color:#ffdac5">{{ event.company.website }}</a><br>
                                </h6>
                                <strong class="text-uppercase"></strong>
                            </div>
                        </div>
                    </div>
                </div> #}
        </div>
    </section>

{% endblock %}