@namespace Oqtane.Modules.Controls
@inherits LocalizableComponent

<div class="d-flex">
    <div>
        <a data-toggle="collapse" class="app-link-unstyled" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name" @onclick:preventDefault="true">
            <h5>@_heading</h5>
        </a>
    </div>
    <div class="ml-auto">
        <a data-toggle="collapse" class="app-link-unstyled float-right" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name" @onclick:preventDefault="true">
            <i class="oi oi-chevron-bottom"></i>&nbsp;
        </a>
    </div>
</div>
<div class="d-flex">
    <hr class="app-rule" />
</div>
<div class="collapse" id="@Name">
    @ChildContent
</div>

@code {
    private string _heading = string.Empty;
    private string _expanded = string.Empty;

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Name { get; set; } // required - the name of the section

    [Parameter]
    public string Heading { get; set; } // optional - will default to Name if not provided

    [Parameter]
    public string Expanded { get; set; } // optional - will default to false if not provided

    protected override void OnInitialized()
    {
        _heading = (!string.IsNullOrEmpty(Heading)) ? Heading : Name;
        _expanded = (!string.IsNullOrEmpty(Expanded)) ? Expanded : "false";
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        if (IsLocalizable)
        {
            _heading = !string.IsNullOrEmpty(Heading)
                ? Localize(nameof(Heading))
                : Localize(nameof(Name));
        }
    }
}