[#assign hasAttachments = commerceOrderHttpHelper.hasCommerceOrderAttachments(request)]
[#assign hasReturns = commerceOrderHttpHelper.hasCommerceOrderReturns(request)]
[#assign hasShipments = commerceOrderHttpHelper.hasCommerceOrderShipments(request)]

<div class="component-tabs">
	<nav class="navbar navbar-collapse-relative navbar-expand-md navbar-underline navigation-bar navigation-bar-light">
		<button aria-activedescendant aria-controls="navigationBarCollapse-${fragmentEntryLinkNamespace}" aria-expanded="false" aria-haspopup="listbox" aria-label="${languageUtil.format(locale, 'current-x', ['selection'])}:" class="collapsed navbar-toggler navbar-toggler-link" data-toggle="collapse" role="combobox">
			<span class="navbar-text-truncate">${languageUtil.get(locale, "Orders")}</span>
			<span class="icon-caret-bottom"></span>
		</button>

		<button aria-activedescendant aria-controls="navigationBarCollapse-${fragmentEntryLinkNamespace}" aria-expanded="false" aria-haspopup="listbox" aria-label="${languageUtil.format(locale, 'current-x', ['selection'])}:" class="collapsed navbar-toggler navbar-toggler-link" data-toggle="collapse" role="combobox">
			<span class="navbar-text-truncate">${languageUtil.get(locale, "Shipments")}</span>
			<span class="icon-caret-bottom"></span>
		</button>

		<button aria-activedescendant aria-controls="navigationBarCollapse-${fragmentEntryLinkNamespace}" aria-expanded="false" aria-haspopup="listbox" aria-label="${languageUtil.format(locale, 'current-x', ['selection'])}:" class="collapsed navbar-toggler navbar-toggler-link" data-toggle="collapse" role="combobox">
			<span class="navbar-text-truncate">${languageUtil.get(locale, "Returns")}</span>
			<span class="icon-caret-bottom"></span>
		</button>

		<button aria-activedescendant aria-controls="navigationBarCollapse-${fragmentEntryLinkNamespace}" aria-expanded="false" aria-haspopup="listbox" aria-label="${languageUtil.format(locale, 'current-x', ['selection'])}:" class="collapsed navbar-toggler navbar-toggler-link" data-toggle="collapse" role="combobox">
			<span class="navbar-text-truncate">${languageUtil.get(locale, "Attachments")}</span>
			<span class="icon-caret-bottom"></span>
		</button>

		<div class="collapse navbar-collapse" id="navigationBarCollapse-${fragmentEntryLinkNamespace}">
			<ul class="navbar-nav" role="tablist">
				<li class="nav-item" role="presentation">
					<button aria-controls="tabPanel1-${fragmentEntryLinkNamespace}" aria-selected="true" class="active nav-link" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tab1-${fragmentEntryLinkNamespace}" role="tab">
						<span class="navbar-text-truncate" data-lfr-editable-id="title1" data-lfr-editable-type="text" data-lfr-priority="1" tabindex="-1">
							${languageUtil.get(locale, "Details")}
						</span>
					</button>

					<button aria-controls="tabPanel2-${fragmentEntryLinkNamespace}" aria-selected="false" class="[#if !hasShipments]hide[/#if] nav-link" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tab2-${fragmentEntryLinkNamespace}" role="tab">
						<span class="navbar-text-truncate" data-lfr-editable-id="title2" data-lfr-editable-type="text" data-lfr-priority="1" tabindex="-1">
							${languageUtil.get(locale, "Shipments")}
						</span>
					</button>

					<button aria-controls="tabPanel3-${fragmentEntryLinkNamespace}" aria-selected="false" class="[#if !hasReturns]hide[/#if] nav-link" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tab3-${fragmentEntryLinkNamespace}" role="tab">
						<span class="navbar-text-truncate" data-lfr-editable-id="title3" data-lfr-editable-type="text" data-lfr-priority="1" tabindex="-1">
							${languageUtil.get(locale, "Returns")}
						</span>
					</button>

					<button aria-controls="tabPanel4-${fragmentEntryLinkNamespace}" aria-selected="false" class="[#if !hasAttachments]hide[/#if] nav-link" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tab4-${fragmentEntryLinkNamespace}" role="tab">
						<span class="navbar-text-truncate" data-lfr-editable-id="title4" data-lfr-editable-type="text" data-lfr-priority="1" tabindex="-1">
							${languageUtil.get(locale, "Attachments")}
						</span>
					</button>
				</li>
			</ul>
		</div>
	</nav>

	<div class="tab-content">
		<div aria-labelledby="tab1-${fragmentEntryLinkNamespace}" class="d-none tab-panel-item" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel1-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
			<lfr-drop-zone data-lfr-drop-zone-id="1" data-lfr-priority="1"></lfr-drop-zone>
		</div>

		[#if (layouts?size > 0) || (layoutMode == "edit")]
			<div aria-labelledby="tab2-${fragmentEntryLinkNamespace}" class="d-none tab-panel-item" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel2-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
				<lfr-drop-zone data-lfr-drop-zone-id="2" data-lfr-priority="2"></lfr-drop-zone>
			</div>
		[/#if]

		[#if (layouts?size > 0) || (layoutMode == "edit")]
			<div aria-labelledby="tab3-${fragmentEntryLinkNamespace}" class="d-none tab-panel-item" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel3-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
				<lfr-drop-zone data-lfr-drop-zone-id="3" data-lfr-priority="3"></lfr-drop-zone>
			</div>
		[/#if]

		[#if (layouts?size > 0) || (layoutMode == "edit")]
			<div aria-labelledby="tab4-${fragmentEntryLinkNamespace}" class="d-none tab-panel-item" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel4-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
				<lfr-drop-zone data-lfr-drop-zone-id="4" data-lfr-priority="4"></lfr-drop-zone>
			</div>
		[/#if]
	</div>
</div>