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

{% block title %}{{ cheval.getNomCheval() }}{% endblock %}

{% block body %}
    <section class="wrap namecard mt-4">
        <div class="pfp-container center">
            <img class="pfp" src="{{ vich_uploader_asset(cheval.getIdImageProfil()) }}" alt="Photo de profil de {{ cheval.getNomCheval() }}" draggable="false">
        </div>
        <div>
            <h2 class="text-light m-0 mb-1 logo-name-xl">
                <img class="logo-xl" src="{{ vich_uploader_asset(cheval.getIdEleveur().getIdFer()) }}"></img> 
                {{ cheval.getNomCheval() }}
            </h2>
            <p class="text-light m-0 mb-2 pl-2">
                {{ cheval.getLabelSexe() }} {{ cheval.getLabelCouleur() }} {{ cheval.getStatutVente() }}
                {% if cheval.getAge() >= 0 %}| {{ cheval.getAge() }} {{ cheval.getAge() == 1 ? 'an' : 'ans'}}{% endif %}
                {% if cheval.getPonctuation() != null %}| {{ cheval.getPonctuation }} Pts{% endif %}
            </p>
            <p class="text-white mt-1 pl-2">{{ cheval.getDescCheval() }}</p>
        </div>
    </section>

    <div class="wrap mh-4">
        <div class="admin-buttons">
            <div class="d-grid w-auto">
                <a class="button" href="{{ path('app_horse_index') }}">
                    <i class="fa-solid fa-arrow-left mr-1"></i> Revenir à la liste des chevaux
                </a>
            </div>

            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
            <div class="d-grid w-auto">
                <a class="button text-center" href="{{ path('app_horse_edit', {'id': cheval.getId()}) }}">
                    <i class="fa-solid fa-pen-to-square mr-1"></i> Modifier {{ cheval.getNomCheval() }}
                </a>
            </div>

            <div class="d-grid w-auto">
                {% include 'horse/_delete_form.html.twig' with {
                    'cheval': {
                        'id': cheval.getId(),
                        'name': cheval.getNomCheval()
                    }
                } %}
            </div>
            {% endif %}
        </div>
    </div>

    <h2 class="bg-black-70 m-0 mt-4 pt-3 text-light font-h text-center">ASCENDANCE</h2>
    <section class="bg-black-70 mb-4 p-4 scroll-x">
        <div class="ascendance relative">
            <div class="asc-col-1">
                <div class="d-grid middle">
                    {% include 'component/ascendance_card.html.twig' with {'cheval': cheval} %}
                </div>
            </div>

            <div class="asc-col-2"> <!-- Parents -->
                <div class="asc-parents middle">
                    {% include 'component/ascendance_card.html.twig' with {'cheval': cheval.getPere()} %}
                    {% include 'component/ascendance_card.html.twig' with {'cheval': cheval.getMere()} %}
                </div>
            </div>

            <div class="asc-col-3"> <!-- Grandparents -->
                <div class="asc-grandparents">
                    {% if cheval.getPere() != null %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': cheval.getPere().getPere()} %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': cheval.getPere().getMere()} %}
                    {% else %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': null} %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': null} %}
                    {% endif %}
                </div>

                <div class="asc-grandparents">
                    {% if cheval.getMere() != null %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': cheval.getMere().getPere()} %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': cheval.getMere().getMere()} %}
                    {% else %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': null} %}
                        {% include 'component/ascendance_card.html.twig' with {'cheval': null} %}
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    {% if is_granted('IS_AUTHENTICATED_FULLY') %}
    <div class="wrap admin-buttons">
        <div class="d-grid w-auto"></div>
        <div class="d-grid w-auto">
            <a class="button" href="/cheval/{{ cheval.getId() }}/ascendance">
                <i class="fa-solid fa-horse-head mr-1"></i> Modifier son ascendance
            </a>
        </div>
    </div>
    {% endif %}

    <section class="wrap mb-4">
        <h2 class="text-light font-h text-center">DÉTAILS</h2>

        <table class="table center">
            <tbody>
                <tr>
                    <th>Éleveur</th>
                    <td>{{ cheval.getIdEleveur().getNomEleveur() }}</td>
                </tr>
                <tr>
                    <th>UELN</th>
                    <td>{{ cheval.getUeln() }}</td>
                </tr>
                <tr>
                    <th>NIN</th>
                    <td>
                        {% if cheval.getNin() != null %}{{ cheval.getNin() }} 
                            (<a class="link link-primary" href="https://www.cavalo-lusitano.com/en/stud-book/public-access-to-the-stud-book">Voir le stud-book</a>) 
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>Race</th>
                    <td>{{ cheval.getIdRace().getLabelRace() }}</td>
                </tr>
                <tr>
                    <th>Date de naissance</th>
                    <td>
                        {% if cheval.getDateNaissance() != null %} 
                            {{ cheval.getDateNaissance()|date('d/m/Y') }} ({{ cheval.getAge() }} {{ cheval.getAge() == 1 ? 'an' : 'ans'}})
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>Sexe</th>
                    <td>{{ cheval.getSexe() == 'M' ? 'Mâle' : 'Femelle' }}</td>
                </tr>
                <tr>
                    <th>Couleur</th>
                    <td>{{ cheval.getIdCouleur().getLabelCouleur() }}</td>
                </tr>
                <tr>
                    <th>Ponctuation</th>
                    <td>
                        {% if cheval.ponctuation != null %}
                            {{ cheval.ponctuation }} Pts
                        {% endif %}
                    </td>
                </tr>
            </tbody>
        </table>
    </section>

    <section class="wrap mb-4">
        <h2 class="text-light font-h text-center">GALERIE</h2>

        <div class="media-gallery mb-4">
            {% for image in cheval.getListeImages()|slice(0, 3) %}
                <a href="{{ path('app_image_show', {'id': image.getIdImage().getId()}) }}">
                    <div class="border-highlight bg-white p-1">
                        <img class="media-thumbnail" src="{{ vich_uploader_asset(image.getIdImage()) }}" alt="{{ image.getIdImage().getTexteAlt() }}">
                        <p class="bg-white m-0 p-1 pt-2">
                            {{image.getIdImage().getTexteAlt()}}
                        </p>
                    </div>
                </a>
            {% endfor %}

            {% for video in cheval.getListeVideos()|slice(0, 3) %}
                <video class="media-thumbnail" src="{{ vich_uploader_asset(image.getIdVideo()) }}" width="320" height="240" controls loop></video> 
            {% endfor %}
        </div>

        <div class="admin-buttons">
            <div class="d-grid w-auto"></div>
            <div class="d-grid w-auto">
                <a class="button text-right" href="{{ path('app_horse_gallery', {'id': cheval.getId()}) }}">
                    <i class="fa-solid fa-images mr-1"></i> Voir la galerie entière
                </a>
            </div>
        </div>
    </section>

    <section class="wrap mb-4">
        <h2 class="text-light font-h text-center">DESCENDANTS</h2>

        <div class="preview-gallery mb-4">
            {% for descendant in cheval.getListeDescendants() %}
                {% include 'component/horse_card.html.twig' with {
                    'cheval': descendant.getIdEnfant(),
                    'col': 0,
                } %}
            {% else %}
                <div class="bg-black-40 text-primary p-3 span-3 text-center">
                    {{ cheval.getNomCheval() }} n'a pas de descendants
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}