{% block lightbox %}
{% if client.facebook %}
    <!DOCTYPE html>
    <html>
        <head>
            <title>{{ data.portfolio.title }}</title>
            <meta property="og:url" content="{{ root_url_scheme() }}://{{ server_name() }}/get_port/{{ data.portfolio.id }}.html?lang={{ siteLang }}"/>
            <meta property="og:type" content="website"/>
            <meta property="og:title" content="{{ data.portfolio.title }}"/>
            <meta property="og:description" content="{{ data.portfolio.title }}"/>
            {% if data.slides|length %}
                <meta property="og:image" content="{{ root_url_scheme() }}://{{ server_name() }}/{{ data.slides[0].src }}"/>
            {% endif %}
        </head>
        <body>
{% endif %}

    <script>
        (function($){
            $('#lightbox_slider').carousel();
        })(jQuery);
    </script>

    <div id="lightbox_slider" class="carousel slide{{ data.slides|length < 2 ? ' hide-arrows' }}">
        <div class="carousel-inner">
            {% for slide in data.slides %}
                <div class="item{{ loop.first ? ' active' }}">
                    <img src="/{{ slide.src }}" alt="{{ data.portfolio.title }}"/>
                </div>
            {% endfor %}
        </div>
        <a class="left carousel-control" href="#lightbox_slider" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#lightbox_slider" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>

    {% set has_content =
        data.portfolio.title_text1 or data.portfolio.title_text2 or data.portfolio.title_text3
        or (data.portfolio.text1 and data.portfolio.text1 != '<br>')
        or (data.portfolio.text2 and data.portfolio.text2 != '<br>')
        or (data.portfolio.text3 and data.portfolio.text3 != '<br>') %}

    {% if has_content %}
    <section id="lightbox-port-{{ data.portfolio.id }}">
        <article class="col-md-4 col-sm-6 col-xs-12">
            <h1>{{ data.portfolio.title_text1 }}</h1>
            <h2>{{ data.portfolio.title_text1 }}</h2>
            <p>{{ data.portfolio.text1|raw }}</p>
        </article>
        <article class="col-md-4 col-sm-6 col-xs-12">
            <h1>{{ data.portfolio.title_text2 }}</h1>
            <h2>{{ data.portfolio.title_text2 }}</h2>
            <p>{{ data.portfolio.text2|raw }}</p>
        </article>
        <article class="col-md-4 col-sm-6 col-xs-12">
            <h1>{{ data.portfolio.title_text3 }}</h1>
            <h2>{{ data.portfolio.title_text3 }}</h2>
            <p>{{ data.portfolio.text3|raw }}</p>
        </article>
        <div class="clearfix"></div>
    </section>
    {% endif %}

{% if client.facebook %}
        </body>
    </html>
{% endif %}
{% endblock %}