<!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'>test{{hit.assignment.worker_id}}</span>
<span class='country'>test{{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>