{% 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="col-xs-12 text-center"><h2>Revisa este contenido ¡para reforzar tu conocimiento en seguridad!</h2></div> #}
    <div class="infografia-container">
    {% for document in documents %}      
      <div class="infografia-box">
        <a href="#" data-target="#documentModal{{loop.index}}" data-toggle="modal">
          <img src="{{asset('documents/thumbnails/'~document.thumbnail)}}" width="100%" />
        </a>
        {# <a href="{{document.document}}" download="{{document.document}}" onclick="donwloadDocument({{document.id}})"><i class="fa-solid fa-download"></i></a> #}
      </div>
      <div class="modal fade awardsModal" id="documentModal{{loop.index}}" 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">
              <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar"
                style="background: none; border: none; color: white; font-size: 20px;padding:5px; opacity: 1">
                  <i class="fas fa-times"></i>
              </button>
              <iframe src="{{ asset('documents/'~document.document ) }}" width="100%" height="600px"></iframe>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
    </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 %}