<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placeholder Syntax Demo - Old vs New</title>
</head>
<body>
    <h1>Placeholder Syntax Comparison</h1>

    <section>
        <h2>1. Simple Variables</h2>

        <h3>Old Syntax (Still Works):</h3>
        <p>Title: {{ title }}</p>
        <p>Name: {{ name }}</p>
        <p>Email: {{ email }}</p>

        <h3>New Syntax (Tempest Style - Recommended):</h3>
        <p>Title: {{ $title }}</p>
        <p>Name: {{ $name }}</p>
        <p>Email: {{ $email }}</p>
    </section>

    <section>
        <h2>2. Object Properties</h2>

        <h3>Old Syntax (Still Works):</h3>
        <p>User ID: {{ user.id }}</p>
        <p>User Name: {{ user.name }}</p>
        <p>User Email: {{ user.email }}</p>

        <h3>New Syntax (Tempest Style - Recommended):</h3>
        <p>User ID: {{ $user.id }}</p>
        <p>User Name: {{ $user.name }}</p>
        <p>User Email: {{ $user.email }}</p>
    </section>

    <section>
        <h2>3. Method Calls</h2>

        <h3>Old Syntax (Still Works):</h3>
        <p>Formatted Date: {{ date.format('Y-m-d') }}</p>
        <p>Uppercase Name: {{ name.toUpperCase() }}</p>

        <h3>New Syntax (Tempest Style - Recommended):</h3>
        <p>Formatted Date: {{ $date.format('Y-m-d') }}</p>
        <p>Uppercase Name: {{ $name.toUpperCase() }}</p>
    </section>

    <section>
        <h2>4. Raw HTML (Triple Braces)</h2>

        <h3>Old Syntax (Still Works):</h3>
        <div>{{{ htmlContent }}}</div>

        <h3>New Syntax (Tempest Style - Recommended):</h3>
        <div>{{{ $htmlContent }}}</div>
    </section>

    <section>
        <h2>5. Template Functions (No $ Prefix - Functions are NOT variables)</h2>
        <p>Current Date: {{ date('Y-m-d') }}</p>
        <p>Formatted Currency: {{ format_currency(1999.99) }}</p>
        <p>Uppercase: {{ strtoupper('hello world') }}</p>
    </section>

    <div style="margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-left: 4px solid #0066cc;">
        <h3>Migration Strategy</h3>
        <p><strong>Backwards Compatible:</strong> Both syntaxes work simultaneously.</p>
        <p><strong>Recommended:</strong> Use <code>{{ $variable }}</code> for new templates (Tempest Framework style).</p>
        <p><strong>Legacy:</strong> Old syntax <code>{{ variable }}</code> continues to work for existing templates.</p>
        <p><strong>Functions:</strong> Template functions remain without $ prefix: <code>{{ function() }}</code></p>
    </div>
</body>
</html>
