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

{% block title %}{{ portfolio.title }}{% endblock %}

{% block body %}
    <div id="ajax-page" class="ajax-page-content">
        <div class="ajax-page-wrapper">
            <div class="ajax-page-nav">
                <div class="nav-item ajax-page-prev-next">
                    {% if getPrevious is not null %}
                        <a class="ajax-page-load" href="{{ path('app_portfolio_details', { id: getPrevious }) }}"><i class="lnr lnr-chevron-left"></i></a>
                    {% endif %}
                    {% if getNext is not null %}
                        <a class="ajax-page-load" href="{{ path('app_portfolio_details', { id: getNext }) }}"><i class="lnr lnr-chevron-right"></i></a>
                    {% endif %}
                </div>
                <div class="nav-item ajax-page-close-button">
                    <a id="ajax-page-close-button" href="{{ path('app_portfolio') }}"><i class="lnr lnr-cross"></i></a>
                </div>
            </div>

            <div class="ajax-page-title">
                <h1>{{ portfolio.title }}</h1>
            </div>

            <div class="row">
                <div class="col-sm-8 col-md-8 portfolio-block">
                    <div class="owl-carousel portfolio-page-carousel">
                        <div class="item">
                            <img src="../assets/img/portfolio/{{ portfolio.image }}" alt="" />
                        </div>
                    </div>

                    {% if portfolio.description %}
                        <div class="portfolio-page-video">
                            <div class="block-title">
                                <h3>Description</h3>
                            </div>

                            <p class="text-justify">{{ portfolio.description|raw }}</p>
                        </div>
                    {% endif %}

                    <script type="text/javascript">
                        jQuery(document).ready(function($){
                            $('.portfolio-page-carousel').imagesLoaded(function(){
                                $('.portfolio-page-carousel').owlCarousel({
                                    smartSpeed:1200,
                                    items: 1,
                                    loop: true,
                                    dots: true,
                                    nav: true,
                                    navText: false,
                                    margin: 10,
                                    autoHeight:true
                                });
                            });
                        });
                    </script>
                </div>

                <div class="col-sm-4 col-md-4 portfolio-block">
                    <!-- Project Description -->
                    <div class="project-description">
                        <div class="block-title">
                            <h3>Détails</h3>
                        </div>
                        <ul class="project-general-info">
                            <li><p><i class="fa fa-user"></i> {{ portfolio.client }}</p></li>
                            {% if portfolio.url %}
                                <li><p><i class="fa fa-globe"></i> <a href="{{ portfolio.url }}" target="_blank">{{ portfolio.url }}</a></p></li>
                            {% endif %}
                            <li><p><i class="fa fa-calendar"></i> {{ portfolio.startDate|format_datetime(pattern="MMM Y", locale='fr') }}</p></li>
                        </ul>

                        <p class="text-justify">{{ portfolio.overview|raw }}</p>
                        <!-- /Project Description -->

                        <!-- Technology -->
                        <div class="tags-block">
                            <div class="block-title">
                                <h3>Technologie(s)</h3>
                            </div>
                            <ul class="tags">
                                {% for techno in portfolio.technologies %}
                                    <li><a>{{ techno.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                        <!-- /Technology -->
                    </div>
                    <!-- Project Description -->
                </div>
            </div>
        </div>
    </div>
{% endblock %}