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

{% block title %}Instants — Pipou{% endblock %}
{% block theme_color %}{{ moment ? '#000000' : '#f5f5f4' }}{% endblock %}
{% block status_bar_style %}{{ moment ? 'black-translucent' : 'default' }}{% endblock %}
{% block body_class %}{{ moment ? 'bg-black' : 'bg-stone-100 dark:bg-stone-950' }}{% endblock %}

{% block bottom_nav %}{% endblock %}
{% block body_main_padding %}{% endblock %}

{% block body %}
<div class="flex flex-col w-full min-h-dvh bg-stone-100 dark:bg-stone-950">

    {% if moment %}
    <div class="relative min-h-dvh w-full shrink-0 flex flex-col text-white"
         style="padding-top: var(--safe-top); padding-bottom: var(--safe-bottom)">

        <img src="{{ vich_uploader_asset(moment, 'imageFile') }}"
             alt="Instant de {{ moment.author.displayName }}"
             class="absolute inset-0 w-full h-full object-cover">

        <div class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black/60 to-transparent pointer-events-none"></div>
        <div class="absolute inset-x-0 bottom-0 min-h-[14rem] bg-gradient-to-t from-black/80 via-black/40 to-transparent pointer-events-none"></div>

        <div class="relative z-10 flex items-center px-4 pt-3">
            <a href="{{ path('front.home') }}"
               class="flex items-center justify-center size-10 rounded-full bg-black/30 backdrop-blur-sm text-white active:bg-black/50 transition-colors">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>
                </svg>
            </a>
            <span class="ml-3 text-white/60 text-xs font-semibold uppercase tracking-widest">En ce moment</span>
        </div>

        <div class="flex-1 min-h-[30vh]"></div>

        <div class="relative z-10 px-5 pb-6">

            <div class="flex items-center gap-3 mb-6">
                <div class="size-11 rounded-full bg-gradient-to-br from-rose-400 to-pink-600 flex items-center justify-center text-base font-bold text-white shadow-lg shrink-0">
                    {{ moment.author.displayName|slice(0,1)|upper }}
                </div>
                <div>
                    <p class="text-white font-semibold text-base leading-tight">{{ moment.author.displayName }}</p>
                    <p class="text-white/50 text-xs mt-0.5">{{ moment.createdAt|format_datetime(pattern="d MMMM 'à' HH:mm", locale="fr")|lower }}</p>
                </div>
            </div>

            {% if moment.description %}
                <p class="text-white/85 text-sm leading-relaxed mb-6 font-medium">{{ moment.description }}</p>
            {% endif %}

            <a href="{{ path('front.moment.new') }}"
               class="flex items-center justify-center gap-2.5 w-full rounded-2xl bg-rose-500 hover:bg-rose-600 active:bg-rose-700 active:scale-[0.98] text-white font-bold text-base py-4 transition-all shadow-xl shadow-rose-900/40">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"/>
                </svg>
                Partager un instant
            </a>

        </div>

    </div>

    {% else %}

    <div class="flex flex-col{{ history ? '' : ' flex-1 min-h-dvh' }}" style="padding-top: var(--safe-top); padding-bottom: var(--safe-bottom)">
        <div class="flex items-center px-4 pt-3 pb-2">
            <a href="{{ path('front.home') }}"
               class="flex items-center justify-center size-10 rounded-full bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-600 text-stone-700 dark:text-stone-200 active:scale-95 transition-transform">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>
                </svg>
            </a>
            <span class="ml-3 text-xs font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500">Instants</span>
        </div>

        <div class="{{ history ? 'px-6 py-6' : 'flex-1 flex flex-col items-center justify-center px-6 py-8' }}">
            <a href="{{ path('front.moment.new') }}"
               class="w-full max-w-sm block rounded-2xl border-2 border-dashed border-stone-200 dark:border-stone-600 bg-white/60 dark:bg-stone-900/50 p-12 text-center hover:border-rose-200 dark:hover:border-rose-700 hover:bg-rose-50/40 dark:hover:bg-rose-950/20 transition-all active:scale-[0.98]">
                <div class="size-16 rounded-2xl bg-rose-100 dark:bg-rose-950/40 flex items-center justify-center mx-auto mb-4">
                    <svg class="size-8 text-rose-400 dark:text-rose-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"/>
                    </svg>
                </div>
                <p class="text-stone-800 dark:text-stone-100 font-semibold">Partagez le premier instant</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm mt-1">Appuyez pour choisir une photo</p>
            </a>
        </div>
    </div>

    {% endif %}

    {% if history %}
    <section class="border-t border-stone-200/80 dark:border-stone-800 bg-stone-100 dark:bg-stone-950 px-4 pt-6 pb-4">
        <p class="text-[10px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500 mb-3">Historique</p>
        <div class="grid grid-cols-3 gap-2">
            {% for item in history %}
            <div class="rounded-xl overflow-hidden relative bg-stone-200 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 group">
                <img src="{{ vich_uploader_asset(item, 'imageFile') }}"
                    alt="Instant du {{ item.createdAt|date('d/m') }}"
                    class="w-full aspect-square object-cover opacity-90 group-hover:opacity-100 group-hover:scale-105 transition-all duration-300">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
                <div class="absolute bottom-0 left-0 right-0 p-2">
                    <p class="text-white text-[9px] font-semibold leading-tight truncate">{{ item.author.displayName }}</p>
                    <p class="text-white/70 text-[8px]">{{ item.createdAt|date('d/m/y') }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

</div>
{% endblock %}