<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <InputGroup @name="Catalog Name" @value={{@options.catalog.name}} @disabled={{cannot "storefront create catalog"}} />
        <InputGroup @name="Catalog Description" @value={{@options.catalog.description}} @disabled={{cannot "storefront create catalog"}} />
        <InputGroup @name="Catalog Status">
            <Select
                class="w-full"
                @value={{@options.catalog.status}}
                @placeholder="Select catalog status"
                @options={{@options.statusOptions}}
                @onSelect={{fn (mut @options.catalog.status)}}
                @humanize={{true}}
            />
        </InputGroup>
        <InputGroup>
            <div class="rounded-lg flex flex-col px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                <div class="mb-2 flex justify-between">
                    <div class="text-sm font-semibold dark:text-gray-100">Product Catalog</div>
                    <div>
                        <Button @icon="plus" @text="Add Catalog Category" @onClick={{@options.createCategory}} />
                    </div>
                </div>
                <div class="space-y-2">
                    {{#each @options.catalog.categories as |category|}}
                        <div>
                            <div
                                class="{{if category.deleting 'opacity-50'}}
                                    {{if category.expanded 'rounded-t-lg' 'rounded-lg'}}
                                    flex flex-row items-center justify-between px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-100 dark:border-gray-900 shadow-sm"
                            >
                                <div>
                                    <div class="text-sm dark:text-gray-100">{{category.name}}</div>
                                </div>
                                <div class="flex flex-row items-center space-x-1">
                                    <Button
                                        @icon={{if category.expanded "compress" "expand"}}
                                        @onClick={{fn @options.toggleCategory category}}
                                        @helpText="Collapse or expand category products"
                                        @size="xs"
                                    />
                                    <Button @icon="tags" @onClick={{fn @options.addProducts category}} @helpText="Manage category products" @size="xs" />
                                    <Button @icon="pencil" @onClick={{fn @options.editCategory category}} @helpText="Edit category name" @size="xs" />
                                    <Button @type="danger" @icon="trash" @onClick={{fn @options.deleteCategory category}} @helpText="Delete category" @size="xs" />
                                </div>
                            </div>
                            {{#if category.expanded}}
                                <div class="rounded-b-lg flex flex-col px-2 py-1 bg-gray-300 dark:bg-gray-900 border border-gray-100 dark:border-gray-900 shadow-sm">
                                    {{#if category.adding_products}}
                                        <div>
                                            <ComboBox
                                                @options={{@options.allProducts}}
                                                @selected={{category.products}}
                                                @optionLabel="name"
                                                @comparator="name"
                                                @selectionBoxLabel="Selected"
                                                @onChange={{fn @options.confirmSelectedProducts category}}
                                            />
                                            <div class="mt-2">
                                                <Button @icon="check" @type="primary" @text="Done" @onClick={{fn @options.finishAddingProducts category}} />
                                            </div>
                                        </div>
                                    {{else}}
                                        <div class="flex flex-row mb-2">
                                            <Button @icon="edit" @text="Edit Products" @onClick={{fn @options.addProducts category}} @size="xs" />
                                        </div>
                                        <div class="grid grid-cols-4 gap-2">
                                            {{#each category.products as |product|}}
                                                <div class="rounded-lg bg-gray-100 dark:bg-gray-800 border dark:border-gray-700 border-gray-200">
                                                    <Image src={{product.primary_image_url}} class="rounded-t-lg w-full h-32" />
                                                    <div class="flex flex-col p-2">
                                                        <div class="text-sm truncate font-semibold dark:text-gray-100">{{product.name}}</div>
                                                        <div class="text-sm truncate dark:text-gray-200">{{n-a product.description}}</div>
                                                        <div class="text-sm dark:text-gray-200">{{format-currency product.price product.currency}}</div>
                                                        <div class="mt-2">
                                                            <Button @type="danger" @icon="trash" @text="Remove" @onClick={{fn @options.removeProduct category product}} @size="xs" />
                                                        </div>
                                                    </div>
                                                </div>
                                            {{/each}}
                                        </div>
                                    {{/if}}
                                </div>
                            {{/if}}
                        </div>
                    {{/each}}
                </div>
            </div>
        </InputGroup>

        {{!-- <ContentPanel @title="Availability" @open={{@options.catalog.hours.length}} @pad={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
            <div class="p-2">
                <ScheduleManager @subject={{@options.catalog}} @subjectKey="catalog_uuid" @hourModelType="catalog-hour" class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2" />
            </div>
        </ContentPanel> --}}
    </div>
</Modal::Default>