{% extends 'front/layout.html.twig' %}

{% block opengraph %}
    <meta property="og:url" content="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params'))) }}" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{{ project.name }}" />
    <meta property="og:description" content="{{ project.description | raw }}" />

    {% if project.photos %}
        {% for photo in project.photos %}
            {% if loop.first %}
                <meta property="og:image" content="{{ absolute_url(asset('cozar17/files/project/' ~ photo.project.id ~ '/' ~ photo.name)) }}" />
            {% endif %}
        {% endfor %}
    {% else %}
        <meta property="og:image" content="{{ absolute_url(asset('cozar17/images/logo.png')) }}" />
    {% endif %}

{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/css/photoswipe.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/default-skin/default-skin.css') }}">
{% endblock %}

{% block content %}
    <section id="project-single">
        {% include 'front/components/page-header.html.twig' with {'title': project.name} %}

        <div class="page-content container">
            <div class="row">

                <div class="col-xs-12">
                    <div class="breadcrumbs">
                        <span class="item">
                            <a href="{{ path('front_project_gallery') }}" title="Obras realizadas">Obras realizadas</a>
                        </span>
                        <span class="separator"> / </span>
                        <span class="item current">
                            {{ project.name }}
                        </span>
                    </div>
                </div>

            </div>
            <div class="row">

                <div class="col-md-8">
                    <div class="gallery" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-uid="1">
                    {% for photo in project.photos %}
                        {% if loop.first %}
                        <figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
                            <a href="{{ asset('assets/files/project/' ~ photo.project.id ~ '/' ~ photo.name) }}" itemprop="contentUrl" data-size="{{ photo.width }}x{{ photo.height }}">
                                <img class="thumb" src="{{ asset('assets/files/project/' ~ photo.project.id ~ '/' ~ photo.name) }}" itemprop="thumbnail" alt="{{ project.name }} {{ loop.index }}">
                            </a>
                        </figure>
                        {% else %}
                        <figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
                            <a href="{{ asset('assets/files/project/' ~ photo.project.id ~ '/' ~ photo.name) }}" itemprop="contentUrl" data-size="{{ photo.width }}x{{ photo.height }}"></a>
                        </figure>
                        {% endif %}
                    {% endfor %}
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="project-info">
                        <h4 class="underline-title">{{ project.name }}</h4>
                        <div class="hline"></div>
                        <div class="description">
                            {{ project.description | raw }}
                        </div>
                        <div class="location">
                            <span class="title">
                                <i class="fa fa-map-marker" aria-hidden="true"></i>
                                Localización:
                            </span>
                            <span class="value">{{ project.location }}</span>
                        </div>
                        <div class="date">
                            <span class="title">
                                <i class="fa fa-calendar" aria-hidden="true"></i>
                                Fecha:
                            </span>
                            <span class="value">{{ project.dateStamp | date("d/m/y") }}</span>
                        </div>
                        <div class="before-next">
                            <a href="{% if nextProject is not null %}{{ path('front_project_single', {'slug': nextProject.slug}) }}{% endif %}"
                               class="btn btn-default{% if nextProject is null %} not-active{% endif %}">
                                « Anterior
                            </a>
                            <a href="{% if previousProject is not null %}{{ path('front_project_single', {'slug': previousProject.slug}) }}{% endif %}"
                               class="btn btn-default{% if previousProject is null %} not-active{% endif %}">
                                Siguiente »
                            </a>

                        </div>
                        <div class="fb-share-button"
                             data-href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params'))) }}"
                             data-layout="button"
                             data-size="large"
                             data-mobile-iframe="true">
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="underline-title related-items">Otras obras</h4>
            <div class="hline"></div>

            <div class="row footer-gallery">
                {% for randomProject in randomProjects %}
                    {% for randomPhoto in randomProject.photos %}
                        {% if loop.first %}
                            <div class="col-sm-6 col-md-3">
                                <div class="item-wrapper">
                                    <a class="gallery-item" href="{{ path('front_project_single', {'slug': randomProject.slug}) }}">
                                        <div class="item-content" style="background-image: url({{ asset('assets/files/project/' ~ randomProject.id ~ '/' ~ randomPhoto.name) }})">
                                            <div class="overlay">
                                                <div class="content">
                                                    <h2 class="name">{{ randomProject.name }}</h2>
                                                    <p class="location">{{ randomProject.location }}</p>
                                                    <p class="date">{{ randomProject.dateStamp | date("m/d/y") }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </section>

    {% include 'front/components/gallery.html.twig' %}

{% endblock %}

{% block facebookSdk %}
    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId      : '781663065368596',
                xfbml      : true,
                version    : 'v2.11'
            });
            FB.AppEvents.logPageView();
        };

        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/es_ES/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/photoswipe.min.js') }}"></script>
    <script src="{{ asset('assets/js/photoswipe-ui-default.min.js') }}"></script>
    <script src="{{ asset('assets/js/photoswipe-multi.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {

        });
    </script>
{% endblock %}