@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Frontend.Navigation
@using Dynamicweb.Ecommerce
@{
    var areaId = Pageview?.AreaID;
}
<div class="nav-wrapper">
    <button class="hstack p-2 btn" style="max-inline-size:fit-content" data-dw-button type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu_@(Model.ID)">
        @if ((Model.Item?.TryGetString("Icon", out var icon) ?? false) && icon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase))
        {
            <span class="icon-3 pe-none">@ReadFile(icon)</span>
        }
        @if (Model.Item?.TryGetString("Title", out var title) ?? false) 
        {
            <span class="ms-2 text-nowrap">@(title)</span>
        }
    </button>
</div>

<div data-swift-offcanvas-menu x-data class="offcanvas offcanvas-@(Model.Item?.GetString("OffCanvasDirection", "start") ?? "start") d-grid border-0 overflow-x-hidden" tabindex="-1" id="offcanvasMenu_@(Model.ID)"
    x-on:close-offcanvas="
        const header = $event.target.closest('.offcanvas-header');
        const body = header.nextElementSibling;
        body.classList.add('offcanvas-animate-out');
        header.classList.add('offcanvas-animate-out');
        const removeElement = (el) => {
            el.addEventListener('animationend', () => el.remove(), { once: true });
        };
        removeElement(body);
        removeElement(header);
    " 
    data-dw-colorscheme="light"
>
    
    <div class="offcanvas-header z-2" style="grid-area: Header;">

        @if( (Model.Item?.TryGetImageFile("Logo", out var logo) ?? false) && (logo?.IsSvg() ?? false) ) {
            var logoSize = string.Empty;
            var logoWidth = (Model.Item?.TryGetString("LogoMaxWidth", out var width) is true) ? width : "6";
            var logoHeight = (Model.Item?.TryGetString("LogoMaxHeight", out var height) is true) ? height : "3";
            logoSize = $"max-inline-size: {logoWidth}rem; max-block-size: {logoHeight}rem;";
            <span class="icon-auto position-relative" style="@logoSize">
                @ReadFile(logo?.Path ?? string.Empty)
                @if(Model.Item?.TryGetLink("LogoLink", out var logoLink) ?? false) {
                    <a href="@logoLink.Url" class="stretched-link"></a>
                }
            </span>
        }
        
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    
    <div class="offcanvas-body z-2" style="grid-area: Body;">

        @if( Model.Item?.TryGetItems("Sections", out var sections) ?? false)
        {
            foreach( var section in sections )
            {
                var template = section.TryGetString("Layout", out var layout) ? layout.Replace("/Files/Templates/", string.Empty) : "Designs/Swift-v2/Paragraph/Swift-v2_OffCanvasMenu/Layouts/Menu.cshtml";
                var root = section.TryGetLink("Source", out var source) ? $"&PageId={source.PageId}" : null;
                var sectionType = "0"; // Default to Menu - Extend with more types if needed
                
                if (section?.TryGetList("SectionType", out var sectionTypes) ?? false ) 
                {
                    foreach (var type in sectionTypes.GetSelectedOptions())
                    {
                        if (type.IsSelected)
                        {
                            sectionType = type.Value;
                            break;
                        }
                    }
                }

                <div class="pb-4" data-swift-menu-section="@(section?.GetString("Title"))">

                    @switch (sectionType)
                    {
                        case "0": // Menu
                            <div
                                hx-get="/dwapi/frontend/navigations/@areaId?ExpandMode=subnodes@(root)"
                                hx-trigger="shown.bs.offcanvas from:#offcanvasMenu_@(Model.ID)"
                                hx-swap="outerHTML"
                                hx-headers='
                                {
                                    "Accept": "text/html",
                                    "x-dw-template": "@(template)"
                                }'
                                hx-select="[data-swift-menu-nav]"
                                hx-target="this">
                                <ul class="navbar-nav placeholder-glow">
                                    @for (var i = 0; i < 5; i++)
                                    {
                                        <li><div class="placeholder bg-primary-subtle rounded-pill col-@(Random.Shared.Next(5, 12))"></div></li>
                                    }
                                </ul>
                            </div>
                            break;

                        case "1": // Language selector
                            @RenderPartial("/Designs/Swift-v2/Paragraph/Swift-v2_LanguageSelector/Modal.cshtml", new ParagraphViewModel() { Item = section?.GetItem("Item") ?? null })
                            break;

                        case "2": // Rich Text        
                            @if( section?.TryGetString("Text", out var text) ?? false)
                            {
                                <div class="mb-0-last-child">
                                    @(text)
                                </div>
                            }
                            break;
                    }

                </div>
            }
        }
        else {
            <div class="pb-4" data-swift-menu-section="@(Model.ID)">
                <div 
                    hx-get="/dwapi/frontend/navigations/@areaId?ExpandMode=subnodes" 
                    hx-trigger="shown.bs.offcanvas from:#offcanvasMenu_@(Model.ID)"
                    hx-swap="outerHTML"
                    hx-headers='
                    {
                        "Accept": "text/html",
                        "x-dw-template": "Designs/Swift-v2/Paragraph/Swift-v2_OffCanvasMenu/Layouts/Menu.cshtml"
                    }'
                    hx-select="[data-swift-menu-nav]"
                    hx-target="this"
                >
                    <ul class="navbar-nav placeholder-glow">
                        @for (var i = 0; i < 5; i++)
                        {
                            <li><div class="placeholder bg-primary-subtle rounded-pill col-@(Random.Shared.Next(5, 12))"></div></li>
                        }
                    </ul>
                </div>
            </div>
        }
        
    </div>
</div>
