<!DOCTYPE html>
<html lang="en">
    {% include "head.html" %}
    <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>
            <section class="basic-informations-section">
                <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>
            </section>
            <br>
            <section class="skills-section">
                <h2>{{ config.theme.skills_section_title }}</h2>
                <ul>
                    {%- for skill in config.theme.skills %}
                    <li>
                        <p>{{ skill }}</p>
                    </li>
                    {%- endfor %}
                </ul>
            </section>
            <br>
            <section class="personnal-links-section">
                <h2>{{ config.theme.personnal_links_section_title }}</h2>
                <div class="all-icons-container">
                    {%- if config.theme.personnal_links.github %}
                    <a href="{{ config.theme.personnal_links.github }}">
                        <span class="icon-container github-icon">
                            <i class="fa-brands fa-github fa-xl"></i>
                        </span>
                    </a>
                    {%- endif %}
            
                    {%- if config.theme.personnal_links.gitlab %}
                    <a href="{{ config.theme.personnal_links.gitlab }}">
                        <div class="icon-container gitlab-icon">
                            <i class="fa-brands fa-gitlab fa-xl"></i>
                        </div>
                    </a>
                    {%- endif %}
            
                    {%- if config.theme.personnal_links.linkedin %}
                    <a href="{{ config.theme.personnal_links.linkedin }}">
                        <div class="icon-container linkedin-icon">
                            <i class="fa-brands fa-linkedin fa-xl"></i>
                        </div>
                    </a>
                    {%- endif %}
            
                    {%- if config.theme.personnal_links.facebook %}
                    <a href="{{ config.theme.personnal_links.facebook }}">
                        <div class="icon-container facebook-icon">
                            <i class="fa-brands fa-facebook fa-xl"></i>
                        </div>
                    </a>
                    {%- endif %}
            
                    {%- if config.theme.personnal_links.youtube %}
                    <a href="{{ config.theme.personnal_links.youtube }}">
                        <div class="icon-container youtube-icon">
                            <i class="fa-brands fa-youtube fa-xl"></i>
                        </div>
                    </a>
                    {%- endif %}
            
                    {%- if config.theme.personnal_links.Instagram %}
                    <a href="{{ config.theme.personnal_links.Instagram }}">
                        <div class="icon-container instagram-icon">
                            <i class="fa-brands fa-instagram fa-xl"></i>
                        </div>
                    </a>
                    {%- endif %}
            
                    {%- if config.theme.personnal_links.tiktok %}
                    <a href="{{ config.theme.personnal_links.tiktok }}">
                        <div class="icon-container tiktok-icon">
                            <i class="fa-brands fa-tiktok fa-xl"></i>
                        </div>
                    </a>
                    {%- endif %}

                    {%- if config.theme.personnal_links.x %}
                    <a href="{{ config.theme.personnal_links.x }}">
                        <div class="icon-container x-icon">
                            <i class="fa-brands fa-x-twitter fa-xl"></i>
                        </div>
                    </a>
                    {%- endif %}
                </div>
            </section>
        </div>
        <div class="main-informations">
            <section class="experience-section">
                <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>
            </section>
            <br>
            <section class="education-section">
                <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>
            </section>
        </div>
        <div class="hobbies">
            <section class="hobbies-section">
                <h2>{{ config.theme.hobbies_section_title }}</h2>
                <ul>
                    {%- for hobby in config.theme.hobbies %}
                    <li>
                        <p>{{ hobby }}</p>
                    </li>
                    {%- endfor %}
                </ul>
            </section>
        </div>
        <div class="certifications">
            <section class="certifications-section">
                <h2>{{ config.theme.certifications_section_title }}</h2>
                <ul>
                    {%- for certification in config.theme.certifications %}
                    <li>
                        {%- if certification.link is defined %}
                        <a href="{{ certification.link }}">{{ certification.name }}</a>
                        {%- else %}
                        <p>{{ certification.name }}</p>
                        {%- endif %}
                    </li>
                    {%- endfor %}
                </ul>
            </section>
        </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>
</html>
