<body class="grid-container">
    <div class="header">
        <h1>{{ config.theme.main_title }}</h1>
    </div>
    <div class="basic-informations">
        {%- if config.theme.profile_picture %}
        <div class="profile-picture-container">
            <img src="{{ config.theme.profile_picture }}" alt="Profile picture link seems to be broken or unreachable." class="profile-picture">
        </div>
        {%- endif %}
        <br>
        <h2>{{ config.theme.basic_informations_section_title }}</h2>
        <p>{{ config.theme.firstname }} {{ config.theme.lastname }}</p>
        <p>{{ config.theme.mail }}</p>
        <p>{{ config.theme.location }}</p>
        <br>
        <h2>{{ config.theme.skills_section_title }}</h2>
        <ul>
            {%- for skill in config.theme.skills %}
            <li>
                <p>{{ skill }}</p>
            </li>
            {%- endfor %}
        </ul>
        <br>
        <h2>{{ config.theme.personnal_links_section_title }}</h2>
        {%- if config.theme.personnal_links.github %}
        <a href="{{ config.theme.personnal_links.github }}"><i class="fa-brands fa-github fa-xl"></i></a>
        {%- endif %}

        {%- if config.theme.personnal_links.gitlab %}
        <a href="{{ config.theme.personnal_links.gitlab }}"><i class="fa-brands fa-gitlab fa-xl"></i></a>
        {%- endif %}

        {%- if config.theme.personnal_links.linkedin %}
        <a href="{{ config.theme.personnal_links.linkedin }}"><i class="fa-brands fa-linkedin fa-xl"></i></a>
        {%- endif %}

        {%- if config.theme.personnal_links.facebook %}
        <a href="{{ config.theme.personnal_links.facebook }}"><i class="fa-brands fa-facebook fa-xl"></i></a>
        {%- endif %}

        {%- if config.theme.personnal_links.youtube %}
        <a href="{{ config.theme.personnal_links.youtube }}"><i class="fa-brands fa-youtube fa-xl"></i></a>
        {%- endif %}

        {%- if config.theme.personnal_links.Instagram %}
        <a href="{{ config.theme.personnal_links.Instagram }}"><i class="fa-brands fa-instagram fa-xl"></i></a>
        {%- endif %}

        {%- if config.theme.personnal_links.tiktok %}
        <a href="{{ config.theme.personnal_links.tiktok }}"><i class="fa-brands fa-tiktok fa-xl"></i></a>
        {%- endif %}
    </div>
    <div class="main-informations">
        <h2>{{ config.theme.experiences_section_title }}</h2>
        <ul>
            {%- for experience in config.theme.experiences %}
            <li>
                <b>{{ experience.title }}</b>
                {%- if experience.start_date is defined %}
                <p class="experience-dates">From {{ experience.start_date }} to {{ experience.end_date | default("now") }}</p>
                {%- endif %}
                <p>{{ experience.description }}</p>
            </li>
            {%- endfor %}
        </ul>
        <br>
        <h2>{{ config.theme.education_section_title }}</h2>
        <ul>
            {%- for education in config.theme.educations %}
            <li>
                <b>{{ education.title }}</b>
                {%- if education.start_date is defined %}
                <p class="education-dates">From {{ education.start_date }} to {{ education.end_date | default("now") }}</p>
                {%- endif %}
                <p>{{ education.description }}</p>
            </li>
            {%- endfor %}
        </ul>
    </div>
    <div class="hobbies">
        <h2>{{ config.theme.hobbies_section_title }}</h2>
        <ul>
            {%- for hobby in config.theme.hobbies %}
            <li>
                <p>{{ hobby }}</p>
            </li>
            {%- endfor %}
        </ul>
    </div>
    <div class="certifications">
        <h2>{{ config.theme.certifications_section_title }}</h2>
        <ul>
            {%- for certification in config.theme.certifications %}
            <li>
                <p>{{ certification }}</p>
            </li>
            {%- endfor %}
        </ul>
    </div>
    <div class="footer">
        Made with <a href="">MkDocs</a> using the <a href="https://github.com/Paul-Riviere/mkdocs-curriculum-vitae">Curriculum-vitae</a> theme.
    </div>
    {% include "scripts.html" %}
</body>