{{if .Dirs}}

		<style>
			/* ul{
			display: flex;;
			position: absolute;
			list-style: none;
			transform: translate(-50%,-50%);
			}
			li{
			position: relative;
			padding: 20px;
			color: #000;
			line-height: 1;
			transition: 0.2s all linear;
			cursor: pointer;
			}
			li::before{
				content: "";
				position: absolute;

			} */
			ul,li{
				list-style: none;
			}
			div#nav{
				border: 1px solid #ccc;
				
			}
			div#nav ul{
				border-bottom: 1px solid #ccc;
			}
			div#nav li{
				position: relative;
				display: inline-block;
				line-height: 3em;
				text-align: center;
				width: 50%;
				cursor: pointer;
				transition: 0.2s all linear;
			}
			div.hide{
				display: none;
			}
			div#nav li.active{
				color: rgba(0,0,0,.85);
				font-weight: 700;
				opacity: 1;
				border-bottom: 2px solid rgba(0,0,0,.85);
				transition: 0.2s all linear;
			}
			/* div#nav li::before{
				content: "";
				position: absolute;
				top: 0;
				left: 100%;
				width: 0;
				height: 100%;
				border-bottom: 2px solid #f000;
				transition: 0.2s all linear;

			}
			.active ~ li::before{
				left: 0;
			}
			.active::before{
				width: 100%;
				left: 0;
				top: 0;
			}
			.hover::before{
				width: 50%;
			} */
	   </style>
        <div id="uuid_div" style="display: none"> 
		    <input type="" value="{{$.Uuid}}" id="hide_uuidid" style="display:none;">  
		</div>
	    <div id="myCanvas_div" style="width:100%;height:100% ; position: relative;">
		    
            <!-- <div style="display:inline-block; width:6%;height: 100%;  position: relative; vertical-align: middle;">     
             <img src="/img/left_new_new.png"  onclick="clickLast()"  style="margin-left: 15px" />
            </div> -->

            <div style="display:inline-block; width:71%; height: 100%; position: relative;border: 1px solid #ccc;border-radius: 6px;">
                <!-- <div style="text-align:center">
				  <a>
					文件名:
					 <span id="filename"></span>
				  </a>
                </div> -->

                <div id="win_canvas" style="width:100%;height:42em">
                  <canvas id="myCanvas" style="display:none;">
                  </canvas>
				  <code id="textcontent" style="display:none;overflow: auto;">这是一个测试。</code>
				  <div style="padding:0.2em 0;position: absolute;border-top: 1px solid #ccc;width: 100%;bottom:0;font-size: 1em;padding: 0.5em 1em;">
						<div id="breadFile" class="ui small breadcrumb">
								<!-- <div class="section">Home</div>
								<div class="divider"> / </div>
								<div class="active section">Search</div> -->
						</div>
				  </div>


				</div>

				<div style="font-size: 1.5rem; opacity: 0.7; position: absolute;left: 0.5rem;top: 20rem;cursor: pointer;" onclick="clickLast()"><i class="chevron circle left icon" ></i></div>
				<div style="font-size: 1.5rem; opacity: 0.7; position: absolute;right: 0.5rem;top: 20rem;cursor: pointer;" onclick="clickNext()"><i class="chevron circle right icon" ></i></div>
				
				
			</div>
			
			

            <!-- <div style="display:inline-block;  width:6%;height: 100%;  position: relative; vertical-align: middle;">
                <img src="/img/right_new_new.png"  onclick="clickNext()"  style="margin-left: 15px"/>
            </div> -->
		  
			
		  
			<div id="nav" style="display:inline-block; width:25%;height: 100%; position: relative;vertical-align: top;  background: #ffffff;margin-left: 20px;border-radius: 6px;">
					
								<ul style="display: flex;padding: 0;margin: 0;">
									<li id="0" class="active">文件列表</li>

									<li id="1">标签列表</li>
								</ul>
								<div class="tabpannel">
										<!-- <h4 class="ui top attached header">
												文件列表
										</h4> -->
										
									 
											<!-- <table  class="ui single line table" id="filelist" style="table-layout:fixed;word-break: break-all;word-wrap: break-word;">  
										
											</table> -->
											<div class="ui list" id="filelist"></div>


											<div class="panel-body" id="filepanel" style='position: absolute;bottom: 0;padding: 0.9em 0;width: 100%;border-top: 1px #ccc solid;'>
													<div style="width: 90%; margin: 0 auto;">
															<a id="prePage" href="" style="margin-right: 0.2em;color: #000;"><i class="angle left icon"></i></a> 
															
															<span id="startIndex">0</span>-<span id="endIndex">0</span>/<span id="totalNum">0</span>
															<span style="margin-left: 0.2em;">第</span><span id="displayPage1">1</span><span style="margin-right: 0.2em;">页</span>
															<span>跳到</span><input type="text" id="goNum" style="width: 2em;border-radius: 4px;padding: 0 0.4em;margin: 0 0.4em;height: 1.2em;border: 1px solid;" maxlength="5" oninput="value=value.replace(/[^\d]/g,'')"><span>页</span>

															<a style="margin-left: 0.4em;color: #000;" id="nextPage" href=""><i class="angle right icon"></i></a>
														 <!-- 第<span  id="startIndex">0</span>至<span id="endIndex">0</span>条,&nbsp;共<span id="totalNum">0</span>条.&nbsp;&nbsp;   
														 <span >   
														 
														 <span >
															&nbsp;当前页:<span id="displayPage1">1</span>&nbsp;
														 </span>
														  <a id="nextPage" href="">下一页</a>
														  <span>
															&nbsp;共<span id="totalPageNum"></span>页&nbsp;
														  </span>
														  </span>
														  <span>&nbsp;跳转至:<input type="text" id="goNum" style="width: 50px;border-radius: 6px" maxlength="5" oninput="value=value.replace(/[^\d]/g,'')"><a id="goHref" href="javascript:goPage()">&nbsp;GO</a></span> -->
												</div>
						
										</div>
								</div>
								<div class="hide tabpannel">
									<div style="margin-top: 1em;" id="labellist">

									</div>

								</div>
								
					
                
				<!-- <div class="ui pointing secondary menu">
						<a class="item " data-tab="first">First</a>
						<a class="item active" data-tab="second">Second</a>
						
				</div>

				<div class="ui bottom attached tab segment active" data-tab="first">
						First
				</div>
				<div class="ui bottom attached tab segment" data-tab="second">
						Second
				</div>
				 -->

	        </div>
		</div>
		<script>
			var ulObj = document.getElementById('nav').getElementsByTagName('ul')[0];
			var divObj = document.getElementsByClassName('tabpannel');
			var liObj = document.getElementById('nav').getElementsByTagName('li')
			ulObj.onclick = function(event){
				var ev = window.event || event;
				var item = ev.srcElement || ev.target;

				var id = item.getAttribute("id")
				for (var i=0; i<divObj.length;i++){
					if(i == id){
						divObj[i].style.display = 'block'
						liObj[i].classList.add('active')
					}
					else{
						divObj[i].style.display = 'none'
						liObj[i].classList.remove('active')
					}
				}
			}
		</script>
		<script src="{{StaticUrlPrefix}}/self/dataset_preview.js"></script>
{{end}}