<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Slot System Usage Examples</title>
</head>
<body>
    <h1>LiveComponents Slot System - Usage Examples</h1>

    <!-- Example 1: Card Component with Custom Slots -->
    <component name="card" id="user-profile-card">
        <slot name="header">
            <h2>User Profile</h2>
            <p class="subtitle">John Doe</p>
        </slot>

        <slot name="body">
            <div class="user-details">
                <p><strong>Email:</strong> john@example.com</p>
                <p><strong>Role:</strong> Administrator</p>
                <p><strong>Member since:</strong> January 2024</p>
            </div>
        </slot>

        <slot name="footer">
            <button class="btn-primary">Edit Profile</button>
            <button class="btn-secondary">View Activity</button>
        </slot>
    </component>

    <!-- Example 2: Modal Component with Scoped Slots -->
    <component name="modal" id="confirm-delete-modal">
        <slot name="title">
            <h3>Confirm Delete</h3>
        </slot>

        <slot name="content">
            <p>Are you sure you want to delete this item?</p>
            <p class="warning">This action cannot be undone.</p>
            <!-- Scoped slot: access component data -->
            <p><small>Modal ID: {context.modalId}</small></p>
        </slot>

        <slot name="actions">
            <!-- Use closeFunction from component context -->
            <button onclick="{context.closeFunction}">Cancel</button>
            <button class="btn-danger">Delete</button>
        </slot>
    </component>

    <!-- Example 3: Layout Component with Multiple Slots -->
    <component name="layout" id="dashboard-layout">
        <slot name="header">
            <header class="app-header">
                <h1>My Application</h1>
                <nav>...</nav>
            </header>
        </slot>

        <slot name="sidebar">
            <!-- Scoped slot: access layout dimensions -->
            <aside style="width: {context.sidebarWidth}">
                <nav class="sidebar-nav">
                    <ul>
                        <li><a href="/dashboard">Dashboard</a></li>
                        <li><a href="/users">Users</a></li>
                        <li><a href="/settings">Settings</a></li>
                    </ul>
                </nav>
            </aside>
        </slot>

        <slot name="main">
            <main class="main-content">
                <h2>Dashboard</h2>
                <p>Welcome to your dashboard!</p>
            </main>
        </slot>

        <slot name="footer">
            <footer class="app-footer">
                <p>&copy; 2025 My Application</p>
            </footer>
        </slot>
    </component>

    <!-- Example 4: Container Component with Default Slot -->
    <component name="container" id="content-wrapper">
        <slot name="title">
            <h2>Content Container</h2>
        </slot>

        <!-- Default slot: unnamed content -->
        <h1>Welcome to the Platform</h1>
        <p>This content goes into the default slot.</p>
        <p>Any content not assigned to a named slot appears here.</p>

        <slot name="actions">
            <button class="btn-primary">Get Started</button>
            <button class="btn-secondary">Learn More</button>
        </slot>
    </component>

    <!-- Example 5: Nested Components with Slots -->
    <component name="layout" id="app-layout">
        <slot name="main">
            <!-- Card inside Layout -->
            <component name="card" id="nested-card">
                <slot name="header">
                    <h3>Nested Card in Layout</h3>
                </slot>

                <slot name="body">
                    <p>This card is nested inside the layout's main slot.</p>
                    <p>Slots can be nested to create complex compositions.</p>
                </slot>
            </component>
        </slot>
    </component>

</body>
</html>
