
 
     {% load i18n%}
   
     <style>
        body {
          font-family: Arial;
          margin: 0;
        }
        
        * {
          box-sizing: border-box;
        }
        
        img {
          vertical-align: middle;
        }
        
        /* Position the image container (needed to position the left and right arrows) */
        .container {
          position: relative;
        }
        
        /* Hide the images by default */
        .mySlides {
          display: none;
        }
        
        /* Add a pointer when hovering over the thumbnail images */
        .cursor {
          cursor: pointer;
        }
        
        /* Next & previous buttons */
        .prev,
        .next {
          cursor: pointer;
          position: absolute;
          top: 40%;
          width: auto;
          padding: 16px;
          margin-top: -50px;
          color: white;
          font-weight: bold;
          font-size: 20px;
          border-radius: 0 3px 3px 0;
          user-select: none;
          -webkit-user-select: none;
        }
        
        /* Position the "next button" to the right */
        .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }
        
        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }
        
        /* Number text (1/3 etc) */
        .numbertext {
          color: #f2f2f2;
          font-size: 12px;
          padding: 8px 12px;
          position: absolute;
          top: 0;
        }
        
        /* Container for image text */
        .caption-container {
          text-align: center;
          background-color: #222;
          padding: 2px 16px;
          color: white;
        }
        
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
        
        /* Six columns side by side */
        .column {
          float: left;
          width: 16.66%;
        }
        
        /* Add a transparency effect for thumnbail images */
        .demo {
          opacity: 0.6;
        }
        
        .active,
        .demo:hover {
          opacity: 1;
        }
        </style>




<style>
body {font-family: Arial;}

/* Style the tab */
.tab2 {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgb(204, 204, 204);
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  padding: .5em;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab2 button.active {
  background-color: rgb(217, 217, 217);
}

/* Style the tab content */
.tab2content {
  display: none;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px;
}
</style>











            {% for dados in konteuduprodutu %}



<center><h2>{{dados.titulu}}</h2></center>
<br>

              <div class="tab2" >
                <button class="tablinks active" id="imagen" onclick="openCity(event, 'London')">Imagen</button>
                <button  class="tablinks" id="deskrisaun" onclick="openCity(event, 'Paris')">Deskrisaun</button>
              </div>
              
              <div id="London" class="tab2content">
           
            <br><br> 

                  {% for dados in imagenprodutu %}
                  <div class="mySlides">
                    <img src="{{dados.imagen.url}}" style=" width: 100%; object-fit: cover;">
                  </div>
                  {% endfor %}
                
                
                
                    
                  <a class="prev" onclick="plusSlides(-1)">❮</a>
                  <a class="next" onclick="plusSlides(1)">❯</a>
                
                  <div class="caption-container">
                    <p id="caption"></p>
                  </div>
                
                  <div class="row" style='justify-content: center;'>
  
                    <center>
            
                    {% for dados in imagenprodutu %} 
              
                      <img class="demo cursor" src="{{dados.imagen.url}}" style="width:150px" onclick="currentSlide({{forloop.counter}})" alt="Imagen {{forloop.counter}}">
              
                    {% endfor %}
  
                  </center>
  
                
                  </div>
          
              </div>
              
              <div id="Paris" class="tab2content">
            <br><br>
             
                  <h2> Naran :  {{dados.titulu}} <br> Pressu : $ {{dados.produtu.presu}} <br></h2>
                  <p>{{dados.konteudu|safe}}</p>
          
              </div>




          





            </div>






  {% endfor %}


              


 
      


        

<!-- 
                {% for dados in imagenprodutu %}

                
         
                    <center>
                        <img src="{{dados.imagen.url}}"  style='width: 400px;' alt="" class="img-responsive img-rounded">
                    </center>
                {% endfor %}
     -->
     








            <hr>
            <center>{% trans "ProdutuShare" %}  </center>
          <hr>
     
          <script>
            function openCity(evt, cityName) {
              var i, tabcontent, tablinks;
              tabcontent = document.getElementsByClassName("tab2content");
              for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
              }
              tablinks = document.getElementsByClassName("tablinks");
              for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
              document.getElementById(cityName).style.display = "block";
              evt.currentTarget.className += " active";


          if (cityName == "London" ){
          document.getElementById("imagen").style.background='rgb(208 208 208)';
          document.getElementById("deskrisaun").style.background='#f1f1f1';
          }else { 
            document.getElementById("imagen").style.background='#f1f1f1';
          document.getElementById("deskrisaun").style.background='rgb(208 208 208)';

            }
              
            }


            $( document ).ready(function() {
  openCity(event, 'London');
});

       
            </script>
               
<script>
    let slideIndex = 1;
    showSlides(slideIndex);
    
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }
    
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }
    
    function showSlides(n) {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("demo");
      let captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
      captionText.innerHTML = dots[slideIndex-1].alt;
    }




    </script>
        
          
          <script src="https://apps.elfsight.com/p/platform.js" defer></script>
          <div class="elfsight-app-abec5393-604f-457d-a706-bc7896e0c162"></div>
          
          
