<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"
        @permission="storefront list product-addon"
        @onClick={{this.manageAddons}}
    />
    <Button
        @type="primary"
        @icon="plus"
        @iconPrefix="fas"
        @text={{t "storefront.common.new"}}
        @onClick={{this.createNewProduct}}
        @disabled={{not this.category}}
        @helpText={{unless this.category "Select a category to create a product within"}}
        @permission="storefront create product"
        class="mr-2 flex-shrink-0"
    />
    <Button
        @icon="file-import"
        @text={{t "storefront.common.import"}}
        class="mr-2"
        @wrapperClass="hidden lg:flex flex-shrink-0"
        @permission="storefront import product"
        @onClick={{this.importProducts}}
    />
    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @wrapperClass="hidden lg:flex flex-shrink-0" @permission="storefront export product" @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"
            disabled={{cannot "storefront list product"}}
            {{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>