php-flasher/docs/pages/symfony.html

---
permalink: /symfony/
title: Symfony
description: Integrate PHPFlasher into your Symfony application to enhance user experience with flash notifications. This guide shows you how to add engaging messages after user actions.
framework: symfony
---

<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <!-- Table of contents - Desktop -->
        <div class="w-full bg-white border-b border-slate-100">
            <div class="px-2 py-4 flex items-center gap-4 overflow-x-auto no-scrollbar">
                <a href="#requirements" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Requirements</a>
                <span class="text-slate-200">|</span>
                <a href="#installation" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Installation</a>
                <span class="text-slate-200">|</span>
                <a href="#usage" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Usage</a>
                <span class="text-slate-200">|</span>
                <a href="#examples" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Examples</a>
                <span class="text-slate-200">|</span>
                <a href="#configuration" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Configuration</a>
                <span class="text-slate-200">|</span>
                <a href="#presets" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Presets</a>
                <span class="text-slate-200">|</span>
                <a href="#translations" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Translations</a>
            </div>
        </div>

        <!-- Content area -->
        <div class="prose prose-slate max-w-none p-6 md:p-8">
            <!-- Requirements Section -->
            <div id="requirements" class="scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Requirements</h2>
                <p class="mb-4">
                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    helps you easily add flash notifications to your <strong>Symfony</strong> projects, improving user feedback with minimal setup.
                </p>

                <!-- Version requirements -->
                <div class="mb-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- PHP Card -->
                        <div class="bg-white rounded-lg border border-slate-200 p-4">
                            <div class="flex items-center">
                                <div class="bg-indigo-100 rounded-full h-10 w-10 flex items-center justify-center">
                                    <i class="fa-brands fa-php text-indigo-600 text-lg"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-xs uppercase tracking-wider text-slate-500 font-medium">Required</div>
                                    <h4 class="font-semibold text-slate-800">PHP Version</h4>
                                    <div class="inline-block px-2 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full mt-1">
                                        v8.2 or higher
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Symfony Card -->
                        <div class="bg-white rounded-lg border border-slate-200 p-4">
                            <div class="flex items-center">
                                <div class="bg-slate-800 rounded-full h-10 w-10 flex items-center justify-center">
                                    <i class="fa-brands fa-symfony text-white text-lg"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-xs uppercase tracking-wider text-slate-500 font-medium">Required</div>
                                    <h4 class="font-semibold text-slate-800">Symfony Version</h4>
                                    <div class="inline-block px-2 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full mt-1">
                                        v7.0 or higher
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Legacy version note -->
                    <div class="bg-amber-50 border-l-4 border-amber-400 rounded-r-lg p-4 mt-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-sm font-medium text-amber-800">Using older PHP or Symfony versions?</h4>
                                <p class="text-sm text-amber-700 mt-1">
                                    If you need to use PHP &lt; v8.2 or Symfony &lt; v7.0, use
                                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v1</strong> instead.
                                    It supports PHP ≥ v5.3 and Symfony ≥ v2.0.
                                    <a href="https://php-flasher.github.io/" class="text-amber-800 underline hover:text-amber-900">
                                        Check out the v1 documentation here
                                    </a>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Installation Section -->
            <div id="installation" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Installation</h2>
                <p class="mb-4">
                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> is modular. You can install only the parts you need.
                </p>
                <p class="mb-4">Run this command to install it:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-4">
                    <div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex space-x-1.5 mr-3">
                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                            </div>
                            <span class="text-white text-sm">Terminal</span>
                        </div>
                        <div class="text-slate-400 text-sm">Installation</div>
                    </div>
                    <div class="p-4 bg-slate-900">
                        <pre class="text-sm text-slate-200"><code class="language-bash">composer require php-flasher/flasher-symfony</code></pre>
                    </div>
                </div>

                <p class="mb-4">After installing, run this command to set up the required assets:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex space-x-1.5 mr-3">
                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                            </div>
                            <span class="text-white text-sm">Terminal</span>
                        </div>
                        <div class="text-slate-400 text-sm">Setup Assets</div>
                    </div>
                    <div class="p-4 bg-slate-900">
                        <pre class="text-sm text-slate-200"><code class="language-bash">php bin/console flasher:install</code></pre>
                    </div>
                </div>

                <!-- Setup info -->
                <div class="bg-slate-50 border-l-4 border-indigo-400 rounded-r-lg p-4 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-clock text-indigo-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-slate-800">Ready in under a minute!</h4>
                            <p class="text-sm text-slate-600 mt-1">
                                That's it! No need for complex configuration -
                                <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> works right out of the box with sensible defaults.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Best Practice Tip -->
                <div class="bg-slate-50 border-l-4 border-green-500 rounded-r-lg p-4 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-check-circle text-green-600 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-slate-800">Best Practice</h4>
                            <p class="text-sm text-slate-600 mt-1">
                                Commit the installed assets to your version control system to ensure everyone on your team has the same notification experience.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Usage Section -->
            <div id="usage" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Usage</h2>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Basic Usage</h3>

                <p class="mb-4">
                    Here's a basic example of using <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> in a Symfony controller:
                </p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">ProductController.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ProductController extends AbstractController
{
    #[Route('/product/create', name: 'app_product_create')]
    public function create(): Response
    {
        // Your logic to create a product

        // Add a success notification
        flash()->success('Product created successfully!');

        return $this->redirectToRoute('app_product_list');
    }
}</code></pre>
                    </div>
                </div>

                <!-- Pro tip box -->
                <div class="bg-slate-50 rounded-lg p-4 mb-6 border border-slate-200">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-slate-800">Pro Tip: Two Ways to Use PHPFlasher</h4>
                            <p class="text-sm text-slate-600 mt-1">
                                <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                                provides two ways to create notifications:
                            </p>
                            <ul class="mt-2 space-y-1 text-sm text-slate-600">
                                <li class="flex items-center">
                                    <i class="fa-solid fa-check text-green-600 mr-2 text-xs"></i>
                                    <strong>Helper function:</strong> <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700 text-xs">flash()->success('Message');</code>
                                </li>
                                <li class="flex items-center">
                                    <i class="fa-solid fa-check text-green-600 mr-2 text-xs"></i>
                                    <strong>Dependency injection:</strong> <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700 text-xs">private FlasherInterface $flasher</code>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Notification Types</h3>
                <p class="mb-4"><strong><span class="text-indigo-900">PHP<span
                    class="text-indigo-500">Flasher</span></span></strong> supports different types of notifications:
                </p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">NotificationTypes.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">// Success message
