@using CraftSharp.Components

@page "/opening"

<AuthorizeView>
    <Authorized>
        <div class="numberOfKeys">
            <ValueIndicator IconPath="/Images/opening_icon.png" 
                            Value="@AuthStateProvider.GetCurrentUser().NumberOfKeys">
            </ValueIndicator>
        </div>
    </Authorized>
</AuthorizeView>
<div class="openingPanel">
    <img src="/Images/chestBottom.png" class="chest chestOpenBottom @openAnim" />
    <img src="/Images/chest.png" class="chest chestOpen @openAnim" />
    <img src="/Images/inventory_icon.png" class="chest chestClose @closeAnim" />

    @if (randomItem is not null)
    {
        <div class="item @itemAnim" style="opacity: @itemOpacity">
            <img src="data:image/png;base64, @(randomItem.ImageBase64)" title="@randomItem.DisplayName" alt="@randomItem.DisplayName" style="min-width: 128px; max-width: 128px" />
            <p class="itemName">@randomItem.DisplayName</p>
        </div>
    }

    <div class="button openBtn @buttonAnim" @onclick="selectRandom">
        @Localizer["Open"] 
        <div class="costDiv">
            <img src="/Images/opening_icon.png" style="width: 30px" /> x @CostInKeys
        </div>
    </div>
</div>