@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.Navigation.NavigationTreeViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Frontend.Navigation

@if (!Model.Nodes.Any()) return;

<div class="offcanvas-header offcanvas-animate-in z-2 bg-body" style="grid-area: Header;">
    <button type="button" class="btn icon-3 p-2 ms-n3" @@click="$dispatch('close-offcanvas');">
        @ReadFile("/Files/Images/Icons/chevron-left.svg")
    </button>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body offcanvas-animate-in z-2 bg-body" style="grid-area: Body;">

    <ul class="navbar-nav gap-3 gap-md-4 row-gap-4 d-grid" style="grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));" data-swift-menu-nav>
        
        @foreach (var node in Model.Nodes)
        {
            <li class="vstack gap-2 position-relative text-center">
                @if(node?.TryGetImageFile(out var image) is true)
                {
                    <img src="@(image?.ToGetImage(new(){ Height = 375, Width = 500, Crop = Dynamicweb.Imaging.ImageHandling.CropMode.KeepAspectRatio }))" class="rounded" style="object-fit: cover;aspect-ratio: 4/3;" loading="eager">
                }
                else {
                    <img src="/Files/Images/nopic.png" class="rounded" style="object-fit: cover;aspect-ratio: 4/3;" loading="eager">
                }
                <a href="@(node?.IsClickable ?? false ? node?.Link : null)" class="flex-fill text-decoration-none text-body text-muted stretched-link pt-2 fs-7 fw-bold">@node?.Name</a>
            </li>
        }
    </ul>

<div>