{% 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 %}
    {% for document in documents %}
      <div class="infografia-container">
      <div class="infografia-box">
        <img src="{{asset('documents/thumbnails/'~document.thumbnail)}}" width="100%" />
        <a href="{{document.document}}" download="{{document.document}}" onclick="donwloadDocument({{document.id}})"><i class="fa-solid fa-download"></i></a>
      </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 %}