{% extends 'main/dashboard.html' %}


{% load static %}
{% block content %}
         

{% load crispy_forms_tags %} 






<div class="container-xxl flex-grow-1 container-p-y">
  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Mapa / Grupu Bambu / </span> Detallu
  
    <button style="float: right ;" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Upload Imagen
    </button>


  </h4>
              
  
  <div class="row">

    {% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }}">
      <font color="gray">  {{ message }}</font>
    </div>
    {% endfor %}
{% endif %}



    <div class="row">


 

   
      
 




  <div class="col-lg-12 mb-4">

    <div class="col-xxl">
      <div class="card mb-4">
        <div class="card-header d-flex align-items-center justify-content-between">
          <h5 class="mb-0">Upload Imagen</h5>
        </div>
        <div class="card-body"> 



          
     

        <hr>
        <div class="row">

          {% for dados in imageinformasaun %}


          <div class="col-lg-4 mb-4">

            <div class="col-xxl">
              <div class="card mb-4">
          
                <div class="card-body">


              <img src="{{dados.imagen.url}}" style="width: 100%; height: 200px; object-fit: cover;"> 
              <hr>
              {{dados.deskrisaun}} {{dados.deskrisaun}}{{dados.deskrisaun}}{{dados.deskrisaun}}
              <hr>
     
          

              {% if mainimagen == dados.imagen %}
              <button class="btn btn-default btn-sm"> <center>Hili ona Hanesan thumbnails </center></button>
              {% else %}
              <a href="{% url 'informasaun:apagaimageninformasaun' dados.id %}" class="btn btn-primary btn-sm">Apaga</a>
              <a href="{% url 'informasaun:setimageninformasaun' dados.id %}" class="btn btn-primary btn-sm"> Hili Hanesan thumbnails</a>
              {% endif %}
     
            </div>
          </div>
        </div>
</div>


         {% endfor %}
 

       </div> 
      </hr>

     


        </div>
      </div>
    </div>


</div>
  
  
    
<!-- Button trigger modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
   Upload Imagen
      </div>
      <div class="modal-body">
        <center>
          <img src="" id="output" style="width: 200px ; height: 200px  px; object-fit: cover;">
        </center>

        {% crispy forms %}
      </div>

    </div>
  </div>
</div>


<script>
  function myFunction() {
    var image = document.getElementById("output");
    image.src = URL.createObjectURL(event.target.files[0]);
  }
      
    </script>
                    
{% endblock content %}