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

{% block title %}Laissez un témoignage{% endblock %}
{% block body %}
    {# Display form errors (if any) #}
    {{ form_errors(form) }}
 
    <div class="container row"  style="margin:0 auto;">
        <div class="testimonial-form p-4 rounded-3 form-control">
	<h5  class="text-left mb-4"> {{ 'temoignage_laisser' | trans }}</h5>
	{% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}
	<div class="col-md-6 col-xs-12 align-items-center" style="margin:0 auto;">
            {# Start form with enctype for file uploads #}
            {{ form_start(form, {'attr': {'enctype': 'multipart/form-data'}}) }}
            {{ form_end(form) }}
	</div>
        </div>
 <style>

 {% if app.request.locale == 'fr' %}
     .titreeng, .descriptioneng,
	label[for="temoignage_description_anglais"],
	label[for="temoignage_titre_anglais"] {
	display:none;
     }

  {%endif%}
 {% if app.request.locale == 'en' %}
	.titre, .description,
label[for="temoignage_description"],
	label[for="temoignage_titre"] {
	display:none;
     }

  {%endif%}
input#temoignage_delete_image,
input#temoignage_valider,
label[for="temoignage_delete_image"],
label[for="temoignage_valider"] {
  display: none;
}


.border-golden {
   border:2px solid #d4af37 !important;
   border-radius:10px;
}
 .btn-golden {
            background: linear-gradient(45deg, #ffd700, #b8860b, #f5c400, #cd7f32); /* Golden background */
            color: black; /* Black text */
            padding: 4px 4px; /* Padding to make it look nice */
            border-radius: 5px; /* Rounded corners */
            text-decoration: none; /* Remove underline */
            display: inline-block; /* Make the link behave like a button */
            font-weight: bold;
	    text-align:center;
	    margin-top:1.3%;
	    width:150px;
            font-size:13px;
	    text-align-center;
        }

/* Style the form input fields */
#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() {
        
	var imagePath = '{{ asset('img/rdvmanel22.png') }}'

 $('#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 %}