{!{@tech.ebp.oqm.baseStation.service.mongo.search.SearchResult searchResult}!}
{!{@tech.ebp.oqm.baseStation.service.mongo.search.PagingCalculations pagingCalculations}!}
{!{@java.util.Map allowedUnitsMap}!}
{#include webui/mainWebPageTemplate navbar="full" showTitle=true title='Storage' page='storage'}
{!
Accepts:
- showSearch: bool, to have the search form expanded already
- numStorageBlocks: int, the number of storage blocks in the system
- allowedUnitsMap- Map
<String, List
<Unit>> the map of allowed units
    !}
    {#styleSheets}
    <link rel="stylesheet" href="{rootPrefix}/res/css/storageTree.css">
    <link rel="stylesheet" href="{rootPrefix}/lib/treant-js/Treant.css">
    <link rel="stylesheet" href="{rootPrefix}/lib/treant-js/vendor/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" href="{rootPrefix}/lib/Croppie/2.6.4/croppie.css"/>
    {/styleSheets}
    {#pageStyle}
    #storageBlockViewCarousel{
        max-width:400px;
    }
    {/pageStyle}
    {#pageContent}
    <div class="row mb-2">
        <div class="col d-grid gap-2">
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addEditModal"
                    onclick="setupAddEditForAdd();"
                    id="mainAddButton">{#icons/add}{/icons/add} Add Storage Block
            </button>
        </div>
        <!--
        <div class="col d-grid gap-2">
            <button type="button" class="btn btn-info">{#icons/view}{/icons/view} Storage block stats</button>
        </div>
        -->
</div>
<div class="row">
    <div class="col accordion" id="searchAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header" id="searchHeader">
                <button class="accordion-button {#if !showSearch}collapsed{/if}" type="button" data-bs-toggle="collapse"
                        data-bs-target="#searchCollapse" aria-expanded="{#if showSearch}true{#else}false{/if}"
                        aria-controls="searchCollapse">
                    {#icons/search}{/icons/search} Search Fields
                </button>
            </h2>
            <div id="searchCollapse" class="accordion-collapse collapse {#if showSearch}show{/if}"
                 aria-labelledby="searchHeader" data-bs-parent="#searchAccordion">
                <div class="accordion-body">
                    {#search/storage/searchForm id='mainPageSearch' rootPrefix=rootPrefix}
                    {/search/storage/searchForm}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col table-responsive">
        <table id="mainPageSearchResults" class="table table-bordered table-striped table-hover table-sm">
            {#search/storage/searchResults searchResults=searchResults actionType='full' searchFormId='mainPageSearch' rootPrefix=rootPrefix}
            {/search/storage/searchResults}
        </table>
    </div>
</div>

            <div class="row">
                <div class="col">
                    <div class="chart" id="mainTreeChart"></div>
                </div>
            </div>
            <br/>
    {!{#inputs/units/unitOptionsHidden allowedUnitsMap=allowedUnitsMap}!}
    {!{/inputs/units/unitOptionsHidden}!}
    {/pageContent}
{#modals}

    {#modal id='addEdit' size='lg' title='Add/Edit Storage Block'}
        <div id="addEditFormMessages"></div>
        <form id="addEditStorageForm">
            <input type="hidden" id="addEditFormMode" value="">
            <input type="hidden" id="addEditFormId" value="">
            <div class="mb-3 row">
                <label for="addEditLabelInput" class="col-sm-2 col-form-label">Label</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="addEditLabelInput" placeholder="Label" required>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="addEditNicknameInput" class="col-sm-2 col-form-label">Nickname</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="addEditNicknameInput" aria-describedby="addEditNicknameInput-help" placeholder="Nickname">
                    <div id="addEditNicknameInput-help" class="form-text">
                        Optional. A more recognizable name to call this storage block.
                    </div>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="addEditDescriptionInput" class="col-sm-2 col-form-label">Description</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="addEditDescriptionInput" placeholder="Description"></textarea>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="addEditLocationInput" class="col-sm-2 col-form-label">Location</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="addEditLocationInput" aria-describedby="addEditLocationInput-help" placeholder="Location">
                    <div id="addEditLocationInput-help" class="form-text">
                        Optional. Where this storage block is generally located.
                    </div>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="addEditParentInputName" class="col-sm-2 col-form-label">Parent</label>
                <div class="col-sm-10">
                    {#inputs/storageBlock/storageBlockSelectInput id=id blockIdName='addEditParentInput' help="Optional. The storage block this block is to be located within." /}
                </div>
            </div>
            <div class="mb-3 row">
                <label for="addEditCategoryInput" class="col-form-label col-sm-2">Stored Categories:</label>
                <div class="col-sm-10">
                    {#inputs/categoryInput id="addEditCategoriesInput" allCategorySearchResults=allCategorySearchResults multi=true}
                    {/inputs/categoryInput}
                    <div id="itemCatInputaddEditCategoriesInput-help" class="form-text">The categories of item this storage block holds. {#links/itemCategory}{/links/itemCategory}</div>
                </div>
            </div>

            {#search/image/imageSelectFormInput /}

            {! TODO:: do capacities: [FR]: Enable managing storage block capacities in UI #230 !}
            {!{#inputs/capacityInput}!}
            {!{/inputs/capacityInput}!}

            {#inputs/keywordInput}
            {/inputs/keywordInput}
            {#inputs/attInput}
            {/inputs/attInput}
            <hr />
            <div class="accordion" id="addBulkAccord">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="addBulkAccordHeading">
                        <button class="accordion-button collapsed thinAccordion" type="button" data-bs-toggle="collapse" data-bs-target="#addBulkAccordCollapse" aria-expanded="false" aria-controls="addBulkAccordCollapse">
                            Bulk Add Options
                        </button>
                    </h2>
                    <div id="addBulkAccordCollapse" class="accordion-collapse collapse" aria-labelledby="addBulkAccordHeading" data-bs-parent="#addBulkAccord">
                        <div class="accordion-body">
                            <div class="row mb-4">
                                <div class="col">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" value="true" id="addBulkEnabledInput" aria-describedby="#bulkHelp" onchange="setBulkInsertInputState()">
                                        <label class="form-check-label" for="addBulkEnabledInput">
                                            Do bulk insert
                                        </label>
                                        <div id="bulkHelp" class="form-text">Bulk insert will make a copies of the block described above using the settings below.</div>
                                    </div>
                                </div>
                            </div>
                            <div id="bulkInputControls">
                                <div class="row mb-3">
                                    <div class="col">
                                        <label for="addBulkNumberInput" class="form-label"># of storage blocks to make</label>
                                        <input type="number" class="form-control" id="addBulkNumberInput" aria-describedby="addBulkNumberInputHelp" min="1" value="1" onchange="updateBulkLabelExample()">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="true" id="addBulkLeadingZeroesInput" onchange="updateBulkLabelExample()">
                                            <label class="form-check-label" for="addBulkLeadingZeroesInput">
                                                Leading Zeroes
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h5>
                                            Example Labels:
                                        </h5>
                                        <p id="addBulkExample">

                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        {#footerButtons}
            <button type="submit" form="addEditStorageForm" class="btn btn-success" id="addEditFormSubmitButton"></button>
        {/footerButtons}
    {/modal}


{#search/storage/searchSelectModal otherModalId="addEditModal" rootPrefix=rootPrefix /}
{#search/image/imageSearchSelectModal otherModalId="addEditModal" rootPrefix=rootPrefix /}

{#modal id='storageBlockInventorySheetPrintout' title='Inventory Sheet Printout' otherModalId="storageBlockViewModal" submitForm="storageBlockInventorySheetPrintoutForm" submitDismiss=false}
	{#titleIcon}{#icons/print}{/icons/print}{/titleIcon}
    <div class="row">
        <form class="col" id="storageBlockInventorySheetPrintoutForm" method="get" action="">
            <div class="mb-3 row">
                <label for="storageBlockInventorySheetPrintoutFormBlockNameInput" class="col-sm-4 col-form-label">Storage Block</label>
                <div class="col-sm-8">
                    <input type="text" readonly class="form-control-plaintext" id="storageBlockInventorySheetPrintoutFormBlockNameInput">
                </div>
            </div>

            <div class="mb-3 row">
                <label for="storageBlockInventorySheetPrintoutFormBlockOrientationInput" class="col-sm-4 col-form-label">Page Orientation</label>
                <div class="col-sm-8">
                    <select class="form-select" id="storageBlockInventorySheetPrintoutFormBlockOrientationInput" name="orientation">
                        {#for curOrientation in pageOrientationOptions}
                            <option value="{curOrientation.name()}" {#if curOrientation_count == 1}selected{/if}>{curOrientation.name().toLowerCase()}</option>
                        {/for}
                    </select>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="storageBlockInventorySheetPrintoutFormSizeInput" class="col-sm-4 col-form-label">Page Size</label>
                <div class="col-sm-8">
                    <select class="form-select" id="storageBlockInventorySheetPrintoutFormSizeInput" name="pageSize">
                        {#for curSize in pageSizeOptions}
                            <option value="{curSize}" {#if curSize_count == 1}selected{/if}>{curSize}</option>
                        {/for}
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4 col-form-label">
                    Options
                </div>
                <div class="col-sm-8">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" checked name="includeNumCol" id="storageBlockInventorySheetPrintoutFormIncludeNumInput" value="true">
                        <label class="form-check-label" for="storageBlockInventorySheetPrintoutFormIncludeNumInput">Include # Column</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" checked name="includeImageCol" id="storageBlockInventorySheetPrintoutFormIncludeImageInput" value="true">
                        <label class="form-check-label" for="storageBlockInventorySheetPrintoutFormIncludeImageInput">Include Image Column</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" checked name="includeConditionCol" id="storageBlockInventorySheetPrintoutFormIncludeConditionInput" value="true">
                        <label class="form-check-label" for="storageBlockInventorySheetPrintoutFormIncludeConditionInput">Include Condition Column</label>
                    </div>
                </div>
            </div>
        </form>
    </div>
{/modal}

{#modal id='storageBlockView' size='xl' title='Storage Block View'}
    {#titleIcon}{#icons/storageBlock}{/icons/storageBlock}{/titleIcon}
    <div class="row">
        <div class="col" id="storageBlockViewMessages">
        </div>
    </div>
    <div class="row">
        {#carousel id='storageBlockViewCarousel' carouselCss='col'}{/carousel}
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title" style="display: inline">Id:</h5>
                    <p class="card-text" style="display: inline"><span id="storageBlockViewId"></span>{#copyTextButton /}</p>
                    <p style="margin-bottom: 5px;">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#storageBlockInventorySheetPrintoutModal" onclick="setupStorageBlockInvSheetPrintoutForm()">{#icons/print}{/icons/print} Printout</button>
                    </p>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Location in storage:</h5>
                    <div id="storageBlockViewBreadcrumbContainer">
                    </div>
                    <h5 class="card-title" id="storageBlockViewChildrenContainerTitle">Children:</h5>
                    <div id="storageBlockViewChildrenContainer">
                    </div>
                </div>
            </div>
            <div class="card" id="storageBlockViewLocationContainer">
                <div class="card-body">
                    <h5 class="card-title">Location:</h5>
                    <p class="card-text" id="storageBlockViewLocation"></p>
                </div>
            </div>
            <div class="card" id="storageBlockViewDescriptionContainer">
                <div class="card-body">
                    <h5 class="card-title">Description:</h5>
                    <p class="card-text" id="storageBlockViewDescription"></p>
                </div>
            </div>
            <div class="card" id="storageBlockViewCapacityContainer">
                <div class="card-body">
                    <h5 class="card-title">Capacities:</h5>
                    <div id="storageBlockViewCapacity">
                    </div>
                </div>
            </div>
            <div class="card" id="storageBlockViewStoredItemCategoriesContainer">
                <div class="card-body">
                    <h5 class="card-title">{#icons/categories}{/icons/categories} Stored Item Categories:</h5>
                    <div id="storageBlockViewStoredItemCategories">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="row">
        {#objView/objKeywordsView id='viewKeywordsSection' classes='col' /}
        {#objView/objAttsView id='viewAttsSection' classes='col' /}
    </div>
    <hr />
    <div class="d-flex flex-row mb-1">
		<h3>{#icons/items /} Items Stored:</h3>

		<div class="ms-auto d-flex">

			{! TODO:: once we know how we want to do this !}
			{!{#itemStored/transaction/buttons/transactionDropdown dropdownClasses="btn-sm me-1" buttonText=false checkinButton=false /}!}

			<div>
			{!TODO:: functionality here!}
				<button type="button" class="btn btn-sm btn-outline-success" style="display: inline-block; vertical-align: middle;" onclick="addBlockToItemButtonClicked();" data-bs-toggle="modal" data-bs-target="#itemSearchSelectModal">
					{#icons/add /} Add Item
				</button>
			</div>
		</div>
	</div>

	<div class="accordion" id="itemsInBlockSearchAccordion">
		<div class="accordion-item">
			<h2 class="accordion-header" id="itemsInBlockSearchHeader">
				<button class="accordion-button {#if !showSearch}collapsed{/if}" type="button" data-bs-toggle="collapse"
						data-bs-target="#itemsInBlockSearchCollapse" aria-expanded="{#if showSearch}true{#else}false{/if}"
						aria-controls="itemsInBlockSearchCollapse">
					{#icons/search /}
					Search Fields
				</button>
			</h2>
			<div id="itemsInBlockSearchCollapse" class="accordion-collapse collapse {#if showSearch}show{/if}"
				 aria-labelledby="itemsInBlockSearchHeader" data-bs-parent="#itemsInBlockSearchAccordion">
				<div class="accordion-body">
					{#search/item/itemSearchForm id='itemsInBlockSearchForm' rootPrefix=rootPrefix allCategorySearchResults=allCategorySearchResults /}
				</div>
			</div>
		</div>
	</div>
	<table class=" table table-bordered table-striped table-hover table-sm" id="itemsInBlockSearchResults">
	</table>

    <div class="row">
        <div class="col">
            {#objView/history/objHistoryView containerId='storageBlockHistory' objectUrl=(rootPrefix + '/api/passthrough/inventory/storage-block/') accordion=true /}
        </div>
    </div>
{/modal}
{#search/item/itemSearchSelectModal rootPrefix=rootPrefix allCategorySearchResults=allCategorySearchResults /}
	{#CodeScannerModal /}

{/modals}

{#scripts}
	<script src="{rootPrefix}/lib/treant-js/vendor/raphael.js"></script>
	<script src="{rootPrefix}/lib/treant-js/vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
	<script src="{rootPrefix}/lib/treant-js/vendor/jquery.easing.js"></script>
	<script src="{rootPrefix}/lib/treant-js/Treant.js"></script>


{/scripts}
{#pageScript}
	<script type="module">
		import { StorageSearchSelect } from '{rootPrefix}/res/js/obj/storageBlock/StorageSearchSelect.js';
		import { StorageBlockTree } from '{rootPrefix}/res/js/obj/storageBlock/StorageBlockTree.js';
		import { HistorySearchUtils } from '{rootPrefix}/res/js/HistorySearchUtils.js';
		import { KeywordAttEdit } from '{rootPrefix}/res/js/obj/ObjEditUtils.js';
		import { KeywordAttUtils } from '{rootPrefix}/res/js/obj/ObjViewUtils.js';
		import { Rest } from '{rootPrefix}/res/js/Rest.js';
		import { ImageSearchSelect } from '{rootPrefix}/res/js/obj/media/ImageSearchSelect.js';
		import { ImageAddFromSelect } from '{rootPrefix}/res/js/obj/media/ImageAddFromSelect.js';
		import { ImageAdd } from '{rootPrefix}/res/js/obj/media/ImageAdd.js';
		import { Getters } from '{rootPrefix}/res/js/obj/Getters.js';
		import { ItemCategoryView } from '{rootPrefix}/res/js/obj/itemCategory/ItemCategoryView.js';
		import { UriUtils } from '{rootPrefix}/res/js/UriUtils.js';
		import { ItemCategoryInput } from '{rootPrefix}/res/js/obj/itemCategory/ItemCategoryInput.js';
		import { TextCopyUtils } from '{rootPrefix}/res/js/TextCopyUtils.js';
		import { SearchUtils } from '{rootPrefix}/res/js/SearchUtils.js';
		import { ItemSearchSelect } from '{rootPrefix}/res/js/obj/item/ItemSearchSelect.js';
		import { ModalUtils } from "{rootPrefix}/res/js/ModalUtils.js";
		import { Carousel } from "{rootPrefix}/res/js/Carousel.js";

		// init necessary modules
		ImageSearchSelect.init();
		ImageAdd.init();
		ImageAddFromSelect.init();
		SearchUtils.init();
		ItemCategoryInput.init();
		ItemSearchSelect.init();
		StorageSearchSelect.init();
		HistorySearchUtils.init();
		Getters.init();

		console.log("Page modules loaded.");
	</script>
	<script defer>
		let storageBlockViewModal = $('#storageBlockViewModal');

		let itemsInBlockSearchForm = $("#itemsInBlockSearchForm");
		let itemsInBlockSearchResults = $("#itemsInBlockSearchResults");
		let itemsInBlockSearchStorageBlockInput = itemsInBlockSearchForm.find(".storageBlockInput");

		console.log("Initializing item search select.");
		itemsInBlockSearchForm.on("submit", function (event) {
			event.preventDefault();
			console.log("Submitting search form.");

			let searchParams = new URLSearchParams(new FormData(event.target));
			console.log("URL search params: " + searchParams);

			Rest.call({
				spinnerContainer: storageBlockViewModal.get(0),
				url: Rest.passRoot + "/inventory/item?" + searchParams,
				returnType: "html",
				method: 'GET',
				failNoResponse: null,
				failNoResponseCheckStatus: true,
				extraHeaders: {
					"accept": "text/html",
					"actionType": "view",
					"searchFormId": "itemsInBlockSearchForm",
					// "inputIdPrepend": ItemSearchSelect.itemSearchSelectModal.attr("data-bs-inputIdPrepend"),
					// "otherModalId": ItemSearchSelect.itemSearchSelectModal.attr("data-bs-otherModalId")
				},
				async: false,
				done: function (data) {
					console.log("Got data!");
					itemsInBlockSearchResults.html(data);
				}
			});
		});
		console.log("Done initializing item search select.");

		// Search.fillInQueryForm($("#mainStorageSearch"));

		function clearParentInput(caller){
			caller.siblings("input[name=parentName]").val("");
			caller.siblings("input[name=parentId]").val("");
		}

		function removeStorageBlock(blockId) {
			if (!confirm("Are you sure you want to delete this storage block? This cannot be undone.")) {
				return;
			}

			console.log("Removing storage block " + blockId);

			Rest.call({
				url: Rest.passRoot +"/inventory/storage-block/" + blockId,
				method: "DELETE",
				async: false,
				done: function (data) {
					PageMessageUtils.reloadPageWithMessage("Removed storage block successfully!", "success", "Success!");
				},
				fail: function (data) {
					console.warn("Bad response from storage block removal request: " + JSON.stringify(data));
					PageMessageUtils.addMessageToDiv(addEditFormMessages, "danger", "Failed to remove storage block.", "Failed", null);
				}
			});
		}


		let addEditStorageForm = $("#addEditStorageForm");
		let addEditModalTitleText = $("#addEditModalLabel");
		let addEditModalTitleIcon = $("#addEditModalLabelIcon");
		let addEditFormSubmitButton = $("#addEditFormSubmitButton");
		let addEditFormMessages = $("#addEditFormMessages");
		//inputs
		let addEditFormMode = $("#addEditFormMode");
		let addEditFormId = $("#addEditFormId");
		let addEditLabelInput = $("#addEditLabelInput");
		let addEditNicknameInput = $("#addEditNicknameInput");
		let addEditDescriptionInput = $("#addEditDescriptionInput");
		let addEditLocationInput = $("#addEditLocationInput");
		let addEditParentInput = $("#addEdit-storageBlockInput");
		let addEditCategoriesInput = $("#addEditCategoriesInput");
		let imagesSelected = $(".imagesSelected");
		let capacityInputDiv = addEditStorageForm.find(".capacityInputDiv");

		let keywordInputDiv = addEditStorageForm.find(".keywordInputDiv");
		let attInputDiv = addEditStorageForm.find(".attInputDiv");

		let addBulkAccord = $("#addBulkAccord");
		let addBulkEnabledInput = $("#addBulkEnabledInput");
		let bulkInputControls = $("#bulkInputControls");
		let addBulkNumberInput = $("#addBulkNumberInput");
		let addBulkLeadingZeroesInput = $("#addBulkLeadingZeroesInput");
		let addBulkExample = $("#addBulkExample");


		function resetAddEdit(){
			addEditStorageForm.trigger("reset");
			addEditFormId.val("");
			imagesSelected.html("");
			keywordInputDiv.text("");
			attInputDiv.text("");
			capacityInputDiv.text("");
			DselectUtils.resetDselect(addEditCategoriesInput);

			addBulkEnabledInput.prop("checked", false);
			addBulkNumberInput.val(1);
			setBulkInsertInputState();
			StorageSearchSelect.input.clear(addEditParentInput);
		}


		function setupAddEditForAdd(){
			Main.processStart();
			console.log("Setting up add/edit form for add.");
			resetAddEdit();
			addBulkAccord.show();
			addEditFormMode.val("add");
			addEditModalTitleText.text("Add Storage Block");
			addEditModalTitleIcon.html(Icons.iconWithSub(Icons.storageBlock, Icons.add));
			addEditFormSubmitButton.html(Icons.add + ' Add Storage Block');
			Main.processStop();
		}

		function setupAddEditForEdit(blockId){
			Main.processStart()
			console.log("Setting up add/edit form for editing storage block " + blockId);
			resetAddEdit();
			addBulkAccord.hide();
			addEditModalTitleIcon.html(Icons.iconWithSub(Icons.storageBlock, Icons.edit));
			addEditFormMode.val("edit");
			addEditModalTitleText.text("Edit Storage Block");
			addEditFormSubmitButton.html(Icons.edit + ' Edit Storage Block');

			Rest.call({
				spinnerContainer: addEditModal,
				url: Rest.passRoot +"/inventory/storage-block/" + blockId,
				done: function(data){
					ImageSearchSelect.addSelectedImages(imagesSelected, data.imageIds);
					addEditFormId.val(blockId);
					addEditLabelInput.val(data.label);
					addEditNicknameInput.val(data.nickname);
					addEditDescriptionInput.text(data.description);
					addEditLocationInput.val(data.location);
					DselectUtils.setValues(addEditCategoriesInput, data.storedCategories);
					if(data.parent){
						StorageSearchSelect.input.setup(addEditParentInput, data.parent);
					}
					KeywordAttEdit.addKeywordInputs(keywordInputDiv, data.keywords);
					KeywordAttEdit.addAttInputs(attInputDiv, data.attributes);
					// addCapacityInputs(capacityInputDiv, data.capacityMeasures);
					Main.processStop();
				}
			});

		}




		let storageBlockViewMessages = $("#storageBlockViewMessages");
		let storageBlockViewModalLabel = $('#storageBlockViewModalLabel');
		let storageBlockViewCarousel = $('#storageBlockViewCarousel');

		let storageBlockHistoryAccordionCollapse = $("#storageBlockHistoryAccordionCollapse");
		let storageBlockHistoryForm = $('#storageBlockHistoryForm');
		let storageBlockHistory = $('#storageBlockHistory');

		let storageBlockViewId = $('#storageBlockViewId');
		let storageBlockViewLocationContainer = $('#storageBlockViewLocationContainer');
		let storageBlockViewDescriptionContainer = $('#storageBlockViewDescriptionContainer');
		let storageBlockViewCapacityContainer = $('#storageBlockViewCapacityContainer');
		let storageBlockViewLocation = $('#storageBlockViewLocation');
		let storageBlockViewDescription = $('#storageBlockViewDescription');
		let storageBlockViewCapacity = $('#storageBlockViewCapacity');
		let viewKeywordsSection = $('#viewKeywordsSection');
		let viewAttsSection = $('#viewAttsSection');
		let storageBlockViewBreadcrumbContainer = $('#storageBlockViewBreadcrumbContainer');
		let storageBlockViewChildrenContainer = $('#storageBlockViewChildrenContainer');
		let storageBlockViewChildrenContainerTitle = $('#storageBlockViewChildrenContainerTitle');
		let storageBlockViewStoredItemCategories = $("#storageBlockViewStoredItemCategories");

		function resetView(){
			storageBlockViewMessages.text("");
			storageBlockViewId.text('');
			storageBlockViewLocationContainer.hide();
			storageBlockViewLocation.text('');
			storageBlockViewBreadcrumbContainer.text('');
			storageBlockViewChildrenContainer.text('');
			storageBlockViewChildrenContainerTitle.text("Children:");

			storageBlockViewDescriptionContainer.hide();
			storageBlockViewDescription.text("");

			storageBlockViewCapacity.text('');
			storageBlockViewCapacityContainer.hide();
			storageBlockViewStoredItemCategories.text('');

			HistorySearchUtils.resetHistorySearch(storageBlockHistoryAccordionCollapse);

			storageBlockViewModalLabel.text("");
			itemsInBlockSearchResults.text("");

			itemsInBlockSearchForm.trigger("reset");
			//TODO:: clear item form

			Carousel.clearCarousel(storageBlockViewCarousel);
			KeywordAttUtils.clearHideKeywordDisplay(viewKeywordsSection);
			KeywordAttUtils.clearHideAttDisplay(viewAttsSection);

		}

		function setupView(blockId){
			Main.processStart();
			console.log("Setting up view for storage block " + blockId);
			resetView();
			storageBlockViewId.text(blockId);
			UriUtils.addOrReplaceParams("view", blockId);
			storageBlockViewModalLabel.text(blockId);
			StorageBlockTree.getBlockBreadcrumbs(storageBlockViewBreadcrumbContainer, blockId);

			//TODO:: setup item search form with block data

			StorageSearchSelect.input.setup(itemsInBlockSearchStorageBlockInput, blockId, true);

			itemsInBlockSearchForm.trigger("submit");

			//TODO:: do this in await getter
			Rest.call({
				spinnerContainer: storageBlockViewModal,
				url: Rest.passRoot +"/inventory/storage-block/" + blockId,
				failMessagesDiv: storageBlockViewMessages,
				done: async function(data){
					let promises = [];
					let children = Getters.StorageBlock.getStorageBlockChildrenData(blockId);
					KeywordAttUtils.processKeywordDisplay(viewKeywordsSection, data.keywords);
					KeywordAttUtils.processAttDisplay(viewAttsSection, data.attributes);
					promises.push(ItemCategoryView.setupItemCategoryView(storageBlockViewStoredItemCategories, data.storedCategories))

					if(data.nickname){
						storageBlockViewModalLabel.text(data.label + " / " + data.nickname);
					} else {
						storageBlockViewModalLabel.text(data.label);
					}

					if(data.location){
						storageBlockViewLocation.text(data.location);
						storageBlockViewLocationContainer.show();
					}
					if(data.description){
						storageBlockViewDescription.text(data.description);
						storageBlockViewDescriptionContainer.show();
					}
					if(data.capacityMeasures.length){
						data.capacityMeasures.forEach(function(curCapacity){
							let curCapacitySpan = $('<span class="badge bg-secondary m-2 user-select-all"></span>');
							curCapacitySpan.text(curCapacity.value+curCapacity.unit)
							storageBlockViewCapacity.append(curCapacitySpan);
						});
						storageBlockViewCapacityContainer.show();
					}

					if(data.imageIds.length){
						console.log("Storage block had images to show.");
						storageBlockViewCarousel.show();

						promises.push(Carousel.setCarouselImagesFromIds(data.imageIds, storageBlockViewCarousel));
					} else {
						console.log("Storage block had no images to show.");
						storageBlockViewCarousel.hide();
					}

					children = await children;
					if(children['empty']){
						storageBlockViewChildrenContainerTitle.text("No children!")
					} else {
						children.results.forEach(function (child) {
							let newGetParams = new URLSearchParams(window.location.search);
							newGetParams.set("view", child.id)

							let newChildLink = $('<li class="list-inline-item"><a href="{rootPrefix}/storage?'+newGetParams.toString()+'"></li></a>');
							newChildLink.find("a").text(child.labelText);
							storageBlockViewChildrenContainer.append(newChildLink);
						});
					}
					await Promise.all(promises);
					Main.processStop();
				}
			});

			HistorySearchUtils.setupHistorySearch(storageBlockHistoryAccordionCollapse, blockId);
		}

		let viewModal = new bootstrap.Modal(storageBlockViewModal, { });


		$(document).ready(function() {
			if (UriUtils.getParams.has("view")) {
				setupView(UriUtils.getParams.get("view"));
				viewModal.show();
			}
			storageBlockViewModal[0].addEventListener("hidden.bs.modal", function (){
				UriUtils.removeParam("view");
			});
			addEditStorageForm.submit(async function (event) {
				event.preventDefault();
				console.log("Submitting add/edit form.");

				let addEditData = {
					label: addEditLabelInput.val(),
					nickname: addEditNicknameInput.val(),
					description: addEditDescriptionInput.val(),
					location: addEditLocationInput.val(),
					storedCategories: ItemCategoryInput.getValueFromInput(addEditCategoriesInput),
					capacityMeasures: []
				};

				KeywordAttEdit.addKeywordAttData(addEditData, keywordInputDiv, attInputDiv);
				ImageSearchSelect.addImagesToData(addEditData, imagesSelected);

				capacityInputDiv.children().each(function (i, curCapDiv) {
					let cur = $(curCapDiv);
					addEditData.capacityMeasures.push({
						value: cur.find(".capacityInput")[0].value,
						unit: cur.find(".unitSelect").find(":selected")[0].value,
						scale: "ABSOLUTE"
					});
				});


				if (StorageSearchSelect.input.hasValue(addEditParentInput)) {
					addEditData.parent = StorageSearchSelect.input.getIdInput(addEditParentInput).val();
				} else {
					addEditData.parent = null;
				}

				let result = false;
				let verb = "";
				if (addEditFormMode.val() === "add") {
					verb = "Created";

					if (addBulkEnabledInput.is(":checked")) {
						addEditData = getBulkInsertData(addEditData);
						console.log("Adding new storage blocks in bulk.");
						await Rest.call({
							url: Rest.passRoot +"/inventory/storage-block/bulk",
							method: "POST",
							data: addEditData,
							failMessagesDiv: addEditFormMessages,
							done: function (data) {
								console.log("Response from create request: " + JSON.stringify(data));
								result = true;
							},
							fail: function (data) {
								console.warn("Bad response from bulk block add attempt: " + JSON.stringify(data));
							}
						});
					} else {
						console.log("Adding new storage block.");
						await Rest.call({
							url: Rest.passRoot +"/inventory/storage-block",
							method: "POST",
							data: addEditData,
							failMessagesDiv: addEditFormMessages,
							done: function (data) {
								console.log("Response from create request: " + JSON.stringify(data));
								result = true;
							},
							fail: function (data) {
								console.warn("Bad response from block add attempt: " + JSON.stringify(data));
							}
						});
					}
				} else if (addEditFormMode.val() === "edit") {
					verb = "Edited";
					let id = addEditFormId.val();
					console.log("Editing storage block " + id);

					await Rest.call({
						url: Rest.passRoot +"/inventory/storage-block/" + id,
						method: "PUT",
						data: addEditData,
						async: false,
						done: function (data) {
							console.log("Response from edit request: " + JSON.stringify(data));
							result = true;
						},
						failMessagesDiv: addEditFormMessages
					});
				}

				if (!result) {
					PageMessageUtils.addMessageToDiv(addEditFormMessages, "danger", "Failed to do action.", "Failed", null);
				} else {
					PageMessageUtils.reloadPageWithMessage(verb + " storage block successfully!", "success", "Success!");
				}
			});
		});

		function setBulkInsertInputState(){
			if(addBulkEnabledInput.is(":checked")){
				console.log("Disabling bulk insert options");
				bulkInputControls.show();
				bulkInputControls.find(":input").attr("disabled", false);
			} else {
				console.log("Enabling bulk insert options");
				bulkInputControls.hide();
				bulkInputControls.find(":input").attr("disabled", true);
			}
		}

		function padWithZero(num, targetLength) {
			return String(num).padStart(targetLength, '0');
		}

		function getBulkLabel(i, leadingZeroes, numDigits){
			return addEditLabelInput.val() + " " + padWithZero(i, (leadingZeroes? numDigits:0))
		}

		function updateBulkLabelExample(){
			let num = addBulkNumberInput.val();
			let numDigits = num.toString().length;
			let addBulkLeadingZeroes = addBulkLeadingZeroesInput.is(":checked");

			addBulkExample.text(
				getBulkLabel(1, addBulkLeadingZeroes, numDigits) +
				" → " +
				getBulkLabel(num, addBulkLeadingZeroes, numDigits)
			);
		}

		function getBulkInsertData(origStorageBlockData){
			let origDataString = JSON.stringify(origStorageBlockData);
			let output = [ ];

			let num = addBulkNumberInput.val();
			let numDigits = num.toString().length;
			let addBulkLeadingZeroes = addBulkLeadingZeroesInput.is(":checked");

			for(let i = 1; i <= num; i++){
				let newData = JSON.parse(origDataString);
				newData.label = getBulkLabel(i, addBulkLeadingZeroes, numDigits);
				output.push(newData);
			}

			return output;
		}

		let storageBlockInventorySheetPrintoutForm = $("#storageBlockInventorySheetPrintoutForm");
		let storageBlockInventorySheetPrintoutFormBlockNameInput = $("#storageBlockInventorySheetPrintoutFormBlockNameInput");

		function setupStorageBlockInvSheetPrintoutForm(){
			storageBlockInventorySheetPrintoutForm[0].reset();

			storageBlockInventorySheetPrintoutForm.attr("action", Rest.apiRoot + "/media/printouts/storage-block/"+storageBlockViewId.text()+"/storageSheet");
			storageBlockInventorySheetPrintoutFormBlockNameInput.val(storageBlockViewModalLabel.text());
		}


		function addBlockToItem(storageBlockId, itemId){
			console.log("Adding storage block " + storageBlockId + " to item " + itemId);

			Getters.InventoryItem.get(itemId, function(itemData){
				let itemUpdateData = {
					"storageBlocks": itemData.storageBlocks
				}
				itemUpdateData.storageBlocks.push(storageBlockId);

				Rest.call({
					url: Rest.passRoot + "/inventory/item/" + itemData.id,
					method: "PUT",
					data: itemUpdateData,
					async: false,
					spinnerContainer: storageBlockViewModal,
					done: function (data) {
						console.log("Successfully added storage block to item. Response: ", data);

						itemsInBlockSearchForm.trigger("submit");
						PageMessageUtils.addMessageToDiv(storageBlockViewMessages, "success", "Successfully added storage block to item.");
					},
					failMessagesDiv: storageBlockViewMessages
				});

			})


		}

		function addBlockToItemButtonClicked(){
			console.log("Adding block to item button clicked.");
			let storageBlockId = storageBlockViewId.text();

			ModalUtils.setReturnModal(ItemSearchSelect.itemSearchSelectModal, storageBlockViewModal);

			ItemSearchSelect.selectItem = function(itemName, itemId){
				addBlockToItem(storageBlockId, itemId);
			}
			ItemSearchSelect.itemSearchSelectForm.trigger("submit");
		}


		// showTree("#mainTreeChart");
	</script>
{/pageScript}

    {/include}