{% extends 'layout.html.twig' %}
{% block stylesheets %}
  {{ parent() }}
  <link href="{{ asset('css/competition.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/document.css') }}" media="screen" rel="stylesheet" type="text/css">
<style type="text/css">
    body {
      background-image: none;
    }
  </style>

{% endblock %}
{% block body %}
  {{ parent() }}    
    {% if documents|length == 0 %}
            <div class="col-xs-12 text-center"><h2>Aún no se ha añadido documentación</h2></div>
    {% else %}
    <div class="infografia-container">
    <h3 class="text-center">📹 El presente y el futuro de <b>Albia</b></h3>
    <video width="100%" height="auto" controls>
      <source src="{{asset('videos/video_albia.mp4')}}" type="video/mp4">
      Tu navegador no soporta el elemento de video.
    </video>
    <hr/>
    {% for document in documents %}
      <div class="infografia-box">
        <h3 style="color:#000">📄 {{document.name}}</h3>
        <img src="{{asset('documents/thumbnails/'~document.thumbnail)}}" style="cursor:pointer;" width="100%" data-toggle="modal" data-target="#pdfModal" />
        {#<a href="{{document.document}}" download="{{document.document}}" onclick="donwloadDocument({{document.id}})"><i class="fa-solid fa-download"></i></a>#}
      </div>
    {% endfor %}
    </div>
    <div class="modal fade pdfModal" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
      <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
          <div class="modal-content" style="width: 80vw; height: 80vh">
            <iframe src="{{asset('documents/infografia-valores-albia.pdf')}}" width="100%" height="100%" style="border:none;"></iframe>
          </div>
        </div>
      </div>
    </div>
           
  {% endif %}

{{ include('Document/Tutorial/tutoDocument.html.twig') }}
         

{% endblock %}
{% block javascripts %}
  {{ parent() }}
  <script src="https://kit.fontawesome.com/7331265614.js" crossorigin="anonymous"></script>
  <script> 
    function donwloadDocument(id) {
      var getFilterUrl = Routing.generate('download_route');
        $.ajax({
                url: getFilterUrl+'/'+id,
                type: "POST",
                dataType: "json", 
                async: true,
                success: function (data)
                {

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