{% extends "base.html" %}

{% block content %}
<div class="container my-5">
    <h1 class="mb-4 text-center">Mes projets:</h1>

        {% for project in projects %}
        <div class="row mb-4 justify-content-center">
            <div class="col-md-10">
                <div class="p-4 rounded-4 text-light shadow hover-scale transparent-box d-flex flex-column flex-md-row align-items-center position-relative"
                    onclick="window.location='{{ project.link }}'" style="cursor: pointer;">

                    <!-- Project Image -->
                    <div class="project-img-wrapper text-center mb-3 mb-md-0 me-md-4">
                        <img src="{{ url_for('static', filename='img/' ~ project.image) }}"
                            alt="{{ project.title }}"
                            class="img-fluid rounded shadow project-img"
                            style="max-width: 200px;">
                    </div>

                    <!-- Project Text -->
                    <div class="project-text flex-grow-1">
                        <h4>{{ project.title }}</h4>
                        <p>{{ project.description }}</p>
                    </div>

                    {% if project.button %}
                    <a href="{{ project.button[1] }}" class="btn btn-secondary project-btn">
                        {{ project.button[0] }}
                    </a>
                    {% endif %}

                </div>
            </div>
        </div>
        {% endfor %}
</div>
{% endblock %}

