@page "/footers"

<h3>Footer</h3>

<h4>Displayed at the bottom of the page, with a back to top button</h4>

<p>When using <code>Footer</code> components, pay attention to the setting of the style sheet <code>position</code> attribute</p>

<DemoBlock Title="Basic usage" Introduction="Pass the ID of the scroll bar component to the footer component" Name="Normal">
    <div id="scroll" class="overflow-auto border border-secondary" style="max-height: 120px;">
        <div class="p-2" style="height: 200px">
            <p>The Footer component is displayed at the bottom, and the page will automatically scroll back to the top when you click to return to the top</p>
            <p>This example passes the component client ID</p>
        </div>
        <Footer Text="Bootstrap Blazor" Target="#scroll" />
    </div>
</DemoBlock>

<DemoBlock Title="Show Goto" Introduction="Set <code>ShowGoto</code> to <code>false</code> for hide the <code>Goto</code> navigator on the right of footer" Name="ShowGoto">
    <div class="overflow-auto border border-secondary" style="max-height: 120px;">
        <div class="p-2" style="height: 200px">
            <p>The Footer component is displayed at the bottom, and the page will automatically scroll back to the top when you click to return to the top</p>
            <p>This example passes the component client ID</p>
        </div>
        <Footer Text="Bootstrap Blazor" ShowGoto="false" />
    </div>
</DemoBlock>

<DemoBlock Title="ChildContent" Introduction="Set <code>ChildContent</code> for custom the child content" Name="ChildContent">
    <div class="overflow-auto border border-secondary" style="max-height: 120px;">
        <div class="p-2" style="height: 200px">
            <p>The Footer component is displayed at the bottom, and the page will automatically scroll back to the top when you click to return to the top</p>
            <p>This example passes the component client ID</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>

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

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

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Footers
{
    /// <summary>
    /// 
    /// </summary>
    [Inject]
    [NotNull]
    public IStringLocalizer<Footers>? Localizer { get; set; }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new() {
            Name = "Text",
            Description = Localizer["Desc1"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new() {
            Name = "Target",
            Description = Localizer["Desc2"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new() {
            Name = nameof(Footer.ShowGoto),
            Description = Localizer["ShowGotoDesc"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new() {
            Name = nameof(Footer.ChildContent),
            Description = Localizer["ChildContentDesc"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}