{% extends 'front.html.twig' %}
{% block title %} Historique {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block css %}
    <meta charset="UTF-8"><meta name="robots" content="noindex">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <style>
        body {
            /*background-color: #f5efed;*/
        }

        section#timeLin {
            margin-top: 150px;
            background-color: white;
        }
        section#timeLin h1 {
            margin-top: 50px;
            margin-bottom: 350px;
            color: white;
        }

        p {
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 12px;
        }

        h6{
            font-size: 16px;
            color: #1a468d ;
        }
        /*h2 {
            font-family: 'Roboto', sans-serif;
        }*/

        .timeline {
            width: 100%;
            position: relative;
            perspective: 5000px;
        }
        .timeline:before {
            position: absolute;
            content: "";
            width: 100%;
            height: 15px;
            background-color: #d5dfe5;
            border-radius: 15px;
            top: 76px;
        }
        .timeline .timeline-item {
            text-align: center;
            position: relative;
            z-index: 1;
            cursor: pointer;
        }
        .timeline .timeline-item:hover:after {
            transform: scale(1.5, 1.5);
        }
        .timeline .timeline-item.selected:after {
            background-color: #1c77c3;
            border: 5px solid #56cbf9;
            transform: scale(1.5, 1.5);
        }
        .timeline .timeline-item:after {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 69px;
            left: 50%;
            margin-left: -15px;
            background-color: #f5efed;
            border: 5px solid #d5dfe5;
            content: "";
            border-radius: 50%;
            transition: transform .5s ease;
        }
        .timeline .timeline-item .timeline-content {
            position: absolute;
            top: -209px;
            display: none;
            width: 220px;
            left: 3px;
            cursor: auto;
        }

/*
        .timeline .timeline-item .timeline-content:nth-child(0) {
            display: block;
        }
*/
        .timeline .timeline-item .timeline-content.fadeIn {
            animation-delay: .2s;
        }
        .timeline .timeline-item .timeline-content.animated {
            display: block;
        }

        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: flex-start;
            align-items: flex-start;
        }

        .flex-items-default {
           /* width: 224px;*/
            width: 16%;
            height: 150px;
        }

        .dropdown {
            width: 300px;
            height: 280px;
            background: white;
            box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            position: absolute;
            top: -220px;
            animation-duration: .2s;
            transition: left .3s ease;
        }
        .dropdown .inner {
            position: relative;
            width: 100%;
            height: 200px;
        }
        .dropdown .inner .arrow-down {
            position: absolute;
            bottom: -19px;
            left: 50%;
            margin-left: -20px;
        }

        .arrow-down {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid white;
        }

        .animated {
            display: block;
        }

        .material-icons {
            position: absolute;
            top: 189px;
            left: 160px;
            width: 100%;
            color: white;
            font-size: 33px;
        }

        .hexagon {
            position: relative;
            width: 75px;
            height: 43.30px;
            background-color: #1c77c3;
            margin: 21.65px 0;
            left: 50%;
            margin-left: -37px;
            top: 25px;
        }

        .hexagon:before,
        .hexagon:after {
            content: "";
            position: absolute;
            width: 0;
            border-left: 37.5px solid transparent;
            border-right: 37.5px solid transparent;
        }

        .hexagon:before {
            bottom: 100%;
            border-bottom: 21.65px solid #1c77c3;
        }

        .hexagon:after {
            top: 100%;
            width: 0;
            border-top: 21.65px solid #1c77c3;
        }
        img.img-historique {
            height: 150px;
            width: 100%;
            object-fit: cover;
        }
        a:hover {
            text-decoration: none;
        }
    </style>
{% 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>Historique </h2>
                        <ul>
                            <li><a href="{{ path('front_home')}}">Accueil</a></li>
                            <li class="active"><a href="#">Historique</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">
                            {% 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 }}">
                                        <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>
                                        <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>
            </section>

















    <!-- 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 %}