@using Moonlight.Shared.Misc

<div class="grid grid-cols-3 gap-3">
    <div class="col-span-1 flex flex-col gap-3">
        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="Theme.ColorBackground"/>
            <span class="ms-1">Background</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="Theme.ColorBaseContent"/>
            <span class="ms-1">Base Content</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="Theme.ColorBase100"/>
            <span class="ms-1">Base 100</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="Theme.ColorBase150"/>
            <span class="ms-1">Base 150</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="Theme.ColorBase200"/>
            <span class="ms-1">Base 200</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="Theme.ColorBase250"/>
            <span class="ms-1">Base 250</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="Theme.ColorBase300"/>
            <span class="ms-1">Base 300</span>
        </div>
    </div>

    <div class="col-span-2 grid grid-cols-2 gap-3">
        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="Theme.ColorPrimary"/>
                <span class="ms-1">Primary</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorPrimaryContent"/>
                <span class="ms-1">Primary Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="Theme.ColorSecondary"/>
                <span class="ms-1">Secondary</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSecondaryContent"/>
                <span class="ms-1">Secondary Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="Theme.ColorAccent"/>
                <span class="ms-1">Accent</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorAccentContent"/>
                <span class="ms-1">Accent Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="Theme.ColorInfo"/>
                <span class="ms-1">Info</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorInfoContent"/>
                <span class="ms-1">Info Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="Theme.ColorSuccess"/>
                <span class="ms-1">Success</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSuccessContent"/>
                <span class="ms-1">Success Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="Theme.ColorWarning"/>
                <span class="ms-1">Warning</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorWarningContent"/>
                <span class="ms-1">Warning Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="Theme.ColorError"/>
                <span class="ms-1">Error</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorErrorContent"/>
                <span class="ms-1">Error Content</span>
            </div>
        </div>
    </div>
</div>


@code
{
    [Parameter] public ApplicationTheme Theme { get; set; }
}