{% set title = item.name %}
{% set desc = item.description %}
{% set menu = 'pag' %}
{% if item.banner or (item.sector and item.sector.banner) %}
{% set thumbnail = item.banner ? item.banner.thumbnail : item.sector.banner.thumbnail %}
{% set banner = asset(item.banner ? item.banner.file : item.sector.banner.file) %}
{% endif %}
{% extends 'Default/base.html.twig' %}

{% block titlebox %}
<div class='relative white flex col {{desktop("vt-40-in gright-in")}} {{mobile("")}}'>
    {% block title %}
    <h1 class='h2 upper lh-1'>{{title is defined ? title}}</h1>
    {% endblock title %}
</div>
{% endblock titlebox %}

{% block content %}
<div class='{{desktop("gleft-in vt-40-in")}} {{mobile("gpadding vt-30-in")}} '>
    <div class="relative flex row space middle border-bottom border-solid border-1x border-gray {{desktop('vt-20-in bottom-50 gright')}}{{mobile(' bottom-15-in bottom-40 space')}}">
        {% if item.sector %}
        <a href="{{path('sector',{slug:item.sector.slug})}}" class="vt-5-in upper success lspacing right-40"><i class="fa fa-arrow-left"></i> {{item.sector.label}}</a>
        {% endif %}
        <div class="relative {{desktop('left-80')}}{{mobile(' left-10 ')}}">
            <div class="relative success p upper">
                <span class="os-click vt-5-in {{item.sector ? desktop('extrabold')~mobile('medium')}} {{desktop('lspacing')}}" data-target="#sectorInput">
                    <span>Tous les secteurs</span>
                    <i class="fa fa-caret-down"></i>
                </span>
                <div class="anim-display anim-from-bottom transition-1s absolute ytop-100 min-w100 bg-white shadow {{mobile('right')}}" id="sectorInput" style="z-index: 1">
                    <ul class="list success nowrap vt-10-in">
                        {% for o in sectors %}
                        <li class="pointer"><a class="block hz-20-in vt-5-in" href="{{path('sector',{slug:o.slug})}}">{{o.label}}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                <input type="hidden" id="type" name="type" value="tout">
            </div>
        </div>
    </div>
    <div class='{{desktop("flex row space top")}} {{mobile("")}}'>
        <div id='article' class='w100 {{desktop("")}} {{mobile("vt-20-in")}}'>
            <figure class="w100 relative {{desktop('')}}">
                {% if item.banner or item.sector.banner %}
                <div class="w100 relative" style="max-height: 30vw; height: 30vw">
                    <img src="{{asset(item.banner ? item.banner : item.sector.banner)}}" class="block cover"/>
                </div>
                {% endif %}
                <div class="flex row p-alt medium {{desktop('top-30')}} {{mobile('top-10')}}">
                    {% if item.sector %}
                    {% if item.sector.pillar %}
                    <a class="special upper" href="{{path('pillar',{pillar_slug:item.sector.pillar.slug})}}">{{item.sector.pillar.label}}</a>
                    <span class="hz-20">|</span>
                    {% endif %}
                    <a class="error bold upper underline" href="{{path('sector',{slug:item.sector.slug})}}">{{item.sector.label}}</a>
                    {% endif %}
                </div>
            </figure>
            <article  class='p article black {{desktop("top-30")}}'>
            {{ item.details|raw }}
            </article>

            {% macro info(label, value) %}
            <div class="bg-warning-alt mw100 flex col border-top border-gray border-solid {{desktop('border-5x hz-20-in vt-10-in top-25 right-20')}} {{mobile('border-2x hz-10-in vt-8-in top-15')}}">
                <strong class="regular">{{label}} :</strong>
                <label class="upper top-5 bold success">{{value|nl2br}}</label>
            </div>
            {% endmacro %}

            <div class="flex row wrap middle top-30">
                {% if item.cost %}
                {{_self.info("Coût estimatif", item.cost)}}
                {% endif %}

                {% if item.area %}
                {{_self.info("Zone d'intervention", item.area)}}
                {% endif %}

                {% if item.runtime %}
                {{_self.info("Délai d'exécution", item.runtime)}}
                {% endif %}

                {% if item.plannedStartDate %}
                {{_self.info("Démarrage prévisionnel", item.plannedStartDate)}}
                {% endif %}

                {% if item.status %}
                {{_self.info("Statut", item.status)}}
                {% endif %}

                {% if item.supervising %}
                {{_self.info("Supervision", item.supervising.name)}}
                {% endif %}

                {% if item.structure %}
                {{_self.info("Exécution", item.structure.name)}}
                {% endif %}

                {% if item.AMO %}
                {{_self.info("AMO", item.AMO)}}
                {% endif %}

                {% if item.MOE %}
                {{_self.info("MOE", item.MOE)}}
                {% endif %}

                {% if item.provider %}
                {{_self.info("Prestataire", item.provider)}}
                {% endif %}
            </div>

            {% if item.document %}
            <div class='flex row space wrap {{desktop("top-40")}}{{mobile("top-20")}}'>
                <h2 class="h3 success">Fiche de présentation du projet</h2>
                <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 = item.document %}
                    <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>
            </div>
            {% endif %}


            {% if item.album and item.album.pictures|length %}
            <h2 class='h3 top-40'>{{item.album.title ? item.album.title : "Album photos"}}</h2>
            <figure class="bg-white slide-box mrect slide-container fill nohover relative top-40" tabindex="1">
                <div class="fill slides radius-10 adapt">
                {% for o in item.album.pictures %}
                <div class='relative slide {{loop.index == 1 ? "active"}}'>
                    <img src='{{asset(o)}}' class='contain'/>
                </div>
                {% endfor %}
                </div>
                <span class="slide-prev radius-50 h100 padding-30 absolute top left pointer" data-target="#article .slide-box">
                    <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-left h1 black"></i></span>
                </span>
                <span class="slide-next radius-50 h100 padding-30 absolute top right pointer"  data-target="#article .slide-box">
                    <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-right h1 black"></i></span>
                </span>
            </figure>
            {% endif %}
        </div>
        <aside class="{{desktop('third-80 left-80 ')}} {{mobile('')}}">
            {# <div class="bg-gray success-alt {{desktop('vt-20-in hz-20-in')}} {{mobile('vt-20-in hz-15-in')}}">
                <div class="flex col">
                    {% if item.cost %}
                    <div class="flex col">
                        <strong>Coût :</strong>
                        <label>{{item.cost}} FCFA</label>
                    </div>
                    {% endif %}
                    {% if item.runtime %}
                    <div class="flex col {{desktop('top-20')}}">
                        <strong>Délai d'exécution :</strong>
                        <label>{{item.runtime}}</label>
                    </div>
                    {% endif %}
                    {% if item.area %}
                    <div class="flex col {{desktop('top-20')}}">
                        <strong>Zone d'intervention :</strong>
                        <label>{{item.area}}</label>
                    </div>
                    {% endif %}
                    {% if item.supervising %}
                    <div class="flex col {{desktop('top-20')}}">
                        <strong>Supervision :</strong>
                        <label>{{item.supervising.name}}</label>
                    </div>
                    {% endif %}
                    {% if item.structure %}
                    <div class="flex col {{desktop('top-20')}}">
                        <strong>Exécution :</strong>
                        <label>{{item.structure.name}}</label>
                    </div>
                    {% endif %}
                    {% if item.AMO %}
                    <div class="flex col {{desktop('top-20')}}">
                        <strong>AMO :</strong>
                        <label>{{item.AMO}}</label>
                    </div>
                    {% endif %}
                    {% if item.MOE %}
                    <div class="flex col {{desktop('top-20')}}">
                        <strong>MOE :</strong>
                        <label>{{item.MOE}}</label>
                    </div>
                    {% endif %}
                    {% if item.provider %}
                    <div class="flex col {{desktop('top-20')}}">
                        <strong>Prestataire :</strong>
                        <label>{{item.provider}}</label>
                    </div>
                    {% endif %}
                </div>
            </div> #}

            <h2 class="h4 success-alt upper underline top-50">Actualités</h2>
            {% for o in articles %}
            <div class="w100 {{desktop(' vt-20-in')}} {{mobile('vt-15')}}">
                <figure class="w100 flex row top">
                    <img src="{{asset(o.banner ? o.banner.thumbnail : 'images/logo.svg')}}" class="block third {{desktop(o.banner ? '' : 'hz-25-in')}}">
                    <div class="flex col {{desktop('left-15')}} {{mobile('left-10')}}">

                        <h3 class="p-alt regular">{{o.title}}</h3>
                        <div class="flex row middle top-10">
                            <i class="bg-warning top-5-in hz-20-in"></i>
                            <a class='p-alt lspacing upper medium success {{desktop('left-10')}} {{mobile('left-5')}}'
                                href='{{path("article",{id:o.id, slug:o.slug})}}'>
                                Lire l'article
                            </a>
                        </div>
                    </div>

                </figure>
            </div>
            {% endfor %}
        </aside>
	</div>
</div>
{% endblock %}