{% extends 'front.html.twig' %}
{% block title %} {{ 'page.his.title'|trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="{{asset('assets/css/historique.css')}}">

{% endblock %}
{% block body %}
    <!-- breadcrumb area start -->
    <section class="breadcrumb-area" id="home">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-area-content">
                        <h2>{{ 'page.his.title'|trans }} </h2>
                        <ul>
                            <li><a href="{{ path('front_home') }}">{{ 'title.Ac' |trans }}</a></li>
                            <li class="active"><a href="#">{{ 'page.his.title'|trans }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->
    <!-- about section start -->


    <section id="timeLin">
    <div class="container">
    <div class="container">
    <br><br><br><br><br>
    <div class="timeline flex-container">
    {% if historiques !=  null %}
        {% set i = 0 %}

        {% for historique in historiques %}
            <div class="timeline-item flex-items-default {% if i == 0 %} selected {% endif %}">
                <div class="timeline-content text-left block-img-{{ i }}">
                    {% if app.request.locale == 'ar' %}
                        <h6 class="widget-rtl"><strong>{{ historique.nom }}</strong></h6>
                        <p class="widget-rtl" style="font-size: 14px;">{{ historique.fonction }}</p>
                        <p class="widget-rtl" style="font-size: 13px; color: #1a468d"><strong>{{ historique.startDate|date('Y') }}- {{ historique.endDate|date('Y') }}</strong></p>
                    {% else %}
                        <h6><strong>{{ historique.nom }}</strong></h6>
                        <p style="font-size: 14px;">{{ historique.fonction }}</p>
                        <p style="font-size: 13px; color: #1a468d"><strong>{{ historique.startDate|date('Y') }}- {{ historique.endDate|date('Y') }}</strong></p>

                    {% endif %}

                    <div class="text-center">
                        <img src="{{ asset('uploads/historique/')~ historique.path }}" alt="{{ historique.nom }}" class="img-historique">
                    </div>
                    {#<i class="material-icons">important_devices</i>#}
                </div>
            </div>
            {% set i = i+1 %}
        {% endfor %}

        {#<div class="timeline-item flex-items-default selected">
            <div class="timeline-content text-left animated bounceIn">
                <h2>Explore</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
                <div class="hexagon"></div>
                <i class="material-icons">explore</i>
            </div>
        </div>
        <div class="timeline-item flex-items-default">
            <div class="timeline-content text-left">
                <h2>Plan</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
                <div class="hexagon"></div>
                <i class="material-icons">border_style</i>
            </div>
        </div>
        <div class="timeline-item flex-items-default">
            <div class="timeline-content text-left">
                <h2>Production</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
                <div class="hexagon"></div>
                <i class="material-icons">format_shapes</i>
            </div>
        </div>
        <div class="timeline-item flex-items-default">
            <div class="timeline-content text-left">
                <h2>Review</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
                <div class="hexagon"></div>
                <i class="material-icons">rate_review</i>
            </div>
        </div>#}

        <div class="dropdown animated bounceIn" style="left: -37px;">
            <div class="inner">
                <div class="arrow-down"></div>
            </div>
        </div>

        </div>
        </div>
        </div>
    {% else %}


        </section>
        <div class="container">

            <div class="">

            </div>
        </div>

    {% endif %}


















    <!-- about section end -->


{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script id="rendered-js">
        $('.block-img-0').addClass('animated');
        // Globals
        var prefixes = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        var $container = $('.container');
        var $timeline = $('.timeline');
        var $timelineItem = $('.timeline-item');
        var $timelineContent = $('.timeline-content');
        var $dropDown = $('.dropdown');
        var $hasHovered = true;
        var hideOnExit = false;

        // mouseenter event handler
        $timelineItem.on('mouseenter', function (e) {

            var isSelected = $(this).hasClass('selected');

            if (isSelected === false) {

                var leftPos = $(this).position().left,
                    left = leftPos - 37,
                    $that = $(this);

                $timelineItem.removeClass('selected');
                $(this).addClass('selected');

                if ($hasHovered === false) {
                    // Show Bounce

                    // Set Flag
                    $hasHovered = true;

                    // Show DD Bounce
                    showBounce(left);

                    // Show DD content Bounce
                    showContentBounce($that);

                } else {
                    // Follow

                    // Change pos of DD to follow
                    dropDownFollow(left);

                    // Hide previous dd content
                    $timelineContent.removeClass('animated fadeIn bounceIn');

                    // Show hovered dd content
                    $that.find($timelineContent).addClass('animated fadeIn');
                }
            }

        });

        // mouseleave event handler
        $timeline.on('mouseleave', function (e) {

            if (hideOnExit) {

                //   Set Flag
                $hasHovered = false;

                // Hide DD
                hideDropDown();

                // Hide DD content
                $timelineContent.removeClass('animated fadeIn');

            }

        });

        // Animation end event listener
        $dropDown.on(prefixes, function (e) {

            if (e.originalEvent.animationName === 'fadeOut') {
                $dropDown.removeAttr('style');
            }

        });

        /**
         * Private functions that do showing/hiding/animating
         */
        function showContentBounce(that) {
            $hasBounced = true;
            that.find('.timeline-content').addClass('animated bounceIn');
        }

        function showBounce(pos) {
            $dropDown.css('left', pos + 'px').removeClass('fadeOut').addClass('animated bounceIn');
        }

        function dropDownFollow(pos) {
            $dropDown.css('left', pos + 'px');
        }

        function hideDropDown() {
            $timelineItem.removeClass('selected');
            $dropDown.removeClass('bounceIn').addClass('fadeOut');
        }

        //# sourceURL=pen.js
    </script>
{% endblock %}