{!{@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 navbar="full" showTitle=true title="Create QR & Bar Codes" page='codes'}
	{#pageStyle}
	#outputImage {
		min-height: 100px;
		min-width: 200px;
	}
	{/pageStyle}
	{#pageContent}
		<div class="row">
			<div class="col">
				<h4>
					Output:
				</h4>
				<div id="outputImageDisplay" style="display: none">
					<img src="" alt="Output Image" class="img-thumbnail" id="outputImage"/>
					<!-- TODO:: save button -->
				</div>
				<p id="noImageText">No image generated. Use the form below to generate.</p>
			</div>
		</div>
		<hr />
		<div class="row">
			<div class="col">
				<h4>
					Generate:
				</h4>
				<div class="row mb-3">
					<div class="col">
						<label for="codeTypeInput" class="form-label">Type of code:</label>
						<select id="codeTypeInput" class="form-select" aria-label="Type of Code"  aria-describedby="codeTypeInputHelp">
							<option value="barcode" selected>Bar Code</option>
							<option value="qrcode">QR Code</option>
						</select>
						<div id="codeTypeInputHelp" class="form-text">The type of code image to generate.</div>
					</div>
				</div>
				{!<div class="row mb-3"> TODO:: when we support this more !}
					{!<div class="col">!}
						{!<div class="form-check form-switch">!}
							{!<input class="form-check-input" type="checkbox" role="switch" id="showLabelInput">!}
							{!<label class="form-check-label" for="showLabelInput">Show label</label>!}
						{!</div>!}
						{!<div id="codeTypeInputHelp" class="form-text">If there should be a label under the image produced.</div>!}
					{!</div>!}
				{!</div>!}
				<div class="row mb-3">
					<div class="col">
						<div class="accordion" id="qrGenerateAccord">
							<div class="accordion-item">
								<h2 class="accordion-header" id="headingTwo">
									<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
										Data for an Object
									</button>
								</h2>
								<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#qrGenerateAccord">
									<div class="accordion-body">
										<div class="row mb-2">
											<div class="col">
												<label for="objectContentTypeInput" class="form-label">Type of code content:</label>
												<select id="objectContentTypeInput" class="form-select" aria-label="Type of Code"  aria-describedby="objectContentTypeInputHelp">
													<option value="uilink" selected>Link to Web UI</option>
													<option value="id">Object Id</option>
													<option value="apilink">Link in API</option>
												</select>
												<div id="objectContentTypeInputHelp" class="form-text">What the data contained in the image should be.</div>
											</div>
										</div>
										<div class="row">
											<div class="col">
												<button type="button" class="btn btn-sm btn-success mt-2" data-bs-toggle="modal" data-bs-target="#storageSearchSelectModal">
													{#icons/storageBlock}{/icons/storageBlock} For Storage Block
												</button>
												<button type="button" class="btn btn-sm btn-success mt-2" data-bs-toggle="modal" data-bs-target="#itemSearchSelectModal">
													{#icons/item}{/icons/item} For Inventory Item
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="accordion-item">
								<h2 class="accordion-header" id="otherDataHeading">
									<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#otherDataCollapse" aria-expanded="false" aria-controls="otherDataCollapse">
										Other data about the Server
									</button>
								</h2>
								<div id="otherDataCollapse" class="accordion-collapse collapse" aria-labelledby="otherDataHeading" data-bs-parent="#qrGenerateAccord">
									<div class="accordion-body">
										<div class="row">
											<div class="col">
												<button type="button" class="btn btn-sm btn-success mt-2" onclick="generateQrFromData('{config:['runningInfo.baseUrl']}')">
													Link to this server
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="accordion-item">
								<h2 class="accordion-header" id="customDataCollapseHeading">
									<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#customDataCollapse" aria-expanded="false" aria-controls="customDataCollapse">
										Enter Custom Data
									</button>
								</h2>
								<div id="customDataCollapse" class="accordion-collapse collapse" aria-labelledby="customDataCollapseHeading" data-bs-parent="#qrGenerateAccord">
									<div class="accordion-body">
										<div class="row mb-2">
											<div class="col">
												<label for="codeContentInput" class="form-label">Content:</label>
												<input type="text" class="form-control" id="codeContentInput">
											</div>
										</div>
										<div class="row">
											<div class="col">
												<button class="btn btn-success" onclick="generateQrFromData(codeContentInput.val())">
													Generate
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	{/pageContent}
	{#modals}
		{#search/storage/searchSelectModal otherModalId="" rootPrefix=rootPrefix /}
		{#search/item/itemSearchSelectModal otherModalId="" rootPrefix=rootPrefix allCategorySearchResults=allCategorySearchResults /}
	{/modals}
	{#pageScript}
	<script type="module">
		import { SearchUtils } from '{rootPrefix}/res/js/SearchUtils.js';
		import { StorageSearchSelect } from '{rootPrefix}/res/js/obj/storageBlock/StorageSearchSelect.js';
		import { ItemSearchSelect } from '{rootPrefix}/res/js/obj/item/ItemSearchSelect.js';
		
		// init necessary modules
		SearchUtils.init();
		StorageSearchSelect.init();
		ItemSearchSelect.init();
		
		console.log("Page modules loaded.");
	</script>
	<script defer>
		
		const outputImageDisplay = $("#outputImageDisplay");
		const noImageText = $("#noImageText");
		const outputImage = $("#outputImage");
		const codeTypeInput = $("#codeTypeInput");
		const codeContentInput = $("#codeContentInput");
		
		function showGenerated(){
			noImageText.hide();
			outputImageDisplay.show();
		}
		
		function generateQrFromData(data){
			outputImage.attr("src", "{rootPrefix}/api/media/code/"+codeTypeInput.val()+"/" + encodeURIComponent(data));
			showGenerated();
		}
		
		$(document).ready(function(){
			console.log("Setting up search select functions.");
			let objectContentTypeInput = $("#objectContentTypeInput");
			StorageSearchSelect.selectStorageBlock = function (label, id, thing){
				outputImage.attr("src", "{rootPrefix}/api/media/code/object/storageBlock/" + id + "/" + codeTypeInput.val() + "/" + objectContentTypeInput.val());
				showGenerated();
			}
			ItemSearchSelect.selectItem = function(label, id, thing){
				outputImage.attr("src", "{rootPrefix}/api/media/code/object/item/" + id + "/" + codeTypeInput.val() + "/" + objectContentTypeInput.val());
				showGenerated();
			}
		});
	</script>
	{/pageScript}
{/include}