flash()->success('Your changes have been saved!');

// Error message
flash()->error('Something went wrong!');

// Warning message
flash()->warning('Please review your data before proceeding.');

// Info message
flash()->info('The system will be down for maintenance tonight.');</code></pre>
                    </div>
                </div>

                <!-- Notification types showcase -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-green-700">
                            <i class="fa-solid fa-circle-check"></i>
                            <strong class="text-slate-800">Success</strong>
                        </div>
                        <p class="text-slate-600 text-sm">Your changes have been saved!</p>
                    </div>

                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-red-600">
                            <i class="fa-solid fa-circle-exclamation"></i>
                            <strong class="text-slate-800">Error</strong>
                        </div>
                        <p class="text-slate-600 text-sm">Something went wrong!</p>
                    </div>

                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-amber-600">
                            <i class="fa-solid fa-triangle-exclamation"></i>
                            <strong class="text-slate-800">Warning</strong>
                        </div>
                        <p class="text-slate-600 text-sm">Please review your data before proceeding.</p>
                    </div>

                    <div class="p-4 border border-slate-200 rounded-lg bg-white">
                        <div class="flex items-center gap-3 mb-2 text-indigo-600">
                            <i class="fa-solid fa-circle-info"></i>
                            <strong class="text-slate-800">Info</strong>
                        </div>
                        <p class="text-slate-600 text-sm">The system will be down for maintenance tonight.</p>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Adding a Title</h3>
                <p class="mb-4">You can add a title to your notifications:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">Title.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">flash()->success('Your profile has been updated successfully.', 'Profile Updated');</code></pre>
                    </div>
                </div>

                <!-- Example with title -->
                <div class="bg-slate-50 border-l-4 border-green-500 rounded-r-lg p-4 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-circle-check text-green-600 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-slate-800">Profile Updated</h4>
                            <p class="text-sm text-slate-600 mt-1">Your profile has been updated successfully.</p>
                        </div>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Notification Options</h3>
                <p class="mb-4">Customize your notifications with various options:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">Options.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">flash()
    ->option('position', 'top-center')  // Position on the screen
    ->option('timeout', 5000)           // How long to display (milliseconds)
    ->option('rtl', true)               // Right-to-left support
    ->success('Your changes have been saved!');</code></pre>
                    </div>
                </div>

                <!-- Options demo -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    <div class="bg-white rounded-lg border border-slate-200 p-4">
                        <h4 class="text-sm font-medium text-slate-800 mb-2 flex items-center">
                            <i class="fa-solid fa-arrows-to-dot text-indigo-600 mr-2"></i>
                            Positioning
                        </h4>
                        <div class="flex flex-wrap gap-2 text-xs">
                            <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">top-right</span>
                            <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">top-left</span>
                            <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">top-center</span>
                            <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">bottom-right</span>
                            <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">bottom-left</span>
                            <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">bottom-center</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-slate-200 p-4">
                        <h4 class="text-sm font-medium text-slate-800 mb-2 flex items-center">
                            <i class="fa-solid fa-clock text-indigo-600 mr-2"></i>
                            Timing
                        </h4>
                        <div class="text-xs text-slate-600">
                            <p>Control how long notifications display with the <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700">timeout</code> option (milliseconds).</p>
                            <p class="mt-1">Set to <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700">0</code> to require manual dismissal.</p>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-slate-200 p-4">
                        <h4 class="text-sm font-medium text-slate-800 mb-2 flex items-center">
                            <i class="fa-solid fa-wand-magic-sparkles text-indigo-600 mr-2"></i>
                            Animations
                        </h4>
                        <div class="text-xs text-slate-600">
                            <p>Choose from various animations:</p>
                            <div class="flex flex-wrap gap-2 mt-1">
                                <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">fade</span>
                                <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">slide</span>
                                <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">zoom</span>
                                <span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">flip</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Common Examples Section -->
            <div id="examples" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Common Examples</h2>

                <p class="mb-4">
                    Here are some common examples of using <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> in your Symfony applications.
                </p>

                <!-- CRUD Examples -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">CRUD Operations</h3>
                <p class="mb-4">A complete example showing notifications for Create, Read, Update, and Delete operations:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">ArticleController.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Controller;

