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

{% block title %}{{ reference.name }} - Références ARA Solutions{% endblock %}
{% block meta_description %}{{ reference.description }}{% endblock %}

{% block body %}
{# Header #}
<section class="bg-gradient-to-br from-primary-dark to-primary pt-28 pb-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <a href="{{ path('app_references') }}" class="inline-flex items-center text-sm text-gray-300 hover:text-white transition-colors mb-4">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Retour aux références
        </a>
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white">{{ reference.name }}</h1>
        {% set category_labels = {'application': 'Application', 'site-internet': 'Site internet', 'solution': 'Solution'} %}
        <div class="mt-3 flex items-center gap-3">
            <span class="inline-block px-3 py-1 text-xs font-medium rounded-full
                {% if reference.category == 'application' %}bg-blue-500/20 text-blue-200
                {% elseif reference.category == 'solution' %}bg-purple-500/20 text-purple-200
                {% else %}bg-emerald-500/20 text-emerald-200{% endif %}">
                {{ category_labels[reference.category]|default(reference.category|capitalize) }}
            </span>
        </div>
    </div>
</section>

{# Content #}
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <div class="lg:col-span-2">
                <div class="aspect-video rounded-xl overflow-hidden bg-gray-100 shadow-sm border border-gray-100">
                    <img src="{{ asset('images/' ~ reference.image) }}"
                         alt="{{ reference.name }}"
                         class="w-full h-full object-cover">
                </div>
            </div>

            <div>
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 sticky top-24">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Détails du projet</h2>

                    <div class="space-y-4">
                        <div>
                            <h3 class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Description</h3>
                            <p class="text-sm text-gray-600 leading-relaxed">{{ reference.description }}</p>
                        </div>

                        <div>
                            <h3 class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Catégorie</h3>
                            <p class="text-sm text-gray-600">{{ category_labels[reference.category]|default(reference.category|capitalize) }}</p>
                        </div>

                        {% if reference.tags is defined and reference.tags is not empty %}
                        <div>
                            <h3 class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-2">Thèmes</h3>
                            <div class="flex flex-wrap gap-1.5">
                                {% for tag in reference.tags %}
                                <span class="px-2.5 py-1 text-xs bg-surface rounded-md text-gray-600">{{ tag }}</span>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}

                        {% if reference.url and reference.url != '#' %}
                        <div class="pt-4 border-t border-gray-100">
                            <a href="{{ reference.url }}" target="_blank" rel="noopener noreferrer"
                               class="inline-flex items-center w-full justify-center px-4 py-2.5 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dark transition-colors">
                                Visiter le site
                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}