WatchIt/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor

@using System.Net
@using WatchIt.Common.Model.Photos
@using WatchIt.Website.Services.WebAPI.Photos

@inherits LayoutComponentBase



<CascadingValue Value="this">
    @if (_loaded)
    {
        <div class="container-xl">
            <div class="row sticky-top top-3 mb-2rem">
                <div class="col">
                    <div class="panel panel-header rounded-3 px-3">
                        <div class="container-grid">
                            <div class="row align-items-center">
                                <div class="col">
                                    <a id="logo" class="logo" href="/">
                                        WatchIt
                                    </a>
                                </div>
                                <div class="col-auto">
                                    <div class="d-flex gap-2 align-items-center">
                                        @if (_searchbarVisible)
                                        {
                                            <div class="input-group input-group-sm">
                                                <InputText class="form-control" placeholder="Search with regex" @bind-Value="@(_searchbarText)"/>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-secondary" @onclick="@(SearchStart)">⌕</button>
                                            <button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = false)">&#10060;&#xFE0E;</button>
                                        }
                                        else
                                        {
                                            <button type="button" class="btn btn-sm">Rankings</button>
                                            <button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = true)">⌕</button>
                                        }
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="float-end">
                                        @if (_user is null)
                                        {
                                            <a id="signInButton" class="main-button" href="/auth?redirect_to=@(WebUtility.UrlEncode(NavigationManager.Uri))">Sign in</a>
                                        }
                                        else
                                        {
                                            <Dropdown RightAligned>
                                                <Button Color="Color.Default">
                                                    <div class="d-flex gap-2 align-items-center">
                                                        <img class="rounded-circle" alt="avatar" height="30" src="@(_userProfilePicture is null ? "assets/user_placeholder.png" : _userProfilePicture.ToString())"/>
                                                        <span>@(_user.Username)</span>
                                                    </div>
                                                </Button>
                                                <DropdownToggle Color="Color.Default" Split />
                                                <DropdownMenu >
                                                    @if (_user.IsAdmin)
                                                    {
                                                        <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/admin"))">Administrator panel</DropdownItem>
                                                    }
                                                    <DropdownDivider/>
                                                    <DropdownItem Clicked="UserMenuLogOut"><span class="text-danger">Log out</span></DropdownItem>
                                                </DropdownMenu>
                                            </Dropdown>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    @Body
                </div>
            </div>
        </div>
        
        

        <style>
            /* TAGS */
            body {
                background-image: url('@(GetBackgroundPhoto() is null ? "assets/background_temp.jpg": GetBackgroundPhoto().ToString())');
            }


            /* IDS */

            #logo, #signInButton {
                background-image: linear-gradient(45deg, @(GetBackgroundPhoto() is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(GetBackgroundPhoto().Background.FirstGradientColor)}, #{Convert.ToHexString(GetBackgroundPhoto().Background.SecondGradientColor)}"));
            }
        </style>
    }
</CascadingValue>