@page "/divider"
@inject IStringLocalizer<Dividers> Localizer

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

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

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <p>@Localizer["NormalContent1"]</p>
    <Divider />
    <p>@Localizer["NormalContent2"]</p>
</DemoBlock>

<DemoBlock Title="@Localizer["AlignmentTitle"]" Introduction="@Localizer["AlignmentIntro"]" Name="Alignment">
    <p>@Localizer["AlignmentContent1"]</p>
    <Divider Text="@Localizer["AlignmentDivider1"]" Alignment="Alignment.Left" />
    <p>@Localizer["AlignmentContent2"]</p>
    <Divider Text="@Localizer["AlignmentDivider2"]" />
    <p>@Localizer["AlignmentContent3"]</p>
    <Divider Text="@Localizer["AlignmentDivider3"]" Alignment="Alignment.Right" />
    <p>@Localizer["AlignmentContent4"]</p>
</DemoBlock>

<DemoBlock Title="@Localizer["IconTitle"]" Introduction="@Localizer["IconIntro"]" Name="Icon">
    <p>@Localizer["IconContent1"]</p>
    <Divider Icon="fa-fw fa-solid fa-at" Alignment="Alignment.Left" />
    <p>@Localizer["IconContent2"]</p>
    <Divider Icon="fa-fw fa-solid fa-chart-bar" />
    <p>@Localizer["IconContent3"]</p>
    <Divider Icon="fa-fw fa-solid fa-bookmark" Text="@Localizer["IconBookmark"]" Alignment="Alignment.Right" />
    <p>@Localizer["IconContent4"]</p>
</DemoBlock>

<DemoBlock Title="@Localizer["VerticalTitle"]" Introduction="@Localizer["VerticalIntro"]" Name="Vertical">
    <div class="d-flex">
        <span>@Localizer["VerticalContent1"]</span>
        <Divider IsVertical="true" />
        <span>@Localizer["VerticalContent2"]</span>
        <Divider IsVertical="true" />
        <span>@Localizer["VerticalContent3"]</span>
    </div>
    <Divider Text="@Localizer["VerticalDivider"]" />
    <div class="d-flex" style="height: 100px;">
        <div class="border border-primary" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Alignment="Alignment.Left" />
        <div class="border border-success" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true"></Divider>
        <div class="border border-info" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Alignment="Alignment.Right" />
        <div class="border border-warning" style="width:100px; height:100%;"></div>
    </div>
    <Divider Text="@Localizer["VerticalDivider"]" />
    <div class="d-flex" style="height: 200px;">
        <div class="border border-primary" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Text="@Localizer["VerticalDivider"]" Alignment="Alignment.Left" />
        <div class="border border-success" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Text="@Localizer["VerticalDivider"]" />
        <div class="border border-info" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Text="@Localizer["VerticalDivider"]" Alignment="Alignment.Right" />
        <div class="border border-warning" style="width:100px; height:100%;" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ChildContentTitle"]" Introduction="@Localizer["ChildContentIntro"]" Name="ChildContent">
    <p>@Localizer["ChildContent1"]</p>
    <Divider>
        <div class="text-danger">@((MarkupString)Localizer["DividerChildContent"].Value)</div>
    </Divider>
    <p>@Localizer["ChildContent2"]</p>
</DemoBlock>

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