inks" data-tabContetn="extUrl" data-i18n="fromUrl">From URL</button>
	  <button id="csvTab" style="display: none" class="tablinks" data-tabContetn="csvImp" data-i18n="csvImport">CSV Import</button>
	</div>
	
	<!-- Tab content -->
	<div id="current" class="tabcontent" style="padding: 0">
		<div style="padding: 12px 0px 12px 18px;width:170px;position: absolute;">
			<div style="padding: 0px 0px 6px; white-space: nowrap; overflow: hidden; width: 200px; font-weight: bold;" data-i18n="viewerSettings">
				Viewer Settings
			</div>
			<div id="simpleViewerCont" style="padding: 6px 0px 1px; white-space: nowrap; overflow: hidden; width: 200px; height: 18px;">
				<input type="checkbox" style="margin: 0px 6px 0px 0px;" id="simpleViewer"><label for="simpleViewer" data-i18n="simpleViewer">Simple Viewer</label>
			</div>
			<div
				style="padding: 6px 0px 1px; white-space: nowrap; overflow: hidden; width: 200px; height: 18px;">
				<input type="checkbox" checked="checked" style="margin: 0px 6px 0px 0px;" id="lightbox"><label for="lightbox" data-i18n="lightbox">Lightbox</label>
			</div>
			<div style="padding: 6px 0px 1px; white-space: nowrap; overflow: hidden; width: 200px; height: 18px;">
				<input type="checkbox" style="margin: 0px 6px 0px 0px;" id="center"><label for="center" data-i18n="center">Center</label>
			</div>
			<div id="hiResCont" style="padding: 6px 0px 1px; white-space: nowrap; overflow: hidden; width: 200px; height: 18px;">
				<input type="checkbox" style="margin: 0px 6px 0px 0px;" id="hiRes"><label for="hiRes" data-i18n="hiResPreview">High Res Preview</label>
			</div>
			<div style="padding: 8px 0px 4px 18px; position: relative; border-width: 0px; margin-left: 0px; font-weight: normal;">
				<span data-i18n="toolbar">Toolbar</span>
				<select id="toolbar" style="float: right; width: 97px;">
					<option value="top" data-i18n="top">Top</option>
					<option value="inline" data-i18n="embed">Embed</option>
					<option value="hidden" data-i18n="hidden">Hidden</option>
				</select>
			</div>
			<div style="padding: 4px 0px 4px 18px; position: relative; border-width: 0px; margin-left: 0px; font-weight: normal;">
				<span data-i18n="links">Links</span>
				<select id="links" style="float: right; width: 97px;">
					<option value="auto" data-i18n="automatic">Automatic</option>
					<option value="blank" data-i18n="openInNewWindow">Open in New Window</option>
					<option value="self" data-i18n="openInThisWindow">Open in This Window</option>
				</select>
			</div>
			<div style="padding: 6px 0px 6px 18px; font-weight: normal; border: none;">
				<span data-i18n="zoom">Zoom</span>
				<span style="float: right;margin-left: 3px">%</span><input id="zoom" type="number" value="100" style="float: right; text-align: right; width: 44px;">
			</div>
			<div style="padding: 0px 0px 6px; white-space: nowrap; overflow: hidden; width: 200px; font-weight: bold;" data-i18n="pageLayers">
				Page and Layers
			</div>
			<span style="padding-left: 10px;"><span data-i18n="curViewState">Current Viewer State</span> &rarr;</span>
		</div>
		<div id="curViewer" style="position: absolute;left: 200px;width: calc(100% - 200px);height: 100%;border-left: 1px solid var(--ds-border, #cccccc);"></div>
	</div>
	
	<div id="recent" class="tabcontent">
	  <div id="recentList" style="width:100%; height: 100%">
			
	  </div>
	</div>
	
	<div id="search" class="tabcontent">
	    <div class="field-group">
			<label for="searchStr" style="display:inline-block;" data-i18n="search">Search:</label> <input class="text medium-field" id="searchStr" value="" data-i18n-placeholder="diagramName" placeholder="Diagram Name">
			<button class="aui-button aui-button-primary ap-dialog-submit" id="searchBtn" data-i18n="search">Search</button>
		</div>
	    <div id="searchList"  style="width:100%; height: 100%">
			
		</div>
	</div>
	
	<div id="gDrive" class="tabcontent" style="padding: 0;">
		<div style="bottom:0px;width:350px;border-right:1px solid var(--ds-border, #cccccc);position:absolute;top:0px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="filenameGD" data-i18n="filename">File name</label> 
					<input class="text macro-param-input" type="text" id="filenameGD" name="filename" disabled data-i18n-placeholder="chooseFile" placeholder="Choose a file...">
					<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerGD" disabled data-i18n="choose">Choose</button>
					<div id="spinner-containerGD"></div>
					<div class="description" data-i18n="gdriveFname">Google Drive file name</div>
					<div class="error" id="filenameErrorGD"></div>
				</div>
				<div style="display: none">
					<div class="field-group" style="padding-left:15px;">
						<label for="widthGD" data-i18n="width">Width</label> <input class="text medium-field" id="widthGD" value="800">
						<div class="description" data-i18n="widthOfViewer">Width of the viewer (px)</div>
						<div class="error" id="widthErrorGD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="heightGD" data-i18n="height">Height</label> <input class="text medium-field" id="heightGD" value="600">
						<div class="description" data-i18n="heightOfViewer">Height of the viewer (px)</div>
						<div class="error" id="heightErrorGD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input class="checkbox small-field" id="autoSizeGD" type="checkbox" >
						<label for="autoSizeGD" style="display:inline-block;font-size:12px" data-i18n="autoSetViewerSize">Automatically set the size of the viewer</label>
					</div>
					<div class="field-group" style="padding-left:15px">
						<label for="thumbImg" data-i18n="thumbnail">Thumbnail</label>
						<div class="thumbnail">
							<img class="thumbImg" id="thumbImgGD">
						</div>
					</div>
					<div class="field-group" style="padding-left:15px">
						<input type="checkbox" class="checkbox small-fiel" id="useDrawioGD">
						<label for="useDrawio" style="display:inline-block;" data-i18n="prevInDraw">Preview in draw.io</label>
					</div>
				</div>
				<a id="signoutGD" style="position: absolute;bottom: 2px;right: 5px;font-size: 11px;cursor: pointer;" data-i18n="signOut">Sign Out</a>
			</form>
		</div>
		<div id="previewGD" style="bottom:0px;left:351px;position:absolute;top:0px;right:0px;display:inline-block;">
			<a id="gdAnchor" style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" data-i18n="chooseFile">Choose a file...</a>
		</div>
	</div>
	
	<div id="oneDrive" class="tabcontent" style="padding: 0;">
		<div style="bottom:0px;width:350px;border-right:1px solid var(--ds-border, #cccccc);position:absolute;top:0px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="filenameOD" data-i18n="filename">File name</label> 
					<input class="text macro-param-input" type="text" id="filenameOD" name="filename" disabled data-i18n-placeholder="chooseFile" placeholder="Choose a file...">
					<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerOD" disabled data-i18n="choose">Choose</button>
					<div id="spinner-containerOD"></div>
					<div class="description" data-i18n="onedriveFname">OneDrive file name</div>
					<div class="error" id="filenameErrorOD"></div>
				</div>
				<div style="display: none">
					<div class="field-group" style="padding-left:15px;">
						<label for="widthOD" data-i18n="width">Width</label> <input class="text medium-field" id="widthOD" value="800">
						<div class="description" data-i18n="widthOfViewer">Width of the viewer (px)</div>
						<div class="error" id="widthErrorOD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="heightOD" data-i18n="height">Height</label> <input class="text medium-field" id="heightOD" value="600">
						<div class="description" data-i18n="heightOfViewer">Height of the viewer (px)</div>
						<div class="error" id="heightErrorOD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input class="checkbox small-field" id="autoSizeOD" type="checkbox" >
						<label for="autoSizeOD" style="display:inline-block;font-size:12px" data-i18n="autoSetViewerSize">Automatically set the size of the viewer</label>
					</div>
					<div class="field-group" style="padding-left:15px">
						<label for="thumbImgOD" data-i18n="thumbnail">Thumbnail</label>
						<div class="thumbnail">
							<img class="thumbImg" id="thumbImgOD">
						</div>
					</div>
					<div class="field-group" style="padding-left:15px">
						<input type="checkbox" class="checkbox small-fiel" id="useDrawioOD">
						<label for="useDrawioOD" style="display:inline-block;" data-i18n="prevInDraw">Preview in draw.io</label>
					</div>
				</div>
				<a id="signoutOD" style="position: absolute;bottom: 2px;right: 5px;font-size: 11px;cursor: pointer;" data-i18n="signOut">Sign Out</a>
			</form>
		</div>
		<div id="previewOD" style="bottom:0px;left:351px;position:absolute;top:0px;right:0px;display:inline-block;">
			<a id="odAnchor" style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" data-i18n="chooseFile">Choose a file...</a>
		</div>
	</div>
	
	<div id="upload" class="tabcontent" style="padding: 0;">
		<div style="bottom:0px;width:350px;border-right:1px solid var(--ds-border, #cccccc);position:absolute;top:0px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="filenameUD" data-i18n="filename">File name</label> 
					<input type="file" id="fileuploadUD" style="display: none">
					<input class="text macro-param-input" type="text" id="filenameUD" name="filename" disabled data-i18n-placeholder="chooseFile" placeholder="Choose a file...">
					<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerUD" data-i18n="choose">Choose</button>
					<div id="spinner-containerUD"></div>
					<div class="description" data-i18n="diagFname">Diagram file name</div>
					<div class="error" id="filenameErrorUD"></div>
				</div>
				<div style="display: none">
					<div class="field-group" style="padding-left:15px;">
						<label for="widthUD" data-i18n="width">Width</label> <input class="text medium-field" id="widthUD" value="800">
						<div class="description" data-i18n="widthOfViewer">Width of the viewer (px)</div>
						<div class="error" id="widthErrorUD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="heightUD" data-i18n="height">Height</label> <input class="text medium-field" id="heightUD" value="600">
						<div class="description" data-i18n="heightOfViewer">Height of the viewer (px)</div>
						<div class="error" id="heightErrorUD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input class="checkbox small-field" id="autoSizeUD" type="checkbox" >
						<label for="autoSizeUD" style="display:inline-block;font-size:12px" data-i18n="autoSetViewerSize">Automatically set the size of the viewer</label>
					</div>
				</div>
				<div class="error" id="errorMsgUD">
				</div>
			</form>
		</div>
		<div id="previewUD" style="bottom:0px;left:351px;position:absolute;top:0px;right:0px;display:inline-block;text-align: center;">
			<a id="fileUploadAnchor" style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" data-i18n="chooseFile">Choose a file...</a>
		</div>
	</div>
	
	<div id="extUrl" class="tabcontent" style="padding: 0;">
		<div style="bottom:0px;width:350px;border-right:1px solid var(--ds-border, #cccccc);position:absolute;top:0px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="diagramName" data-i18n="diagramName">Diagram Name</label> 
					<input class="text large-field" id="diagramName" value="" data-i18n-placeholder="diagramName" placeholder="Diagram Name"><br>
					<label for="diagramUrl" class="multiLabels" data-i18n="diagUrl">Diagram URL</label> 
					<input class="text large-field" id="diagramUrl" value="" data-i18n-placeholder="diagUrl" placeholder="Diagram URL"><br>
					<button class="aui-button aui-button-primary" style="margin: 5px;float: right;" id="showDiagBtn" data-i18n="showDiag">Show Diagram</button>
				</div>
				<div class="error" id="errorMsgUD">
				</div>
			</form>
		</div>
		<div id="extUrlDiagram" style="bottom:0px;left:351px;position:absolute;top:0px;right:0px;display:inline-block;text-align: center;">
			<span style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" data-i18n="diagPreview">Diagram Preview</span>
		</div>
	</div>
	<div id="csvImp" class="tabcontent" style="padding: 0;">
		<div style="bottom:0px;width:350px;border-right:1px solid var(--ds-border, #cccccc);position:absolute;top:0px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="csvDiagName" data-i18n="diagramName">Diagram Name</label> 
					<input class="text large-field" id="csvDiagName" value="" data-i18n-placeholder="diagramName" placeholder="Diagram Name"><br>
					<label for="csvFileUrl" class="multiLabels" data-i18n="csvFileUrl">CSV File URL</label> 
					<input class="text large-field" id="csvFileUrl" value="" data-i18n-placeholder="csvFileUrl" placeholder="CSV File URL"><br>
					<button class="aui-button aui-button-primary" style="margin: 5px;float: right;" id="convertBtn" data-i18n="generate">Generate</button>
				</div>
				<div class="error" id="errorMsgUD">
				</div>
			</form>
		</div>
		<div id="csvDiagram" style="bottom:0px;left:351px;position:absolute;top:0px;right:0px;display:inline-block;text-align: center;">
			<span style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" data-i18n="diagPreview">Diagram Preview</span>
		</div>
	</div>
	<div id="github" class="tabcontent" style="padding: 0;">
		<div style="bottom:0px;width:350px;border-right:1px solid var(--ds-border, #cccccc);position:absolute;top:0px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="filenameGH" data-i18n="pathFilename">Path/Filename</label> 
					<input class="text large-field" id="filenameGH" value="" data-i18n-placeholder="pathFilename" placeholder="Path/Filename"><br>
					<label for="ownerGH" class="multiLabels" data-i18n="owner">Owner</label> 
					<input class="text large-field" id="ownerGH" value="" data-i18n-placeholder="owner" placeholder="Owner"><br>
					<label for="repositoryGH" class="multiLabels" data-i18n="repository">Repository</label> 
					<input class="text large-field" id="repositoryGH" value="" data-i18n-placeholder="repository" placeholder="Repository"><br>
					<label for="branchGH" class="multiLabels" data-i18n="branch">Branch</label> 
					<input class="text large-field" id="branchGH" value="master" data-i18n-placeholder="branch" placeholder="Branch"><br>
					<input type="checkbox" id="isPrivateGH" data-i18n="private"> <label for="isPrivateGH" data-i18n="private" style="display: inline">Private</label><br>
					<button class="aui-button aui-button-primary" style="margin: 5px;float: right;" id="showDiagBtnGH" data-i18n="showDiag">Show Diagram</button>
				</div>
				<div class="error" id="errorMsgGH">
				</div>
			</form>
		</div>
		<div id="githubDiagram" style="bottom:0px;left:351px;position:absolute;top:0px;right:0px;display:inline-block;text-align: center;">
			<span style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" data-i18n="diagPreview">Diagram Preview</span>
		</div>
	</div>
	
	<div id="errorMsg">
		 
	</div>
	<script src="includeDiagram-1-4-8.js" type="text/javascript"></script>
</body>
</html>
ØA
—Eoúô