@extends('layouts.default')

@section('title', __('seo.projects.title'))
@section('meta_description', __('seo.projects.description'))
@section('canonical', route('projects'))

@section('content')
    <style>
        /* Animation d'apparition */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        /* Animation de disparition */
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(10px);
            }
        }

        .fade-out {
            animation: fadeOut 0.5s ease-in-out;
        }

    </style>
    <section class="header-page projects-header-bg">
        <div class="tag-header">{{ __('project.tag.header') }}</div>
        <h1 class="title-header">{{ __('project.header') }}</h1>
    </section>

    <section class="tree-details">
        <div class="container-tree">
            <a href="{{ route('home') }}" class="btn-back w-inline-block">
                <div class="btn-back-name">{{ __('global.tree.back-btn') }}</div>
            </a>
            <div class="tree-text">
                <div class="tree-arbo">
                    <a href="{{ route('home') }}">{{ __('global.navigation.home') }}</a> &nbsp;&gt;&nbsp; <span
                        class="tree-arbo-current">{{ __('global.navigation.projects') }}</span></div>
            </div>
        </div>
    </section>

    @livewire('projects-filter')

@endsection

@section('scripts')
    <script>
        document.addEventListener('livewire:load', function () {
            Livewire.hook('message.processed', (message, component) => {
                component.el.querySelectorAll('.project-cards').forEach((element) => {
                    element.classList.remove('fade-out');
                    element.classList.add('fade-in');
                });
            });

            Livewire.hook('message.sent', (message, component) => {
                component.el.querySelectorAll('.project-cards').forEach((element) => {
                    element.classList.remove('fade-in');
                    element.classList.add('fade-out');
                });
            });
        });

    </script>
@endsection