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

{% block title %}Détails de la Greffe{% endblock %}

{% block body %}
    <div class="container-fluid py-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <!-- Titre centré -->
                <h2 class="text-left mb-4" id="heading">
                    {% if app.request.locale == 'en' %}
                        {{ greffe.getTitreEn() }} <!-- English title -->
                    {% else %}
                        {{ greffe.getTitre() }} <!-- Default title (French or fallback) -->
                    {% endif %}
                </h2>

                <!-- Description de la greffe -->
                <p class="text-muted" style="text-align:justify;">
                    {% if app.request.locale == 'en' %}
                        {{ greffe.getDescriptionEn() }} <!-- English description -->
                    {% else %}
                        {{ greffe.getDescription() }} <!-- Default description (French or fallback) -->
                    {% endif %}
                </p>

                <!-- Image de la greffe -->
                {% if greffe.imageavant %}
                    <div class="d-flex justify-content-center mt-4">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#imageavant-modal">
                            <img src="{{ asset('upload/images/' ~ greffe.imageavant) }}" 
                                 alt="{{ greffe.titre }}" 
                                 class="img-fluid rounded-3" 
                                 style="max-width: 100%; height: auto;">
                        </a>
                    </div>

                    <!-- Modal for Image -->
                    <div class="modal fade" id="imageavant-modal" tabindex="-1" aria-labelledby="imageavantModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <img src="{{ asset('upload/images/' ~ greffe.imageavant) }}" class="img-fluid rounded-3" alt="{{ greffe.titre }}">
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
				{% if greffe.imageapres %}
                    <div class="d-flex justify-content-center mt-4">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#imageavant-modal">
                            <img src="{{ asset('upload/images/' ~ greffe.imageapres) }}" 
                                 alt="{{ greffe.titre }}" 
                                 class="img-fluid rounded-3" 
                                 style="max-width: 100%; height: auto;">
                        </a>
                    </div>

                    <!-- Modal for Image -->
                    <div class="modal fade" id="imageapres-modal" tabindex="-1" aria-labelledby="imageavantModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <img src="{{ asset('upload/images/' ~ greffe.imageapres) }}" class="img-fluid rounded-3" alt="{{ greffe.titre }}">
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
<style>
<style>
#adresstop {
  position: relative; /* This makes sure the heading can be positioned relative to it */
  width: 100%; /* Ensure the container covers the full width */
}

#heading {
  position: absolute;
  top: 55%;  /* Vertically center the heading */
  left: 100%;  /* Start from off-screen to the right */
  transform: translateY(-80%);  /* Vertically center the heading */
  white-space: nowrap;  /* Prevent text wrapping */
  font-size: 2.5em;  /* Adjust the font size as needed */
  color: white;  /* Initial text color */
  padding: 10px 0;  /* Padding to ensure text isn't touching edges */
  width: 100%;  /* Make the heading cover the full width of its container */
  text-align: center;  /* Ensure the text is centered inside the heading */
  background-color: #d4af37 !important; /* Start with no background color */
  opacity: 1;  /* Full opacity */
  transition: background-color 0.5s ease;  /* Smooth transition for the background color */
}


</style>
    <script>
        $(document).ready(function() {
            // Récupérer la variable Twig dans le JavaScript
            var imagePath = "{{ asset('upload/images/' ~ greffe.typegreffes.imagebanniere) }}";  // Utilisation de l'asset() pour le chemin relatif

          // Set the background of the div
    $('#adresstop').css({
        'background': 'url(' + imagePath + ') top left',
        'height': '350px',
        'background-size': 'cover',
        'background-repeat': 'no-repeat',
        'background-position': 'center',
        'color': '#000 !important',
    });

    // Apply animation to the heading
    $('#heading').css({
        'font-size': '2em',  // Adjust font size
        'color': '#000',      // Initial text color
        'background-color': 'transparent', // Start with no background color
        'opacity': 0.7,
    }).animate({
        left: '0%'  // Move from the right side (left: 100%) to the left side (left: 0%)
    }, 1500, function() {
        // Once the animation is done, apply a golden background color with opacity
        $(this).css({
            'background-color': '#d4af37',  // Golden color with opacity
            'color': 'black'  // Change text color for contrast if needed
        });
    });

// Get the current page URL
    var currentUrl = window.location.href;

    // Remove 'active' class from all links first
    $('.navmenu ul li a').removeClass('active');

    // Iterate over each link in the nav menu
    $('.navmenu ul li a').each(function() {
        // Check if the link's href matches the current URL
        if (this.href === currentUrl) {
            // Add an 'active' class to the matching link
            $(this).addClass('active');
        }
    });

 });
    
    </script>
{% endblock %}