use App\Entity\Article;
use App\Form\ArticleType;
use App\Repository\ArticleRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ArticleController extends AbstractController
{
    #[Route('/article/new', name: 'app_article_new', methods: ['GET', 'POST'])]
    public function new(Request $request, ArticleRepository $articleRepository): Response
    {
        $article = new Article();
        $form = $this->createForm(ArticleType::class, $article);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $articleRepository->save($article, true);
            flash()->success('Article created successfully!');

            return $this->redirectToRoute('app_article_index', [], Response::HTTP_SEE_OTHER);
        }

        return $this->render('article/new.html.twig', [
            'article' => $article,
            'form' => $form,
        ]);
    }

    #[Route('/article/{id}/edit', name: 'app_article_edit', methods: ['GET', 'POST'])]
    public function edit(Request $request, Article $article, ArticleRepository $articleRepository): Response
    {
        $form = $this->createForm(ArticleType::class, $article);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $articleRepository->save($article, true);
            flash()->success('Article updated successfully!');

            return $this->redirectToRoute('app_article_index', [], Response::HTTP_SEE_OTHER);
        }

        return $this->render('article/edit.html.twig', [
            'article' => $article,
            'form' => $form,
        ]);
    }

    #[Route('/article/{id}', name: 'app_article_delete', methods: ['POST'])]
    public function delete(Request $request, Article $article, ArticleRepository $articleRepository): Response
    {
        if ($this->isCsrfTokenValid('delete'.$article->getId(), $request->request->get('_token'))) {
            $articleRepository->remove($article, true);
            flash()->success('Article deleted successfully!');
        } else {
            flash()->error('Invalid token. Please try again.');
        }

        return $this->redirectToRoute('app_article_index', [], Response::HTTP_SEE_OTHER);
    }
}</code></pre>
                    </div>
                </div>

                <!-- Form Validation Example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Form Validation</h3>
                <p class="mb-4">Display validation errors to users:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">RegistrationController.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Controller;

use App\Entity\User;
use App\Form\RegistrationType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class RegistrationController extends AbstractController
{
    #[Route('/register', name: 'app_register')]
    public function register(Request $request): Response
    {
        $user = new User();
        $form = $this->createForm(RegistrationType::class, $user);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            // Save user logic here
            flash()->success('Registration successful! Please log in.');

            return $this->redirectToRoute('app_login');
        }

        if ($form->isSubmitted() && !$form->isValid()) {
            flash()->error('Please correct the errors in the form.');
        }

        return $this->render('registration/register.html.twig', [
            'form' => $form,
        ]);
    }
}</code></pre>
                    </div>
                </div>

                <!-- AJAX Example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">AJAX Requests</h3>
                <p class="mb-4">Using PHPFlasher with AJAX requests:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">APIController.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">&lt;?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;

