@page "/footer"
@inject IStringLocalizer<Footers> Localizer

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

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

<p>@((MarkupString)Localizer["FootersTips"].Value)</p>

<DemoBlock Title="@Localizer["FooterNormalTitle"]" Introduction="@Localizer["FooterNormalIntro"]" Name="Normal">
    <div id="scroll" class="overflow-auto border border-secondary" style="max-height: 120px;">
        <div class="p-2" style="height: 200px">
            <p>@Localizer["FootersContent1"]</p>
            <p>@Localizer["FootersContent2"]</p>
        </div>
        <Footer Text="Bootstrap Blazor" Target="#scroll" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["FooterShowGotoTitle"]" Introduction="@Localizer["FooterShowGotoIntro"]" Name="ShowGoto">
    <div class="overflow-auto border border-secondary" style="max-height: 120px;">
        <div class="p-2" style="height: 200px">
            <p>@Localizer["FootersContent1"]</p>
            <p>@Localizer["FootersContent2"]</p>
        </div>
        <Footer Text="Bootstrap Blazor" ShowGoto="false" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["FooterChildContentTitle"]" Introduction="@Localizer["FooterChildContentIntro"]" Name="ChildContent">
    <div class="overflow-auto border border-secondary" style="max-height: 120px;">
        <div class="p-2" style="height: 200px">
            <p>@Localizer["FootersContent1"]</p>
            <p>@Localizer["FootersContent2"]</p>
        </div>
        <Footer>
            <div class="row g-3 text-center">
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
                <div class="col-6 col-md-4 col-lg-3">友情链接</div>
            </div>
        </Footer>
    </div>
</DemoBlock>

<h4 class="mt-3">CSS Variables</h4>

<Pre>.footer {
    --bb-footer-bg: var(--bs-secondary);
    --bb-footer-color: inherit;
    --bb-footer-padding: .5rem 1rem;
}</Pre>

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