<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        <script type="text/javascript" src="{{url_for('static', filename='js/annotation-compass/labels.js')}}" defer ></script>
		<script type="text/javascript" src="{{url_for('static', filename='js/annotation-compass/session.js')}}" defer></script>
		<script type="text/javascript" src="{{url_for('static', filename='js/annotation-compass/picture.js')}}" defer></script>
		<script type="text/javascript" src="{{url_for('static', filename='js/annotation-compass/panels.js')}}" defer></script>
		<script type="text/javascript" src="{{url_for('static', filename='js/annotation-compass/text-export.js')}}" defer></script>
		
        
        <link rel="stylesheet" href="{{url_for('static', filename='css/annotation-compass/style.css')}}" />

        <title>Collecting Labels</title>
	</head>
    
	<body>
		<main id="container">
			<figure class="background-container" id="background-container">
				<img id="background-image" draggable="false" src="{{url_for('static', filename='uploads/annotation-compass/' + image)}}" data-image="{{image}}" />
				<div id="target"></div>
			</figure>
		</main>
		<div id="editor"></div>
		<nav>
			<button id="show-transcription">Export</button>
			<button id="show-info">?</button>
			<button id="show-image">IMG</button>
			<button id="load-labels">Load</button>
		</nav>
		<aside class="info" id="info-panel">
			<div class="contents">
				<button class="close">X</button>
				<h1 class="title">Concrete 🎏 Label</h1>
				<p>
					{{description}}-
				</p>
			</div>
		</aside>
		<aside class="transcription" id="transcription-panel">
			<div class="contents">
				<button class="close">X</button>
				<h1 class="title">Label Transcription</h1>
				<button id="export-text">Export</button>
				<div class="options">
					<div>
						<input type="checkbox" id="checkJSON" name="export-json" checked />
						<label for="export-json">JSON</label>
					</div>
					<div>
						<input type="checkbox" id="checkText" name="export-text" checked />
						<label for="export-text">TXT</label>
					</div>
				</div>
				<ol class="labels-contents"></ol>
			</div>
		</aside>
	</body>
</html>
