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

{% block body %}

<div class="container">
    <h2 class="text-center my-5">Tous Nos Wilders</h2>
    <ul class="nav nav-tabs my-3">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#all">Tous</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#php">PHP / Symfony</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#data">Data Analyst</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#js">JavaScript / React</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#java">Java / Angular</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active show" id="all">
            <div class="row row-cols-1 row-cols-sm-1 row-cols-lg-3 row-cols-md-2 g-md-3">
                {% for wilder in wilders %}
                    <div class="col mb-4">
                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}">
                            <div class="card shadow-sm border-card-wilder">
                                <div class="card-img-wilder">
                                    <img class="card-img-top mt-3 wilder-picture" src="/uploads/pictures/{{ wilder.pictureFilename ?? 'coding.jpeg' }}" alt="profile-picture">
                                    <div class="wilder-picture-overlay">
                                        <div class="wilder-picture-adopted">
                                            {% if wilder.isAdopted is same as true %}
                                                <p id="adopted">Wilder <br> adopté</p>
                                            {% else %}
                                                <p id="not-adopted">À l'adoption</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body text-center">
                                    <div class="row d-flex">
                                        <p class="card-text title-name-card pink-color text-center">{{ wilder.firstname }} {{ wilder.lastname }}</p>
                                        {% if wilder.labelCv is not null %}
                                            <p class="blue-color fw-bolder text-center">{{ wilder.labelCv.title }}</p>
                                        {% endif %}
                                    </div>

                                    <a class="click-send-email text-center" href="{{ wilder.email|mailTo }}"><i class="fas fa-paper-plane me-2"></i>{{ wilder.email }}</a>
                                    <div class="d-flex justify-content-center align-items-center my-2">
                                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}" class="btn btn-secondary btn-sm px-4 py-2">Voir CV {{ wilder.firstname }}</a>
                                    </div>
                                </div>
                            </div>
                        </a>

                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade" id="php">
            <div class="row row-cols-1 row-cols-sm-1 row-cols-lg-3 row-cols-md-2 g-md-3">
                {% for wilder in wildersPhp %}
                    <div class="col mb-4">
                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}">
                            <div class="card shadow-sm border-card-wilder">
                                <div class="card-img-wilder">
                                    <img class="card-img-top mt-3" src="/uploads/pictures/{{ wilder.pictureFilename ?? 'coding.jpeg' }}" alt="profile-picture">
                                    <div class="wilder-picture-overlay">
                                        <div class="wilder-picture-adopted">
                                            {% if wilder.isAdopted is same as true %}
                                                <p id="adopted">Wilder <br> adopté</p>
                                            {% else %}
                                                <p id="not-adopted">À l'adoption</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body text-center">
                                    <div class="row d-flex">
                                        <p class="card-text title-name-card pink-color text-center">{{ wilder.firstname }} {{ wilder.lastname }}</p>
                                        {% if wilder.labelCv is not null %}
                                            <p class="blue-color fw-bolder text-center">{{ wilder.labelCv.title }}</p>
                                        {% endif %}
                                    </div>

                                    <a class="click-send-email text-center" href="{{ wilder.email|mailTo }}"><i class="fas fa-paper-plane me-2"></i>{{ wilder.email }}</a>
                                    <div class="d-flex justify-content-center align-items-center my-2">
                                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}" class="btn btn-secondary btn-sm px-4 py-2">Voir CV {{ wilder.firstname }}</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade" id="data">
            <div class="row row-cols-1 row-cols-sm-1 row-cols-lg-3 row-cols-md-2 g-md-3">
                {% for wilder in wildersData %}
                    <div class="col mb-4">
                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}">
                            <div class="card shadow-sm border-card-wilder">
                                <div class="card-img-wilder">
                                    <img class="card-img-top mt-3" src="/uploads/pictures/{{ wilder.pictureFilename ?? 'coding.jpeg' }}" alt="profile-picture">
                                    <div class="wilder-picture-overlay">
                                        <div class="wilder-picture-adopted">
                                            {% if wilder.isAdopted is same as true %}
                                                <p id="adopted">Wilder <br> adopté</p>
                                            {% else %}
                                                <p id="not-adopted">À l'adoption</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body text-center">
                                    <div class="row d-flex">
                                        <p class="card-text title-name-card pink-color text-center">{{ wilder.firstname }} {{ wilder.lastname }}</p>
                                        {% if wilder.labelCv is not null %}
                                            <p class="blue-color fw-bolder text-center">{{ wilder.labelCv.title }}</p>
                                        {% endif %}
                                    </div>

                                    <a class="click-send-email text-center" href="{{ wilder.email|mailTo }}"><i class="fas fa-paper-plane me-2"></i>{{ wilder.email }}</a>
                                    <div class="d-flex justify-content-center align-items-center my-2">
                                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}" class="btn btn-secondary btn-sm px-4 py-2">Voir CV {{ wilder.firstname }}</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade" id="js">
            <div class="row row-cols-1 row-cols-sm-1 row-cols-lg-3 row-cols-md-2 g-md-3">
                {% for wilder in wildersJs %}
                    <div class="col mb-4">
                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}">
                            <div class="card shadow-sm border-card-wilder">
                                <div class="card-img-wilder">
                                    <img class="card-img-top mt-3" src="/uploads/pictures/{{ wilder.pictureFilename ?? 'coding.jpeg' }}" alt="profile-picture">
                                    <div class="wilder-picture-overlay">
                                        <div class="wilder-picture-adopted">
                                            {% if wilder.isAdopted is same as true %}
                                                <p id="adopted">Wilder <br> adopté</p>
                                            {% else %}
                                                <p id="not-adopted">À l'adoption</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body text-center">
                                    <div class="row d-flex">
                                        <p class="card-text title-name-card pink-color text-center">{{ wilder.firstname }} {{ wilder.lastname }}</p>
                                        {% if wilder.labelCv is not null %}
                                            <p class="blue-color fw-bolder text-center">{{ wilder.labelCv.title }}</p>
                                        {% endif %}
                                    </div>

                                    <a class="click-send-email text-center" href="{{ wilder.email|mailTo }}"><i class="fas fa-paper-plane me-2"></i>{{ wilder.email }}</a>
                                    <div class="d-flex justify-content-center align-items-center my-2">
                                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}" class="btn btn-secondary btn-sm px-4 py-2">Voir CV {{ wilder.firstname }}</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="tab-pane fade" id="java">
            <div class="row row-cols-1 row-cols-sm-1 row-cols-lg-3 row-cols-md-2 g-md-3">
                {% for wilder in wildersJava %}
                    <div class="col mb-4">
                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}">
                            <div class="card shadow-sm border-card-wilder">
                                <div class="card-img-wilder">
                                    <img class="card-img-top mt-3" src="/uploads/pictures/{{ wilder.pictureFilename ?? 'coding.jpeg' }}" alt="profile-picture">
                                    <div class="wilder-picture-overlay">
                                        <div class="wilder-picture-adopted">
                                            {% if wilder.isAdopted is same as true %}
                                                <p id="adopted">Wilder <br> adopté</p>
                                            {% else %}
                                                <p id="not-adopted">À l'adoption</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body text-center">
                                    <div class="row d-flex">
                                        <p class="card-text title-name-card pink-color text-center">{{ wilder.firstname }} {{ wilder.lastname }}</p>
                                        {% if wilder.labelCv is not null %}
                                            <p class="blue-color fw-bolder text-center">{{ wilder.labelCv.title }}</p>
                                        {% endif %}
                                    </div>

                                    <a class="click-send-email text-center" href="{{ wilder.email|mailTo }}"><i class="fas fa-paper-plane me-2"></i>{{ wilder.email }}</a>
                                    <div class="d-flex justify-content-center align-items-center my-2">
                                        <a href="{{ path("wilder_show", {slug: wilder.slug}) }}" class="btn btn-secondary btn-sm px-4 py-2">Voir CV {{ wilder.firstname }}</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>

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