{% set title = service.title  %}
{% set desc = service.description  %}
{% set menu = 'services' %}
{% extends 'Default/base.html.twig' %}

{% block content %}
<div class='gright-in {{desktop("")}} {{mobile("")}} '>
    <div class='bg-gray {{desktop("hz-80-in")}} {{mobile("")}} '>
        <div class='{{desktop("flex row reverse space top vt-80-in hz-80-in")}} {{mobile("hz-20-in")}} relative'>
            <div class='{{desktop("third_20 left-80")}}'>
                <div class='bg-white {{desktop("")}}'>
                    <div class=''>                
                        {% if service.cost or service.time or service.department %}
                        <div class='list radius-10 padding-20 w100 {{desktop("bg-white")}} {{mobile("bg-gray")}}'>
                            {% if service.cost %}
                            <div class='{{desktop("")}} flex row top h4 middle bottom-10'>
                                <i class='right-15 green upper nowrap p'>Coût :</i>
                                <span class='semibold'>{{service.cost}}</span>
                            </div>
                            {% endif %}
                            {% if service.time %}
                            <div class='{{desktop("")}} flex row top h4 middle bottom-10'>
                                <i class='right-15 green upper nowrap p'>Délai :</i>
                                <span class='semibold'>{{service.time}}</span>
                            </div>
                            {% endif %}
                            {% if service.department %}
                            <div class='{{desktop("")}} flex col top h4 middle bottom-10'>
                                <i class='right-15 green upper nowrap p'>Lieu :</i>
                                <span class=''>{{service.department}}</span>
                            </div>
                            {% endif %}
                            {% if service.type %}
                            <div class='{{desktop("")}} flex col top h4 middle bottom-10'>
                                <i class='right-15 green upper nowrap p'>Type :</i>
                                <span class=''>{{service.type.label}}</span>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <div class=' w100 {{desktop("")}} {{mobile("padding-20")}} text-left'>
                
                {#
                <div class='flex col left success-alt {{desktop("w100")}} {{mobile("")}}'>
                    {% if service.higher %}<span class='p-alt vt-5'>JURIDICTION SUPÉRIEURE : <strong class='p-alt semibold black'>{{service.higher.name}}</strong></span>{% endif %}
                    {% if service.president %}<span class='p-alt vt-5'>PRÉSIDENT : <strong class='p-alt semibold black'>{{service.president}}</strong></span>{% endif %}
                    {% if service.procurator %}<span class='p-alt vt-5'>PROCUREUR : <strong class='p-alt semibold black'>{{service.procurator}}</strong></span>{% endif %}
                </div>
                #}
                
                {% if service.description %}
                <h2><span class='h4 upper success-alt'>À Propos</span></h2>
                <p class='h4 text-justify'>{{service.description|nl2br}}</p>
                {% endif %}
                
                {% if service.pieces %}
                <h2 class='top-20'><span class='h4 upper success-alt'>Pièces à fournir</span></h2>
                <div class='article h4 text-justify'>{{service.pieces|raw}}</div>
                {% endif %}
                
            </div>
        </div>
    </div>
</div>
{% endblock %}