@page "/popover"
@inject IStringLocalizer<Popovers> Localizer

<h3>@Localizer["PopoversTitle"]</h3>
<h4>@Localizer["PopoversDescription"]</h4>

<DemoBlock Title="@Localizer["PopoversNormalTitle"]"
           Introduction="@Localizer["PopoversNormalIntro"]"
           Name="Normal">
    <div class="d-flex flex-column w-100 popover-demo">
        <div class="d-flex justify-content-center">
            <Popover Placement="Placement.Bottom" Title="@Title" Content="@Content" IsHtml="true">
                <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
            </Popover>
        </div>
        <div class="d-flex justify-content-between align-items-center flex-fill">
            <Popover Placement="Placement.Right" Title="@Title" Content="@Content" IsHtml="true">
                <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
            </Popover>
            <Popover Placement="Placement.Left" Title="@Title" Content="@Content" IsHtml="true">
                <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
            </Popover>
        </div>
        <div class="d-flex justify-content-center">
            <Popover Placement="Placement.Top" Title="@Title" Content="@Content" IsHtml="true">
                <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
            </Popover>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["PopoversButtonTitle"]"
           Introduction="@Localizer["PopoversButtonIntro"]"
           Name="Button">
    <Popover Placement="Placement.Auto" Title="@Title" Content="@Content" IsHtml="true" Trigger="click">
        <Button Text="@Localizer["PopoversButtonButtonText"]" />
    </Popover>
</DemoBlock>

<DemoBlock Title="@Localizer["PopoversTemplateTitle"]"
           Introduction="@Localizer["PopoversTemplateIntro"]"
           Name="Template">
    <Popover Placement="Placement.Top" Title="@_templateTitle" Trigger="click">
        <ChildContent>
            <Button Text="@Localizer["PopoversTemplateButtonText"]" />
        </ChildContent>
        <Template>
            <BootstrapInput TValue="string" />
        </Template>
    </Popover>
</DemoBlock>

<DemoBlock Title="@Localizer["PopoversCssClassTitle"]"
           Introduction="@Localizer["PopoversCssClassIntro"]"
           Name="CssClass">
    <p>@((MarkupString)Localizer["PopoversCssClassDescription"].Value)</p>
    <Pre class="mb-3">.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}</Pre>
    <Popover Placement="Placement.Auto" Title="@Title" Content="@Content" IsHtml="true" Trigger="click" CustomClass="custom-popover">
        <Button Text="@Localizer["PopoversCssClassButtonText"]" />
    </Popover>
</DemoBlock>

<DemoBlock Title="@Localizer["PopoversManualTitle"]"
           Introduction="@Localizer["PopoversManualIntro"]"
           Name="Manual">
    <section ignore>
        <ul class="ul-demo">
            <li>@((MarkupString)Localizer["PopoversManualDescLI1"].Value)</li>
            <li>@((MarkupString)Localizer["PopoversManualDescLI2"].Value)</li>
        </ul>
    </section>
    <Popover Title="@Title" Content="@Content" IsHtml="true" Trigger="manual" @ref="_popover">
        <i class="fa-solid fa-flag" style="cursor: pointer;"></i>
    </Popover>
    <Button Text="Trigger" OnClickWithoutRender="ToggleShow"></Button>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
