@using BLAIzor.Services
@inherits LayoutComponentBase
@inject ScopedContentService _scopedContentService;
@inject NavigationManager _navigationManager;
<!-- The video -->

<nav class="navbar navbar-expand-lg bg-body-tertiary" style="z-index: 2">
    <div class="container-fluid">
        @{
            var brandFileName = _scopedContentService.SelectedDocument;
            var brandName = _scopedContentService.SelectedBrandName;
        }
        <NavLink class="navbar-brand" @onclick="HomeClick">@brandName</NavLink>
        <div>            

           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa-solid fa-bars"></i>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <NavLink class="nav-link" href="sites" Match="NavLinkMatch.All">
                        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Your sites
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="manage-uploads">
                        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Uploaded media
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="design-templates">
                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Your templates
                    </NavLink>
                    
                </li>
               
            </ul>
            
        </div>
    </div>
</nav>

<div class="page admin-body" style="z-index: 1">

    <main>
        @* <div class="top-row px-4" style="z-index: 2">
        <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div> *@

        <article class="content container-fluid text-center">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<script>
    $(document).ready(function () {
        var video = document.getElementById("myVideo");
        video.oncanplaythrough = function () {
            video.muted = true;
            video.play();
        };
    });
</script>

<script>
    function setHtmlEditorSourceMode() {
        let retries = 10; // Max retries
        let interval = setInterval(() => {
            let sourceButton = document.querySelector('.rz-html-editor-button');
            if (sourceButton) {
                sourceButton.click();
                clearInterval(interval); // Stop checking once clicked
            }
            if (--retries === 0) {
                clearInterval(interval); // Stop trying after 10 attempts
            }
        }, 300); // Check every 300ms
    }
</script>

@code{
    
    public void HomeClick()
    {
        _navigationManager.Refresh(true);
    }

    protected override void OnInitialized()
    {
        
    }

    
}