<Layout::Section::Header @title={{t "storefront.common.product"}}>
    <Button @type="magic" @icon="tags" @text={{t "storefront.products.index.manage-addons"}} class="mr-2 flex-shrink-0" @onClick={{this.manageAddons}} />
    <Button
        @type="primary"
        @icon="plus"
        @iconPrefix="fas"
        @text={{t "storefront.common.new"}}
        class="mr-2 flex-shrink-0"
        @onClick={{this.createNewProduct}}
        @disabled={{not this.category}}
        @helpText={{unless this.category "Select a category to create a product within"}}
    />
    <Button @icon="file-import" @text={{t "storefront.common.import"}} class="mr-2" @wrapperClass="hidden lg:flex flex-shrink-0" @onClick={{this.importProducts}} />
    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @wrapperClass="hidden lg:flex flex-shrink-0" @text={{t "storefront.common.export"}} />
</Layout::Section::Header>

<Layout::Section::Body class="section-content flex flex-col lg:flex-row">
    <AsideItemScroller
        @title={{t "storefront.products.index.aside-scroller.title"}}
        @resource="category"
        @items={{@model}}
        @titleKey="name"
        @onCreate={{this.createNewProductCategory}}
        @onInit={{this.setAsideScroller}}
        @customTopItemComponent="aside-item-scroller/item"
        @customTopItemText={{t "storefront.products.index.aside-scroller.custom-top-item-text"}}
        @customTopItemOnClick={{this.viewAllProducts}}
        @customTopItemClass="border-t border-gray-200 dark:border-gray-700"
        as |category|
    >
        <a href="javascript:;" class="aside-item-link cursor-pointer flex w-full md:px-6 md:py-5" {{on "click" (fn this.switchCategory category)}}>
            <div class="flex items-center justify-between">
                <div>
                    <h4>{{category.name}}</h4>
                </div>
            </div>
        </a>
    </AsideItemScroller>

    <div id="productsViewPort" class="w-full h-full">
        {{outlet}}
    </div>
</Layout::Section::Body>