@page "/card"
@inject IStringLocalizer<Cards> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <Card>
        <BodyTemplate>
            <h5>Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a class="btn btn-primary">Go somewhere</a>
        </BodyTemplate>
    </Card>
</DemoBlock>

<DemoBlock Title="@Localizer["FooterTitle"]" Introduction="@Localizer["FooterIntro"]" Name="Footer">
    <Card>
        <HeaderTemplate>
            Featured
        </HeaderTemplate>
        <BodyTemplate>
            <h5>Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a class="btn btn-primary">Go somewhere</a>
        </BodyTemplate>
        <FooterTemplate>
            2 days ago
        </FooterTemplate>
    </Card>
</DemoBlock>

<DemoBlock Title="@Localizer["IsCenterTitle"]" Introduction="@Localizer["IsCenterIntro"]" Name="IsCenter">
    <Card IsCenter="true">
        <HeaderTemplate>
            Featured
        </HeaderTemplate>
        <BodyTemplate>
            <h5>Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a class="btn btn-primary">Go somewhere</a>
        </BodyTemplate>
        <FooterTemplate>
            2 days ago
        </FooterTemplate>
    </Card>
</DemoBlock>

<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Primary" IsCenter="true">
                <HeaderTemplate>
                    Header
                </HeaderTemplate>
                <BodyTemplate>
                    <h5>Primary card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </BodyTemplate>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Secondary" IsCenter="true">
                <HeaderTemplate>
                    Header
                </HeaderTemplate>
                <BodyTemplate>
                    <h5>Secondary card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </BodyTemplate>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Success" IsCenter="true">
                <HeaderTemplate>
                    Header
                </HeaderTemplate>
                <BodyTemplate>
                    <h5>Success card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </BodyTemplate>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Warning" IsCenter="true">
                <HeaderTemplate>
                    Header
                </HeaderTemplate>
                <BodyTemplate>
                    <h5>Warning card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </BodyTemplate>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Danger" IsCenter="true">
                <HeaderTemplate>
                    Header
                </HeaderTemplate>
                <BodyTemplate>
                    <h5>Danger card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </BodyTemplate>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Info" IsCenter="true">
                <HeaderTemplate>
                    Header
                </HeaderTemplate>
                <BodyTemplate>
                    <h5>Info card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </BodyTemplate>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Dark" IsCenter="true">
                <HeaderTemplate>
                    Header
                </HeaderTemplate>
                <BodyTemplate>
                    <h5>Dark card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </BodyTemplate>
            </Card>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["CollapsibleTitle"]" Introduction="@Localizer["CollapsibleIntro"]" Name="Collapsible">
    <p>@((MarkupString)Localizer["CollapsibleIntroDesc"].Value)</p>
    <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]">
        <BodyTemplate>
            @Localizer["CollapsibleBody"]
        </BodyTemplate>
    </Card>
    <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
        <HeaderTemplate>
            <div class="flex-fill">
            </div>
            <span>@Localizer["CollapsibleHeaderTemplate"]</span>
            <Select TValue="string" class="ms-1">
                <Options>
                    <SelectOption Text="Test1" Value="" />
                    <SelectOption Text="Test2" Value="1" />
                    <SelectOption Text="Test3" Value="2" />
                    <SelectOption Text="Test4" Value="3" />
                </Options>
            </Select>
        </HeaderTemplate>
        <BodyTemplate>
            @Localizer["CollapsibleBody"]
        </BodyTemplate>
    </Card>
    <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3" Collapsed="true">
        <BodyTemplate>
            @Localizer["CollapsibleBody"]
        </BodyTemplate>
    </Card>
</DemoBlock>

<DemoBlock Title="@Localizer["CollapsibleHeaderTemplateTitle"]" Introduction="@Localizer["CollapsibleHeaderTemplateIntro"]" Name="HeaderTemplate">
    <Card HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
        <HeaderTemplate>
            <div class="flex-fill">
            </div>
            <span>@Localizer["CollapsibleHeaderTemplate"]</span>
            <Select TValue="string" class="ms-1">
                <Options>
                    <SelectOption Text="Test1" Value="" />
                    <SelectOption Text="Test2" Value="1" />
                    <SelectOption Text="Test3" Value="2" />
                    <SelectOption Text="Test4" Value="3" />
                </Options>
            </Select>
        </HeaderTemplate>
        <BodyTemplate>
            @Localizer["CollapsibleHeaderTemplateTitle"]
        </BodyTemplate>
    </Card>
</DemoBlock>

<DemoBlock Title="@Localizer["ShadowTitle"]" Introduction="@Localizer["ShadowIntro"]" Name="Shadow">
    <Card IsShadow="true" HeaderText="@Localizer["ShadowTitle"]">
        <BodyTemplate>
            @Localizer["ShadowBody"]
        </BodyTemplate>
    </Card>
</DemoBlock>

<DemoBlock Title="@Localizer["Compare"]" Name="Compare">
    <Card IsCollapsible="false" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
        <HeaderTemplate>
            <div class="flex-fill">
            </div>
            <div class="me-2">@Localizer["CollapsibleHeaderTemplate"]</div>
            <Select TValue="string">
                <Options>
                    <SelectOption Text="Test1" Value="" />
                    <SelectOption Text="Test2" Value="1" />
                    <SelectOption Text="Test3" Value="2" />
                    <SelectOption Text="Test4" Value="3" />
                </Options>
            </Select>
        </HeaderTemplate>
        <BodyTemplate>
            @Localizer["CollapsibleBody"]
        </BodyTemplate>
    </Card>

    <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
        <HeaderTemplate>
            <div class="flex-fill">
            </div>
            <div class="me-2">@Localizer["CollapsibleHeaderTemplate"]</div>
            <Select TValue="string">
                <Options>
                    <SelectOption Text="Test1" Value="" />
                    <SelectOption Text="Test2" Value="1" />
                    <SelectOption Text="Test3" Value="2" />
                    <SelectOption Text="Test4" Value="3" />
                </Options>
            </Select>
        </HeaderTemplate>
        <BodyTemplate>
            @Localizer["CollapsibleBody"]
        </BodyTemplate>
    </Card>
</DemoBlock>

<AttributeTable Items="GetAttributes()" />
