<Overlay @position="right" @isResizable={{true}} @noBackdrop={{true}} @width="900px" @minResizeWidth={{570}} @fullHeight={{true}}>
    <Overlay::Header @title={{t "storefront.networks.index.network.manage-network"}} @onPressCancel={{this.transitionBack}} />
    <Overlay::Body class="p-0i" @increaseInnerBodyHeightBy="0" @wrapperClass="space-y-4 pt-4">
        <div class="flex flex-col">
            <div class="px-4 flex items-center section-header-title mb-4">
                <FaIcon @icon="network-wired" @size="lg" class="text-sky-500 mr-3" />
                <h3 class="text-lg font-semibold dark:text-white">
                    {{@model.name}}
                </h3>
            </div>
            <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
                <div class="ui-tabs">
                    <nav>
                        <LinkTo @route="networks.index.network.index" class="ui-tab">
                            <FaIcon @icon="cogs" class="mr-2" />
                            <span>{{t "storefront.networks.index.network.settings"}}</span>
                        </LinkTo>
                        <LinkTo @route="networks.index.network.stores" class="ui-tab">
                            <FaIcon @icon="store" class="mr-2" />
                            <span>{{t "storefront.networks.index.network.stores.store"}}</span>
                        </LinkTo>
                        <LinkTo @route="networks.index.network.orders" class="ui-tab">
                            <FaIcon @icon="file-invoice-dollar" class="mr-2" />
                            <span>{{t "storefront.networks.index.network.orders"}}</span>
                        </LinkTo>
                        <LinkTo @route="networks.index.network.customers" class="ui-tab">
                            <FaIcon @icon="users" class="mr-2" />
                            <span>{{t "storefront.networks.index.network.customers"}}</span>
                        </LinkTo>
                    </nav>
                </div>
            </div>
        </div>

        <div>{{outlet}}</div>
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>