e-ticket/templates/home/organizer_detail.html.twig

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

{% block title %}{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }} - E-Ticket{% endblock %}
{% block description %}Decouvrez les evenements de {{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }} sur E-Ticket{% endblock %}
{% block og_image %}
    {% if organizer.logoName %}
        <meta property="og:image" content="{{ absolute_url('/uploads/logos/' ~ organizer.logoName) }}">
    {% else %}
        <meta property="og:image" content="https://ticket.e-cosplay.fr/logo.png">
    {% endif %}
{% endblock %}

{% block body %}
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">

    <section class="relative bg-white border-b-8 border-gray-900 px-4 pt-20 pb-16">
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
            <span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">ORGA</span>
        </div>

        <div class="max-w-4xl mx-auto relative z-10">
            <a href="{{ path('app_organizers') }}" class="inline-flex items-center gap-2 text-sm font-black uppercase tracking-widest text-gray-500 hover:text-gray-900 transition-colors mb-8">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"/></svg>
                Retour aux organisateurs
            </a>

            <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
                {% if organizer.logoName %}
                <div class="border-4 border-gray-900 flex items-center justify-center overflow-hidden bg-white p-3 shadow-[6px_6px_0px_rgba(0,0,0,1)]">
                    <img src="{{ ('/uploads/logos/' ~ organizer.logoName) | imagine_filter('organizer_logo') }}" alt="{{ organizer.companyName }}" class="h-[140px] w-auto object-contain">
                </div>
                {% else %}
                <div class="w-32 h-32 bg-yellow-400 border-4 border-gray-900 flex items-center justify-center shadow-[6px_6px_0px_rgba(0,0,0,1)]">
                    <span class="text-5xl font-black">{{ organizer.firstName|first|upper }}{{ organizer.lastName|first|upper }}</span>
                </div>
                {% endif %}

                <div class="text-center md:text-left">
                    <h1 class="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-[0.85] mb-4">
                        {{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}
                    </h1>
                    {% if organizer.city %}
                    <p class="text-sm font-black uppercase tracking-widest text-gray-400">
                        {{ organizer.postalCode }} {{ organizer.city }}
                    </p>
                    {% endif %}

                    {% include 'components/_social_icons.html.twig' with {organizer: organizer, class: 'mt-4 flex-wrap justify-center md:justify-start'} only %}
                </div>
            </div>
        </div>
    </section>

    <section class="py-12 px-4">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] overflow-hidden">
                <div class="section-header">
                    <h2 class="text-sm font-black uppercase tracking-widest text-white">Informations</h2>
                </div>
                <div class="p-6">
                    <table class="detail-table">
                        <thead>
                            <tr>
                                <th class="text-left text-xs font-black uppercase tracking-widest text-gray-400">Detail</th>
                                <th class="text-left text-xs font-black uppercase tracking-widest text-gray-400">Valeur</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="font-black text-xs uppercase tracking-widest text-gray-400">Raison sociale</td>
                                <td class="text-sm font-bold">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</td>
                            </tr>
                            {% if organizer.siret %}
                            <tr>
                                <td class="font-black text-xs uppercase tracking-widest text-gray-400">SIRET</td>
                                <td class="text-sm font-mono font-bold">{{ organizer.siret }}</td>
                            </tr>
                            {% endif %}
                            <tr>
                                <td class="font-black text-xs uppercase tracking-widest text-gray-400">Email</td>
                                <td class="text-sm font-bold">
                                    <a href="mailto:{{ organizer.email }}" class="text-indigo-800 underline hover:text-indigo-950">{{ organizer.email }}</a>
                                </td>
                            </tr>
                            {% if organizer.city %}
                            <tr>
                                <td class="font-black text-xs uppercase tracking-widest text-gray-400">Adresse</td>
                                <td class="text-sm font-bold">
                                    {% if organizer.address %}{{ organizer.address }}, {% endif %}{{ organizer.postalCode }} {{ organizer.city }}
                                </td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-16 px-4">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] overflow-hidden">
                <div class="section-header">
                    <h2 class="text-sm font-black uppercase tracking-widest text-white">Evenements ({{ events|length }})</h2>
                </div>
                {% if events|length > 0 %}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-0">
                    {% for event in events %}
                    <a href="{{ path('app_event_detail', {orgaSlug: organizer.slug, id: event.id, eventSlug: event.slug}) }}" class="group p-6 border-b border-r border-gray-200 hover:bg-gray-50 transition-colors block">
                        <h3 class="font-black text-sm uppercase group-hover:text-indigo-600 transition-colors">{{ event.title }}</h3>
                        <p class="text-xs font-bold text-gray-500 mt-1">{{ event.startAt|date('d/m/Y') }} &bull; {{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</p>
                        <p class="text-xs font-bold text-gray-400 mt-1">{{ event.zipcode }} {{ event.city }}</p>
                    </a>
                    {% endfor %}
                </div>
                {% else %}
                <div class="p-12 text-center">
                    <p class="text-gray-400 font-black text-lg uppercase">Aucun evenement pour le moment</p>
                    <p class="text-gray-500 font-bold mt-2 italic text-sm">Les evenements de cet organisateur apparaitront ici.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </section>

</div>
{% endblock %}