@inherits BasePage

@page "/"
@page "/immortal-home"

<LayoutMediumContentComponent>
    <PaperComponent>
        <div class="mainContainer">
            <div class="mainTitle">
                Fan Reference
            </div>

            <div>
                Refer to various aspects of "IMMORTAL: Gates of Pyre" from this external reference!
            </div>

            <DevOnlyComponent>
                <div class="cooldown-demo">
                    <div class="cooldown-demo-label">Cooldown Demo</div>
                    <CooldownButtonComponent CooldownSeconds="12"
                                             Size="120"
                                             OnClick="OnCooldownClick">
                        Click Me
                    </CooldownButtonComponent>
                </div>
            </DevOnlyComponent>
        </div>
    </PaperComponent>

    <ContentDividerComponent></ContentDividerComponent>

    <PaperComponent>
        <div class="heroesContainer">

            <ContentHighlightComponent Title="Build Calculator"
                                       Description="Make a build!"
                                       Href="/build-calculator"
                                       ImageHref="image/hero/Build.png"/>

            <ContentHighlightComponent Title="Database"
                                       Description="Review the units!"
                                       Href="/database"
                                       ImageHref="image/hero/Database.png"/>


        </div>
    </PaperComponent>

</LayoutMediumContentComponent>

<style>
    .mainContainer {
        padding-bottom: 32px;
    }
    .cooldown-demo {
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .cooldown-demo-label {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-secondary, #aaa);
    }

    .mainTitle {
        font-size: 2.2rem;
        font-weight: bold;
    }

    .heroesContainer {
        display: grid;
        gap: 64px;
        justify-content: center;
        margin: auto;
        grid-template-columns: 1fr 1fr;
    }


    @@media only screen and (max-width: 1025px) {
        .heroesContainer {
            grid-template-columns: 1fr;
        }
    }
</style>

@code {
    private Task OnCooldownClick()
    {
        return Task.CompletedTask;
    }
}