@page "/pop-confirm"
@inject IStringLocalizer<PopoverConfirms> Localizer

<h3>@Localizer["PopoverConfirmsTitle"]</h3>
<h4>@Localizer["PopoverConfirmsDescription"]</h4>

<DemoBlock Title="@Localizer["PopoverConfirmsNormalTitle"]"
           Introduction="@Localizer["PopoverConfirmsNormalIntro"]"
           Name="Normal">
    <div class="d-flex justify-content-center border p-3 rounded">
        <div class="d-flex flex-column w-100" style="height: 240px;">
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Bottom"
                                  ConfirmButtonColor="Color.Danger"
                                  Text="@Localizer["PopoverConfirmsNormalPopupBoxText"]"
                                  Content="@Localizer["PopoverConfirmsNormalPopupBoxContent"]"
                                  OnConfirm="@OnConfirm"
                                  OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-between m-4 align-items-center flex-fill">
                <PopConfirmButton Placement="Placement.Right"
                                  Text="@Localizer["PopoverConfirmsNormalRightPopup"]"
                                  Content="@Localizer["PopoverConfirmsNormalRightPopupContent"]"
                                  OnConfirm="@OnConfirm"
                                  OnClose="@OnClose" />
                <PopConfirmButton Placement="Placement.Left"
                                  Text="@Localizer["PopoverConfirmsNormalLeftPopup"]"
                                  Content="@Localizer["PopoverConfirmsNormalLeftPopupContent"]"
                                  OnConfirm="@OnConfirm"
                                  OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Top"
                                  Text="@Localizer["PopoverConfirmsNormalPopupAbove"]"
                                  Content="@Localizer["PopoverConfirmsNormalPopupAboveContent"]"
                                  OnConfirm="@OnConfirm"
                                  OnClose="@OnClose" />
            </div>
        </div>
    </div>
    <ConsoleLogger @ref="Logger" />
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsContentTitle"]"
           Introduction="@Localizer["PopoverConfirmsContentIntro"]"
           Name="Content">
    <PopConfirmButton Placement="Placement.Top"
                      Color="Color.Danger"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                      ConfirmButtonColor="Color.Danger"
                      Text="@Localizer["PopoverConfirmsContentDelete"]"
                      Content="@Localizer["PopoverConfirmsContentDeleteContent"]" />
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsIsAsyncTitle"]"
           Introduction="@Localizer["PopoverConfirmsIsAsyncIntro"]"
           Name="IsAsync">
    <PopConfirmButton Placement="Placement.Top"
                      Color="Color.Danger"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                      ConfirmButtonColor="Color.Danger"
                      Text="@Localizer["PopoverConfirmsIsAsyncConfirmationText"]"
                      Content="@Localizer["PopoverConfirmsIsAsyncConfirmationContent"]"
                      Icon="fa-solid fa-font-awesome fa-fw"
                      IsAsync="true"
                      OnConfirm="OnAsyncConfirm" />
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsFormTitle"]"
           Introduction="@Localizer["PopoverConfirmsFormIntro"]"
           Name="ValidateForm">
    <ValidateForm Model="@Model" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInValidSubmit">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Address" />
            </div>
            <div class="col-12">
                <PopConfirmButton Placement="Placement.Top"
                                  Color="Color.Primary"
                                  ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
                                  ConfirmButtonColor="Color.Success"
                                  Text="@Localizer["PopoverConfirmsFormSubmitFormText"]"
                                  Content="@Localizer["PopoverConfirmsFormSubmitFormContent"]"
                                  Icon="fa-solid fa-floppy-disk fa-fw"
                                  ButtonType="ButtonType.Submit"
                                  IsAsync="true"
                                  OnConfirm="OnAsyncSubmit" />
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="FormLogger" />
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsIsLinkTitle"]"
           Introduction="@Localizer["PopoverConfirmsIsLinkIntro"]"
           Name="IsLink">
    <PopConfirmButton Placement="Placement.Top"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                      Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger"
                      Text="@Localizer["PopoverConfirmsIsLinkHyperLinkText"]"
                      Content="@Localizer["PopoverConfirmsIsLinkHyperLinkContent"]"
                      IsLink="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsCustomClassTitle"]"
           Introduction="@Localizer["PopoverConfirmsCustomClassIntro"]"
           Name="CustomClass">
    <Pre class="mb-3">.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}
</Pre>
    <PopConfirmButton Placement="Placement.Top"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                      Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger"
                      Text="@Localizer["PopoverConfirmsCustomClassCustomButtonText"]"
                      Content="@Localizer["PopoverConfirmsCustomClassCustomButtonContent"]"
                      CustomClass="custom-popover" />
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsBodyTemplateTitle"]"
           Introduction="@Localizer["PopoverConfirmsBodyTemplateIntro"]"
           Name="BodyTemplate">
    <PopConfirmButton Placement="Placement.Top"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
                      Color="Color.Primary"
                      ConfirmButtonColor="Color.Info"
                      Text="@Localizer["PopoverConfirmsBodyTemplateButtonText"]">
        <BodyTemplate>
            <div class="d-flex align-items-center">
                <span class="me-2">Label: </span>
                <BootstrapInput TValue="string" />
            </div>
        </BodyTemplate>
    </PopConfirmButton>
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsShowButtonsTitle"]"
           Introduction="@Localizer["PopoverConfirmsShowButtonsIntro"]"
           Name="ShowButtons">
    <section ignore>
        <p>@((MarkupString)Localizer["PopoverConfirmsShowButtonsDesc"].Value)</p>
        <Pre>[CascadingParameter(Name = "PopoverConfirmButtonCloseAsync")]
[NotNull]
private Func&lt;Task&gt;? OnCloseAsync { get; set; }

[CascadingParameter(Name = "PopoverConfirmButtonConfirmAsync")]
[NotNull]
private Func&lt;Task&gt;? OnConfirmAsync { get; set; }</Pre>
    </section>
    <PopConfirmButton Placement="Placement.Top"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
                      Color="Color.Primary"
                      ConfirmButtonColor="Color.Info"
                      Text="@Localizer["PopoverConfirmsShowButtonsButtonText"]"
                      ShowCloseButton="false" ShowConfirmButton="false">
        <BodyTemplate>
            <CustomPopConfirmContent></CustomPopConfirmContent>
        </BodyTemplate>
    </PopConfirmButton>
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverConfirmsTriggerTitle"]"
           Introduction="@Localizer["PopoverConfirmsTriggerIntro"]"
           Name="Trigger">
    <PopConfirmButton Placement="Placement.Top"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
                      Color="Color.Primary"
                      ConfirmButtonColor="Color.Info"
                      Trigger="hover focus" ShowCloseButton="false" ShowConfirmButton="false"
                      Text="@Localizer["PopoverConfirmsBodyTemplateButtonText"]">
        <BodyTemplate>
            <div class="d-flex align-items-center">
                Label: Just a demo
            </div>
        </BodyTemplate>
    </PopConfirmButton>
</DemoBlock>

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

<EventTable Items="@GetEvents()" />
