{% extends 'base.html.twig' %}

{# SEO gere par SeoService via la variable seo (base.html.twig) #}

{% block jsonld %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Service",
    "name": {{ service.title|json_encode|raw }},
    "description": {{ seo.description|default(service.shortDescription|default(''))|json_encode|raw }}
    {%- if service.image %},
    "image": "{{ absolute_url(asset('documents/medias/' ~ service.image.fileName)) }}"
    {%- endif %},
    "provider": {
        "@type": "Organization",
        "name": {{ site.name|default('Blog&Web')|json_encode|raw }}
    }
}
</script>
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {"@type": "ListItem", "position": 1, "name": "Accueil", "item": "{{ absolute_url(path('app_home')) }}"},
        {"@type": "ListItem", "position": 2, "name": "Services", "item": "{{ absolute_url(path('app_service_index')) }}"},
        {"@type": "ListItem", "position": 3, "name": {{ service.title|json_encode|raw }}}
    ]
}
</script>
{% endblock %}

{% block body %}
<div class="container py-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="{{ path('app_service_index') }}">Services</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ service.title }}</li>
        </ol>
    </nav>

    <article class="service-detail">
        <h1 class="title-one mb-4">{{ service.title }}</h1>

        {% if service.image %}
        <div class="service-detail__image mb-4">
            <img src="{{ asset('documents/medias/' ~ service.image.fileName) }}"
                 alt="{{ service.title }}"
                 class="img-fluid rounded"
                 loading="lazy">
        </div>
        {% endif %}

        {% if service.shortDescription %}
        <p class="lead text-muted mb-4">{{ service.shortDescription }}</p>
        {% endif %}

        <div class="content">
            {{ service.content|raw }}
        </div>
    </article>
</div>
{% endblock %}