{% if campaign is defined %}
<div class="{{desktop('bg-gray bottom-25-in hz-40-in bottom-50 top-40-in')}}{{mobile('bg-white padding-15 bottom-30 radius-2 shadow-alt-2')}}">
<h3 class="{{ desktop("h5 medium success") }}{{mobile('h2 semibold')}}">{{ campaign.name }}</h3>
<p class="{{ desktop("top-15") }}{{ mobile("top-10") }}">
{{ campaign.description }}
</p>
{% if isDesktop() %}
<div class="vt-30 border-1x border border-gray"></div>
{% endif %}
<div class="{{desktop('bottom-20 flex row space top-40')}}{{mobile('top-25 black-alt')}}">
<div class="{{desktop('flex col middle p-alt')}}{{mobile('flex row space')}}">
<span class="flex row bg-white {{ desktop("radius-10")}}{{ mobile("radius-5 border border-1x border-gray-alt")}} hoverflow {{mobile('half-5')}}">
<i class="{{ desktop("bg-success-alt white") }}{{ mobile("bg-gray p-alt")}} flex col middle {{ desktop("hz-15-in vt-10-in") }} {{ mobile("hz-8-in vt-5-in p-alt") }}"><i>{{ "DU"|trans }}</i></i>
<span class="flex row middle {{ desktop("hz-15-in")}} {{ mobile("hz-5-in p-alt black-alt")}} nowrap">{{ campaign.start.date|frdate }}</span>
</span>
<span class="flex row bg-white {{ desktop("radius-10")}}{{ mobile("radius-5 border border-1x border-gray-alt")}} hoverflow {{desktop('top-10')}}{{mobile('half-5')}}">
<i class="{{ desktop("bg-error white") }}{{ mobile("bg-gray p-alt")}} flex col middle {{ desktop("hz-15-in vt-10-in") }} {{ mobile("hz-8-in vt-5-in p-alt") }}"><i>{{ "AU"|trans }}</i></i>
<span class="flex row middle {{ desktop("hz-15-in")}} {{ mobile("hz-5-in p-alt black-alt")}} nowrap">{{ campaign.end.date|frdate }}</span>
</span>
</div>
<i class="border border-white {{desktop('hz-30')}} mhide"></i>
{% if isMobile() %}
<div class="border border-1x border-gray top-15"></div>
{% endif %}
<div class="flex col middle {{mobile('top-5 black-alt p-alt vt-5-in')}}">
<span class="flex row middle {{ desktop("vt-5-in") }}">
<i class="bg-warning circle padding-5 right-10"></i>
{% if campaign is campaignSubscribable %}
{% set nbDay= campaign.end.date|dateDiff %}
{% if nbDay > 1 %}
<span>{{ ("day remains.other")|trans({"%count%": nbDay}) }}</span>
{% else %}
<span>{{ ("day remains.one")|trans }}</span>
{% endif %}
{% else %}
<span>{{ "Inactif"|trans }}</span>
{% endif %}
</span>
<span class="flex row middle {{ desktop("vt-5-in") }}">
<i class="bg-warning circle padding-5 right-10"></i>
<span>
{% set nbCompetence= campaign.services|length %}
{% if nbCompetence|length > 1 %}
<span>{{ ("nb competence.other")|trans({"%count%": nbCompetence}) }}</span>
{% else %}
<span>{{ ("nb competence.one")|trans }}</span>
{% endif %}
</span>
</span>
</div>
<i class="border border-white hz-30 mhide"></i>
<div class="{{ desktop("flex col middle center p-alt") }}{{mobile('flex row space top-10')}}">
<a class='{{desktop('bg-success white top-8-in bottom-10-in hz-30-in radius-5 text-center')}} {{mobile('bg-gray border border-1x border-success p-alt top-5-in bottom-5-in hz-10-in radius-3 text-center half-5 right-20')}}'
href='{{ path('campaign-detail', {uuid: campaign.uuid}) }}'>
{{ "En savoir plus"|trans }}
</a>
{% if isDesktop() %}
<div class="{{ not role.provider ? "top-20" }}">
{{ include('RecruitmentCampaign/_campaign_subscription_btn.html.twig') }}
</div>
{% else %}
{{ include('RecruitmentCampaign/_campaign_subscription_btn.html.twig') }}
{% endif %}
</div>
</div>
</div>
{% endif %}