{% extends 'base.html.twig' %}

{% block title %}Hello TestController!{% endblock %}

{% block body %}

<!-- Main -->
    <main id="accueil">
        <!-- Header -->
        <header>
            <h1 class="site-name">REY Léna</h1>
            <!-- Hamburger -->
            <div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>
            <!-- Nav-bar-->
            <div class="nav-bar">
                <div class="nav-items">
                    <div class="nav-links">
                        <a href="#accueil"><i class="fa-solid fa-house" style="color: #ff55bb;"></i>Accueil</a>
                        <a href="#projects"><i class="fa-solid fa-code" style="color: #44ffb1;"></i>Projets</a>
                        <a href="#skills"><i class="fa-solid fa-hand-sparkles" style="color: #716eff;"></i>Compétences</a>
                        <a href="#experiences"><i class="fa-solid fa-calendar-days" style="color: #ff7070;"></i>Expériences</a>
                    </div>
                </div>
            </div>
        </header>
    </main>
    
    <!-- Hero -->
    <section class="hero">
        <!-- Hero Text -->
        {% for presentation in presentations %}
        <h2 class="hero-title">Je suis<br><span class="status">développeuse web</span></h2>
        <p class="hero-text">{{presentation.headerText}}</p>
        <!-- Hero socials -->
        <div class="socials">
            <div class="github-btn">
                <a href="{{presentation.githubLink}}"><i class="fab fa-github"></i></a>
            </div>
            <div class="linkedin-btn">
                <a href="{{presentation.linkedinLink}}"><i class="fab fa-linkedin"></i></a>
            </div>
            <div class="mail-btn">
                <a href="{{presentation.mailLink}}"><i class="fas fa-envelope"></i></a>
            </div>
        </div>
        {% endfor %}
    </section>
    <div class="main">
        <!-- Projects -->
        <div id="projects">
            <div class="section">
                <div class="bubble-icon">
                    <i class="fa-solid fa-code" style="color: #45ffb1;"></i>
                </div>
                <h1>Projets</h1>
            </div>
            <div class="projects">

                {% for project in projects %}
                <div class="main-container-projet">
                    <div class="card-container-projet">
                        <img src="{{ asset('uploads/images/' ~ project.projectImg) }}" alt="Card Image">
                        <div class="card-content-projet">
                            <div class="card-text-projet">
                                <h1>{{ project.projectTitle }}</h1>
                                <p>{{ project.shortDesc }}</p>
                            </div>
                            <div class="card-btn-projet">
                                <a class="btn-title-projet" href="#">Voir la page du projet</a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
        </div>
        <!-- Skills -->
        <div id="skills">
            <div class="section">
                <div class="bubble-icon">
                    <i class="fa-solid fa-hand-sparkles" style="color: #716eff;"></i>
                </div>
                <h1>Compétences</h1>
            </div>
            <div class="dev-skills">Compétences de développement</div>
            <div class="skills">

                {% for skill in skills %}
                    {% if skill.list == "1" %}
                    <div class="skill-list1">
                            <div class="skill">
                                <div class="skills-title"><img src="{{ asset('uploads/images/' ~ skill.skillImg) }}">{{ skill.skillTitle }}</div>
                                <div class="skillbar">
                                    <div class="skillbar-full" style="background-color: {{ skill.colorCode}}; width: {{ skill.percentage }}%;">
                                        <p>{{ skill.percentage }}%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="skill-list2">
                            <div class="skill">
                                <div class="skills-title"><img src="{{ asset('uploads/images/' ~ skill.skillImg) }}">{{ skill.skillTitle }}</div>
                                <div class="skillbar">
                                    <div class="skillbar-full" style="background-color: {{ skill.colorCode}}; width: {{ skill.percentage }}%;">
                                        <p>{{ skill.percentage }}%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        
        <!-- Experiences -->
        <div id="experiences">
            <div class="section">
                <div class="bubble-icon">
                    <i class="fa-solid fa-calendar-days" style="color: #ff7070;"></i>
                </div>
                <h1>Expériences</h1>
            </div>
            <div class="experiences">
                {% for experience in experiences %}
                <div class="card-container-exp">
                    <img src="{{ asset('uploads/images/' ~ experience.expImg) }}" class="card-img-exp" alt="">
                    <div class="card-content-exp ">
                        <div class="card-subtitles-exp ">
                            <h4>{{experience.dateStart|date('d/m/Y')}} - {{experience.dateEnd|date('d/m/Y')}}</h4>
                        </div>
                        <div class="card-text-exp ">
                            <h1>{{experience.expTitle}}</h1>
                            <p>{{experience.shortDesc}}</p>
                        </div>
                        <div class="btn-exp ">
                            <i class="fa-solid fa-globe" style="color: #ffffff;"></i>
                            <a href="#">Site de l'entreprise</a>
                        </div>
                    </div>
                    <div class="bubble-container-exp ">
                        <a href="#">Voir plus</a>
                    </div>
                </div>
            {% endfor %}

        <!-- Footer -->
        <div class="footer">
            <div class="footer-container">
                <div class="footer-bg">
                    <i class="fa-regular fa-copyright" style="color: #c9d1d9;"></i>
                </div>
                <p>Copyright 2023, REY Léna</p>
            </div>
        </div>
{% endblock %}