{!{@java.util.List<tech.ebp.oqm.baseStation.model.rest.externalItemLookup.ExtItemLookupProviderInfo> productProviderInfoList}!}
{!{@java.util.List<tech.ebp.oqm.baseStation.model.rest.externalItemLookup.ExtItemLookupProviderInfo> supportedPageScanInfoList}!}
{!{@java.util.List<tech.ebp.oqm.baseStation.model.rest.externalItemLookup.ExtItemLookupProviderInfo> legoProviderInfoList}!}
{#include webui/mainWebPageTemplate showTitle=true title="Item Lists" page='itemLists' navbar="full"}
	{#pageStyle}
	
	{/pageStyle}
	{#additionalTitleContent}
		<p>
			Item lists are used to do bulk item movements. Make a list, add items and specify what to do with each. When you are done, apply the list and those actions will be carried out.
			More information at the <a href="/help#tabItemLists">{#icons/help}{/icons/help} Help & User Guide</a>
		</p>
	{/additionalTitleContent}
	{#pageContent}
	<div class="row">
		<div class="col d-grid gap-2">
			<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#itemListAddModal" >
				{#icons/add}{/icons/add} Add Item List
			</button>
		</div>
	</div>
	<br/>
	<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">
						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/itemList/searchForm id='mainItemListSearch'}
						{/search/itemList/searchForm}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col table-responsive">
			<table class=" table table-bordered table-striped table-hover table-sm">
				{#search/itemList/searchResults searchResults=searchResult actionType='full' searchFormId='mainStorageSearch' pagingCalculations=pagingCalculations}
				{/search/itemList/searchResults}
			</table>
		</div>
	</div>
	
	
	{/pageContent}
	{#modals}
	
	{#modal id='itemListAdd' large=true title='New Item List' submitForm='itemListAddForm' submitDismiss=false}
		<div class="row">
			<div class="col" id="itemListAddFormMessages">
			
			</div>
		</div>
		<form id="itemListAddForm">
			<div class="mb-3 row">
				<label for="itemListAddNameInput" class="col-sm-2 col-form-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="itemListAddNameInput" placeholder="Name" required>
				</div>
			</div>
			<div class="mb-3 row">
				<label for="itemListAddDescriptionInput" class="col-sm-2 col-form-label">Description</label>
				<div class="col-sm-10">
					<textarea class="form-control" id="itemListAddDescriptionInput" placeholder="Description"></textarea>
				</div>
			</div>
		</form>
	{/modal}
		{#itemList/itemListReviewModal}
		{/itemList/itemListReviewModal}
	
	{/modals}
	
	{#scripts}
		<script src="/META-INF/resources/res/js/searchUtils.js"></script>
		<script src="/META-INF/resources/res/js/HistorySearchUtils.js"></script>
		<script src="/res/js/obj/objEdit.js"></script>
		<script src="/res/js/obj/objView.js"></script>
		<script src="/res/js/storedTypeUtils.js"></script>
		<script src="/res/js/obj/media/imageSearchSelect.js"></script>
		<script src="/res/js/obj/storageBlock/storageSearchSelect.js"></script>
		<script src="/res/js/obj/units.js"></script>
		<script src="/res/js/obj/getters.js"></script>
		<script src="/res/js/obj/storageBlock/capacities.js"></script>
		<script src="/res/js/Carousel.js"></script>
		<script src="/res/js/obj/storageBlock/storageBlockTree.js"></script>
		<script src="/res/js/textCopy.js"></script>
		<script src="/res/js/obj/itemList/itemListView.js"></script>
	{/scripts}
	{#pageScript}
		<script>
			var itemListAddModal = new bootstrap.Modal(document.getElementById('itemListAddModal'));
			
			if(window.location.hash === "#add"){
				itemListAddModal.show();
				UriUtils.removeHash();
			}
			
			var itemListAddFormMessages = $("#itemListAddFormMessages");
			var itemListAddForm = $("#itemListAddForm");
			var itemListAddNameInput = $("#itemListAddNameInput");
			
			itemListAddForm.submit(async function (event) {
				event.preventDefault();
				
				let addData = {
					name: itemListAddNameInput.val(),
					description: itemListAddNameInput.val(),
				};
				
				await Rest.call({
					url: Rest.passRoot + "/inventory/item-list",
					method: "POST",
					data: addData,
					async: false,
					done: function (data) {
						console.log("Response from create request: " + data);
						
						PageMessageUtils.gotoPageWithMessage("/itemList/"+data,
							"List created successfully!",
							"success",
							"Success!"
						);
					},
					failMessagesDiv: itemListAddFormMessages
				});
			});

			function removeItemList(listId){
				if(!confirm("Are you sure you want to delete this item list? This cannot be undone.")){
					return;
				}
				console.log("Removing item list " + listId);

				Rest.call({
					url: Rest.passRoot + "/inventory/item-list/" + listId,
					method: "DELETE",
					done: function(data) {
						console.log("Response from remove request: " + JSON.stringify(data));
						PageMessageUtils.reloadPageWithMessage("Removed item list successfully!", "success", "Success!");
					},
					fail: function(data) {
						console.warn("Bad response from remove attempt: " + JSON.stringify(data));
						PageMessageUtils.addMessage("danger", "Failed to remove item.", "Failed", null);
					}
				});
			}
		</script>
	{/pageScript}
{/include}