{% extends "layout.html" %}
{% block content %}
    <div class="app-wrapper">
        <nav id="sidebar" class="sidebar">
            <div class="sidebar-header">
                <span onclick="initializeToggleButton()" style="cursor:pointer;color:#fff;"><span class="material-symbols-outlined">density_small</span></span>              
            </div>

            <ul class="menu-list">
                <li class="menu-header"><span class="material-symbols-outlined" title="Hello Ebi !">account_circle</span><span class="menu-text">Hello Ebi !</span></li>
                <li class="menu-divider"></li>
                <li class="menu-header"><span class="menu-text">Campaigns</span></li>
                <li>
                    <a href="/lci26/new-campaign" class="nav-link" data-file="/lci26/new-campaign" data-title="New Campaign" data-crumb="Campaigns / New">
                        <span class="material-symbols-outlined" title="New Campaign">add_circle</span><span class="menu-text">New Campaign</span>
                    </a>
                </li>
                <li>
                    <a href="/lci26/campaigns" class="nav-link" data-file="/lci26/campaigns" data-title="Manage Campaigns" data-crumb="Campaigns / Manage">
                        <span class="material-symbols-outlined" title="Manage Campaigns">cards_stack</span><span class="menu-text">Manage Campaigns</span>
                    </a>
                </li>

                <li class="menu-header"><span class="menu-text">Applications</span><span class="menu-icon-only"><i class="fa-solid fa-envelope"></i></span></li>
                <li>
                    <a href="/lci26/applications" class="nav-link" data-file="/lci26/applications" data-title="Applications" data-crumb="Applications">
                        <span class="material-symbols-outlined" title="Manage Applications">bookmark_stacks</span><span class="menu-text">Manage Applications</span>
                    </a>
                </li>
                <li class="menu-divider"></li>
                <li class="menu-bottom">
                    <a href="/lci26/logout" class="nav-link logout" data-file="/lci26/logout" data-title="Login" data-crumb="">
                        <span class="material-symbols-outlined" title="Logout">logout</span><span class="menu-text">Logout</span>
                    </a>
                </li>
            </ul>
        </nav>

        <main class="main-body">
            <header class="top-header">
                <div class="header-left">
                    <button id="sidebar-toggle" class="toggle-btn"><span class="material-symbols-outlined">density_small</span></button>
                    <a href="/lci26/admin" class="logo" aria-label="Home"></a>
                </div>
                <div class="header-right">
                    <h2 class="page-title" id="page-title">Welcome</h2>
                </div>
            </header>

            <div id="content-area" class="content-container">
                
                {{ $page_content | raw }}

                {% if empty($page_content) %}
                    <div class="placeholder-content">
                        <h3>Welcome to the Dashboard</h3>
                        <p>Select an item from the menu to begin.</p>
                    </div>
                {% endif %}

            </div>
        </main>
    </div>
{% endblock %}