Accordion

<LumexAccordion>
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2">
        <TitleContent>
            <span>
                Accordion <strong>#2</strong>
            </span>
        </TitleContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion Disabled="@true">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion DisabledItems="@(["2"])">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion Expanded="@true">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion ExpandedItems="@(["2"])">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion SelectionMode="@SelectionMode.Multiple">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="Accordion 1"
                        Subtitle="Press to expand">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        <SubtitleContent>
            <span>
                Press to expand <strong>item 2</strong>
            </span>
        </SubtitleContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="Accordion 3"
                        Subtitle="Press to expand">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="Ross Geller"
                        Subtitle="4 unread messages">
        <StartContent>
            <LumexAvatar Bordered="@true"
                         Radius="@Radius.Large"
                         Color="@ThemeColor.Primary"
                         Src="https://i.pravatar.cc/150?img=6" />
        </StartContent>
        <ChildContent>@_content</ChildContent>
    </LumexAccordionItem>

    <LumexAccordionItem Id="2"
                        Title="Sheldon Cooper"
                        Subtitle="3 incompleted steps">
        <StartContent>
            <LumexAvatar Bordered="@true"
                         Radius="@Radius.Large"
                         Color="@ThemeColor.Success"
                         Src="https://i.pravatar.cc/150?img=11" />
        </StartContent>
        <ChildContent>@_content</ChildContent>
    </LumexAccordionItem>

    <LumexAccordionItem Id="3"
                        Title="Bruce Wayne">
        <SubtitleContent>
            <p class="flex">
                2 issues to<span class="text-primary ml-1">fix now</span>
            </p>
        </SubtitleContent>
        <StartContent>
            <LumexAvatar Bordered="@true"
                         Radius="@Radius.Large"
                         Color="@ThemeColor.Secondary"
                         Src="https://i.pravatar.cc/150?img=12" />
        </StartContent>
        <ChildContent>@_content</ChildContent>
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content = @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

@using LumexUI.Shared.Icons

<LumexAccordion>
    <LumexAccordionItem Id="1" Title="Anchor">
        <ChildContent>@_content</ChildContent>
        <IndicatorContent>
            <LinkIcon />
        </IndicatorContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Moon">
        <ChildContent>@_content</ChildContent>
        <IndicatorContent>
            <MoonIcon />
        </IndicatorContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Sun">
        <ChildContent>@_content</ChildContent>
        <IndicatorContent>
            <SunIcon />
        </IndicatorContent>
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content = @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

@using LumexUI.Shared.Icons

<LumexAccordion>
    <LumexAccordionItem Id="1" Title="Theme">
        <ChildContent>@_content</ChildContent>
        <IndicatorContent Context="expanded">
            @(expanded ? @<SunIcon /> : @<MoonIcon />)
        </IndicatorContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Anchor">
        <ChildContent>@_content</ChildContent>
        <IndicatorContent>
            <LinkIcon />
        </IndicatorContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Sun">
        <ChildContent>@_content</ChildContent>
        <IndicatorContent>
            <SunIcon />
        </IndicatorContent>
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content = @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="Accordion 1"
                        @bind-Expanded="@_itemOneExpanded">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2"
                        Title="Accordion 2"
                        @bind-Expanded="@_itemTwoExpanded">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="@_itemThreeTitle"
                        Expanded="@_itemThreeExpanded"
                        ExpandedChanged="@OnExpandedChanged">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;

    private bool _itemOneExpanded;
    private bool _itemTwoExpanded;
    private bool _itemThreeExpanded;

    private string _itemThreeTitle = "Accordion 3";

    private void OnExpandedChanged( bool expanded )
    {
        _itemThreeExpanded = expanded;
        _itemThreeTitle = expanded ? "I am expanded" : "I am collapsed";
    }
}

@using LumexUI.Shared.Icons

<LumexAccordion Variant="@AccordionVariant.Shadow"
                ShowDividers="@false"
                Class="p-2 flex flex-col gap-1 max-w-sm"
                ItemClasses="@_itemClasses">
    <LumexAccordionItem Id="1"
                        Title="Connected Devices">
        <StartContent>
            <MonitorSmartphoneIcon class="text-primary" />
        </StartContent>
        <SubtitleContent>
            2 issues to <span class="text-primary">fix now</span>
        </SubtitleContent>
        <ChildContent>@_content</ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="2"
                        Title="Apps Permissions"
                        Subtitle="3 apps have read permissions">
        <StartContent>
            <ShieldAlertIcon />
        </StartContent>
        <ChildContent>@_content</ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="Pending tasks"
                        Subtitle="Complete your profile"
                        Classes="@(new() { Subtitle = "text-warning" })">
        <StartContent>
            <InfoIcon class="text-warning" />
        </StartContent>
        <ChildContent>@_content</ChildContent>
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content = @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;

    private AccordionItemSlots _itemClasses = new()
    {
        Title = "font-medium text-medium",
        Trigger = "px-2 py-0 hover:bg-default-100 rounded-lg h-14",
        Content = "text-small p-2"
    };
}