class ApiController extends AbstractController
{
    #[Route('/api/update', name: 'api_update', methods: ['POST'])]
    public function update(Request $request): JsonResponse
    {
        // Process the request
        $data = json_decode($request->getContent(), true);

        // Your business logic here

        // Flash messages will be rendered in the response
        flash()->success('Data updated successfully!');

        return $this->json(['status' => 'success']);
    }
}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Configuration Section -->
            <div id="configuration" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Configuration</h2>

                <p class="mb-4">
                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    can be configured to customize its behavior. The configuration file is located at
                    <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">config/packages/flasher.yaml</code>.
                </p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex space-x-1.5 mr-3">
                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                            </div>
                            <span class="text-white text-sm">flasher.yaml</span>
                        </div>
                        <div class="text-slate-400 text-sm">Configuration</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># config/packages/flasher.yaml

flasher:
    main:
        filter:
            # Filter flash messages by priority or criteria
            priority: ~

        # Limit the number of flash messages displayed
        limit: ~

        # Map Flash messages to specific criteria
        map: []

        # Automatically inject Flasher scripts into your HTML
        inject_assets: true

        # Use bulma CSS framework
        use_bulma: false

        # Use tailwind CSS framework
        use_tailwind: false

        # Use bootstrap CSS framework
        use_bootstrap: false

        # Default flash notification options
        options:
            # Animation: fade, slide, zoom, flip, bounce, etc.
            animation: true

            # Close button on notifications
            close_button: false

            # Display progress bar
            progress_bar: true

            # Notification position: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
            position: top-right

            # Right-to-left support
            rtl: false

            # Time before notification auto-hides (in milliseconds)
            timeout: 5000

        # Translate flash messages
        translate: true

        # Flash messages translation domain
        translation_domain: flasher

        # Default rendering context
        default_context: ~

        # Available rendering contexts
        contexts: []</code></pre>
                    </div>
                </div>
            </div>

            <!-- Presets Section -->
            <div id="presets" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Presets</h2>

                <p class="mb-4">
                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    provides configuration presets for different notification styles.
                </p>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Available Presets</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div class="p-4 border border-slate-200 rounded-lg">
                        <h4 class="font-semibold text-slate-800 mb-2">Default</h4>
                        <p class="text-sm text-slate-600">Balanced notifications with standard animations and positioning.</p>
                        <div class="mt-3 p-3 bg-slate-50 rounded">
                            <code class="text-xs text-slate-700">flasher: default</code>
                        </div>
                    </div>

                    <div class="p-4 border border-slate-200 rounded-lg">
                        <h4 class="font-semibold text-slate-800 mb-2">Minimal</h4>
                        <p class="text-sm text-slate-600">Clean notifications with minimal styling and effects.</p>
                        <div class="mt-3 p-3 bg-slate-50 rounded">
                            <code class="text-xs text-slate-700">flasher: minimal</code>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Translations Section -->
            <div id="translations" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 mb-4">Translations</h2>

                <p class="mb-4">
                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    supports translation of flash messages using Symfony's translation component.
                </p>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Enabling Translations</h3>
                <p class="mb-4">To enable translations, set the <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">translate</code> option to <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">true</code> in your configuration:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">flasher.yaml</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># config/packages/flasher.yaml

flasher:
    translate: true
    translation_domain: flasher</code></pre>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Creating Translation Files</h3>
                <p class="mb-4">Create translation files in the <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">translations/</code> directory:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">translations/flasher.en.yaml</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># translations/flasher.en.yaml
success:
    resource_created: '{resource} created successfully.'
    resource_updated: '{resource} updated successfully.'
    resource_deleted: '{resource} deleted successfully.'

error:
    general: 'An error occurred. Please try again.'
    not_found: '{resource} not found.'
    unauthorized: 'You are not authorized to perform this action.'

info:
    welcome: 'Welcome back!'
    maintenance: 'The system will be down for maintenance tonight.'

warning:
    review_data: 'Please review your data before proceeding.'
    unsaved_changes: 'You have unsaved changes. Are you sure you want to leave?'</code></pre>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Using Translated Messages</h3>
                <p class="mb-4">Use translation keys in your controllers:</p>

                <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white text-sm">ProductController.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">use Symfony\Component\HttpFoundation\Response;

class ProductController extends AbstractController
{
    public function create(): Response
    {
        // Your logic to create a product

        // Use translation key
        flash('resource_created', ['resource' => 'Product'])->success();

        return $this->redirectToRoute('app_product_list');
    }
}</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>