{% 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">

            <a href="{{ project.link }}" class="text-decoration-none">
                <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">

                    <!-- 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">
                        <h4>{{ project.title }}</h4>
                        <p>{{ project.description }}</p>
                    </div>

                    <!-- Button in bottom-right -->
                    {% if project.button %}
                    <button class="btn btn-secondary project-btn"
                            onclick="event.stopPropagation(); window.location='{{ project.button[1] }}'">
                        {{ project.button[0] }}
                    </button>
                    {% endif %}
                </div>
            </a>

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