<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% raw %}
<title>{{ title }}</title>
{% endraw %}

<link rel="icon" href="/static/{{ favicon }}" />
<link rel="stylesheet" href="/static/style.css"></head>
<script src="/static/script.js" defer></script>
<link id="highlight-js-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>


<body>
    <div>
        
    </div>
    <div class="left-sidebar" id="leftSidebar">
        <div class="sidebar-brand">
            {% raw %}

            <a href="/" class="left-side-bar-link">
                {% endraw %}

                <div class="left-side-bar-link-container-image-and-text">
                    <img src="/static/{{ logo }}" alt="logo" width="38">
                </div>
            </a>

        </div>
        <hr class="sidebar-divider logo-divider">
        <nav class="sidebar-nav">
            {% raw %}

            {% for section in sidebar_data %}
            <div class="sidebar-nav-section is-open">
                <button class="sidebar-section-toggle">
                    <span>{{ section.title }}</span> 
                    <svg class="sidebar-section-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </button>
                <div class="sidebar-section-content">
                    <ul class="sidebar-nav-links">
                        {% for file_item in section.files %} 
                        <li><a href="/{{ section.output_folder_name }}/{{ file_item.slug }}/" class="sidebar-link">{{ file_item.title }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <hr class="sidebar-divider section-divider">
            {% endfor %}

            {% endraw %}

        </nav>
    </div>
<div class="main-area-wrapper">
    <div class="app-header">
        <button class="mobile-menu-button" id="mobileMenuToggle" aria-label="Open navigation menu" aria-expanded="false" aria-controls="leftSidebar">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
        </button>

        <div class="mobile-header-logo">
            <a href="/" class="sidebar-logo-link">
                <img src="/static/{{ logo }}" alt="logo" width="64">
            </a>
        </div>
    
        <div class="header-actions">
            <button id="searchTrigger" class="search-trigger-button" aria-label="Open search (Press /)">
                <svg class="search-trigger-icon-svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <span class="search-trigger-text">Search</span>
                    <span class="search-shortcut-hint">
                        <kbd>/</kbd>
                    </span>

            </button>
            
            <button class="icon-button mobile-toc-toggle" id="mobileTocToggle" aria-label="Open Table of Contents" aria-expanded="false" aria-controls="toc-container">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="8" y1="6" x2="21" y2="6"></line>
                    <line x1="8" y1="12" x2="21" y2="12"></line>
                    <line x1="8" y1="18" x2="21" y2="18"></line>
                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
                </svg>
            </button>

            <div class="header-actions-right">
                {% for internal in internals %}
                <a href={{ internal.link }} class="header-nav-link">{{ internal.title }}</a>
                {% endfor %}

                {% for external in externals %}
                    {% if external.title != ''%}

                <a href={{external.link}} target="_blank" class="header-nav-link">
                    {{external.title}}
                    <svg style="margin-left: 0.3rem; color: grey;" class="external-link-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
                </a>
                    {% endif %}

                {% endfor %}

                {% for dropdown_config in dropdowns %}
                    {%if dropdown_config.main_title != '' %}
                <div class="header-dropdown-container" id="dropdownContainer_{{ loop.index }}">
                    <button class="header-dropdown-trigger" id="dropdownTrigger_{{ loop.index }}" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownMenu_{{ loop.index }}">
                        <span>{{ dropdown_config.main_title }}</span>
                        <svg class="dropdown-arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                    </button>
                    <div class="header-dropdown-menu" id="dropdownMenu_{{ loop.index }}" role="menu" aria-labelledby="dropdownTrigger_{{ loop.index }}">
                        {% for item_detail in dropdown_config['items'] %}
                            {% if item_detail.type == "external" %}
                        <a href="{{ item_detail.link }}" role="menuitem" class="header-dropdown-item" target="_blank">
                            <span>{{ item_detail.title }}</span>
                            <svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
                        </a>
                            {% elif item_detail.type == "internal" %}
                        <a href="{{ item_detail.link }}" role="menuitem" class="header-dropdown-item">
                            <span>{{ item_detail.title }}</span>
                        </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                    {% endif %}
                {% endfor %}

                <button id="themeToggle" class="theme-toggle-button" aria-label="Toggle theme">
                    <span class="theme-icon theme-icon-sun">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z"/></svg>
                    </span>
                    <span class="theme-icon theme-icon-moon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21"/></svg>
                    </span>
                </button>
                
                {% if github_link != '' %}
                <a href={{github_link}} target="_blank" rel="noopener noreferrer" id="githubLink" class="icon-button" aria-label="View source on GitHub">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
                  </a>  
                {% endif %}
            </div>
        </div>
    </div>

    
    <div class="content-toc-row">
        <div id="content-area" tabindex="0">
            {% raw %}

            {{body_content | safe}}

            {% endraw %}
            <div class="page-footer-container">
                <div class="page-meta-row">
                    {% if edit_this_page_on_github_link != '' %}
                    <a href="{{edit_this_page_on_github_link}}" class="edit-page-link" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83l3.75 3.75l1.83-1.83z"/>
                        </svg>Edit this page on GitHub
                        </a>
    
                        {% endif %}
            {% raw %}

                    <span class="last-updated-text">Last updated: {{ date }}</span>
                </div>
                <div class="page-navigation-boxes">
                    {% if prev_page_data %}
                    <button class="nav-box previous-page-box">
                        <span class="nav-box-label">Previous page</span>
                        <a href="{{ prev_page_data.url }}" class="nav-box-link">{{ prev_page_data.title }}</a>
                    </button>
                    {% endif %}
    
                    {% if next_page_data %}
                    <button class="nav-box next-page-box">
                        <span class="nav-box-label">Next page</span>
                        <a href="{{ next_page_data.url }}" class="nav-box-link">{{ next_page_data.title }}</a>
                    </button>
                    {% endif %}

                    {% endraw %}

                </div>


            </div>
            <div class='made-by-me-div'>
                <a class="made-by-me-text" href="https://github.com/Nareshix/Vai" target="_blank">
                    Made with <span class='made-by-me-brand'>Vai</span>
                </a>
            </div>
            
        </div>
    <div id="toc-container"> 
        <nav id="toc-links">
            <div id="toc-active-marker"></div>
            {% raw %}

            {{toc_table_link | safe}}
            {% endraw %}
            
        </nav>
        
    </div>
        </div>
</div>

<div class="page-overlay" id="pageOverlay"></div>

<!-- Search Modal Overlay -->
<div id="searchOverlay" class="search-overlay"> 
    <div id="searchModal" class="search-modal" role="dialog" aria-modal="true" aria-labelledby="searchModalTitle">
    <div class="search-input-container">
        <svg class="search-modal-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input type="text" id="searchInput" class="search-input" placeholder="Search documentation..." aria-label="Search input" autocomplete="off">
        <button id="searchCloseButton" class="search-close-button" aria-label="Close search">
        </button>
    </div>
    <div id="searchResultsContainer" class="search-results-container">
        <p class="search-results-placeholder">Start typing to see results.</p>
    </div>
    </div>
</div>
</body>
</html>