{% set title = "Demande d'agrément" %}
{% extends 'Default/base.html.twig' %}

{% block content %}
<div class='{{desktop("gpadding vt-40-in")}} {{mobile("gpadding vt-30-in")}} '>
    <div class='{{desktop("flex row space top")}} {{mobile("")}}'>
        <div id='article' class='w100 {{desktop("")}} {{mobile("vt-20-in")}}'>
            <div class="flex row middle">
                <span class="flex row bg-white shadow-alt radius-10 hoverflow">
                    <i class="bg-success-alt white bold flex col middle hz-15-in vt-10-in"><i>DU</i></i>
                    <span class="medium flex row middle hz-15-in">10 avril 2021</span>
                </span>
                <span class="flex row bg-white shadow-alt radius-10 hoverflow left-20">
                    <i class="bg-error white bold flex col middle hz-15-in vt-10-in"><i>AU</i></i>
                    <span class="medium flex row middle hz-15-in">10 mai 2021</span>
                </span>
            </div>

            <article  class='h6 article lh-4x black-alt text-justify top-20 {{desktop("")}}'>
            {{ item.details|raw }}
            </article>

            {% if item.biblio and item.biblio.files|length %}
            <h2 class='h3 adapt top-40 adapt'>Document(s) joint(s)</h2>
            <div class='flex row space wrap {{desktop("top-40")}}{{mobile("top-20")}}'>
                {% for o in item.biblio.files %}
                <div class='doc flex row top {{desktop("half-20")}} relative gradient-banner bottom-20 hz-25-in vt-20-in hoverflow {{desktop("")}} {{mobile("")}}'>
                    {% set doc = o %}
                    <span class="">
                        <i class="fa fa-file gray fa-3x"></i>
                    </span>
                    <div class='text-left flex col space relative left-20 right-40-in'>
                        <h3 class='h6 medium white p text-left nomargin lh-1x'>{{doc.name ? doc.name : doc.source}}</h3>
                        <div class="flex col middle space top-10">
                            <div class='gray text-left p-alt'>
                                <span class=''>{{doc.formatSize}}</span> |
                                <span class=''>{{doc.reading|number_format}} lect.</span> |
                                <span>{{doc.downloads|number_format}} téléch.</span>
                            </div>
                            <div class='flex row middle p upper medium top-20 nowrap'>
                                <i class="w100 top-2-in bg-gray right-40"></i>
                                <span class='os-read white' data-url="{{url('file-read',{id:doc.id,name:doc.name ? doc.name|slug : doc.source|slug})}}">Lire</span>
                                <a class='left-30 warning' href="{{path('file-download',{id:doc.id,name:doc.name ? doc.name|slug : doc.source|slug})}}" target='_blank' download>Télécharger</a>
                            </div>
                        </div>
                    </div>
                    <i class="triangle gradient-bannerm bg-white"></i>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        <aside class="{{desktop('third left-80 vt-20-in')}} {{mobile('vt-20-in hz-15-in')}}">
            <form class="bg-white shadow-alt hz-40-in vt-40-in radius-20">
                <span class="h6 success">Vous êtes déjà un de nos fournisseurs ?</span>
                <h2 class="h3 upper warning">Se connecter</h2>
                <div class="flex col top-20">
                    <label class="">Votre adresse email</label>
                    <input class="border border-gray-alt {{desktop('vt-15-in hz-20-in top-10 radius-5')}} {{mobile('vt-8-in hz-15-in radius-4')}}" type="text" placeholder="Votre adresse email">
                </div>
                <div class="flex col top-20">
                    <label class="">Votre mot de passe</label>
                    <input class="border border-gray-alt {{desktop('vt-15-in hz-20-in top-10 radius-5')}} {{mobile('vt-8-in hz-15-in radius-4')}}" type="text" placeholder="Votre mot de passe">
                </div>
                <div class="flex row middle space top-20">
                    <button class='bg-success bold white noborder {{desktop('vt-15-in hz-20-in radius-5')}} {{mobile('vt-8-in hz-15-in radius-4')}}'
                        type='submit'>
                        Se connecter
                    </button>
                    <a class="warning" href="">Mot de passe oublié !</a>
                </div>
            </form>
        </aside>
	</div>
</div>
{% endblock %}