@model PlanTempus.Application.Features.Services.Components.ServiceDetailAddonsViewModel

<swp-card>
    <swp-section-label>@Model.LabelAddonsForService</swp-section-label>

    <swp-selectable-list>
        @foreach (var addon in Model.Addons)
        {
            <swp-selectable-item class="no-avatar @(addon.Selected ? "selected" : "")">
                <swp-selectable-checkbox>
                    <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </swp-selectable-checkbox>
                <swp-selectable-info>
                    <swp-selectable-name>@addon.Name</swp-selectable-name>
                    <swp-selectable-meta>
                        <span>@addon.Price</span>
                        <span>@addon.Duration</span>
                        <swp-selectable-type class="@(addon.Required ? "required" : "")">@addon.Type</swp-selectable-type>
                    </swp-selectable-meta>
                </swp-selectable-info>
            </swp-selectable-item>
        }
    </swp-selectable-list>

    <swp-add-button>
        <i class="ph ph-plus"></i>
        @Model.LabelAddExistingAddon
    </swp-add-button>
</swp-card>