{% extends 'base.html' %}
{% load static %}
{% block content %}
    <section>
        <h1>Personnes</h1>
        <div class="personnal-info">
            <img id="pp" src="{% static "images/pesquet.jpg" %}">
            <div class="infos">
                <p>Thomas Pesquet</p>
                <p>43 ans</p>
            </div>
        </div>
        <p class="biographie">Insérer une biographie, Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur ultrices, massa at tincidunt auctor, dolor lorem accumsan augue, a blandit
             urna diam in leo. Vestibulum in commodo lectus. Fusce congue lacinia pharetra.
             Suspendisse imperdiet vehicula odio, eu varius ante accumsan ullamcorper.
            Donec sodales urna felis, eu iaculis lectus facilisis vel. Sed facilisis, neque eget
             varius interdum, velit est pellentesque tellus, id auctor urna ex id sapien.</p>

        <div class="timeline-container">
            <div class="timeline">
                <div class="stroke"></div>
                <div class="point">
                    <a class="active" href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
                <div class="point">
                    <a href="#">a</a>
                    <span>20/20/2020</span>
                </div>
            </div>
            <div class="point-content">
                <p class="titre">Sauvetage en côte d'Ivoire</p>
                <p class="date">Le 20/20/2020</p>
                <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur ultrices, massa at tincidunt auctor, dolor</p>
            </div>
        </div>

    </section>
    <script>
        let count = 0;
        let pp = document.querySelector('#pp');
        pp.addEventListener('click', function(){
           count++;
           rickroll(count);
        });

        function rickroll(count){
            if(count > 10){
                window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
            }
        }
    </script>
    {% include 'quicksearch.html' %}
{% endblock %}