@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Frontend

<div class="accordion btn-icon-color" id="accordion-@(Model.ID)" style="
    --bs-accordion-btn-icon: url('/Files/Images/Icons/plus.svg');
    --bs-accordion-btn-active-icon: url('/Files/Images/Icons/minus.svg');
    --bs-accordion-btn-icon-width: 1rem;
    --bs-accordion-btn-padding-x: 1.5rem;
    --bs-accordion-btn-padding-y: 1.5rem;
    --bs-accordion-body-padding-x: 1.5rem;
    --bs-accordion-body-padding-y: 1.5rem;">

    @if (Model.Item.TryGetItems("Accordion_Items", out var accordionItems))
    {
        foreach (var item in accordionItems)
        {
            <div class="accordion-item">
                <div class="accordion-header">
                    <div role="button" class="text-decoration-none accordion-button shadow-none gap-3 collapsed mb-0-last-child" data-bs-toggle="collapse" data-bs-target="#collapse-@Model.ID-@item.Id" aria-expanded="false" aria-controls="collapse-@Model.ID-@item.Id">
                        @if (item.TryGetString("Icon", out string icon))
                        {
                            <span class="icon-2">
                                @ReadFile(icon)
                            </span>
                        }
                        @if (item.TryGetString("Title", out string title))
                        {
                            @title
                        }
                    </div>
                </div>
                <div id="collapse-@Model.ID-@item.Id" class="accordion-collapse collapse" data-bs-parent="#accordion-@Model.ID">
                    <div class="accordion-body mb-0-last-child opacity-75">
                        @if (item.TryGetString("Text", out string text))
                        {
                            @text
                        }
                    </div>
                </div>
            </div>
        }
    }
</div>
