<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="/backend/style.css" />
	<script src='../worker_specs/dateformat.js'></script>
	<script src='../worker_specs/reconnecting-websocket.min.js'></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="wrapper">
<div v-if="hit && hit.assignment" :class="[{'invisible': !hit.visible}, 'hit']">
		<img :src="hit.scan_image">

		<div class='credits'>
		<span class='worker_id'>{{hit.assignment.worker_id}}</span>
		<span class='country'>{{hit.assignment.turk_country}}</span>
		<template v-if="hit.preceding_assignments.length">
			<div id='collaborators'>
				<div id='collab_items'>
				<span v-for="a of hit.preceding_assignments" class='credit'>
					<span class='worker_id'>{{a.worker_id}}</span>
					<span class='country'>{{a.turk_country_code}}</span>
				</span>
				</div>
			</div>
		</template>
		</div>

</div>




</div>

<script src="/backend/script.js"></script>
</body>
</html>