<html xmlns="http://www.w3.org/1999/html">

<head>
    <title>||title||</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link class="style" href="bootstrap.css" rel="stylesheet">
    <link class="style" href="monitor_index.css" rel="stylesheet">
</head>

<body class="bg-layer1">

<div v-scope="Container()" class="container-fluid pb-3" @mounted="start">
    <div id="container" class="d-none">
        <div class="row sticky-top bg-nav shadow-sm">
            <div class="col-6 col-md-5 px-3 py-2">
                <span class="h6 text-light-muted">Monitor</span><br/>
                <span class="h4 text-light">{{ data.name }}</span>
            </div>
            <div class="col-6 col-md-5 px-3 py-2 text-end text-md-center">
                <span class="h6 text-light-muted">Date & Time</span><br/>
                <span class="h4 text-light">{{ data.clock.now }}</span>
            </div>
            <div class="col-12 col-md-2 p-3 py-2 text-end">
                <span class="h6 text-light-muted">Health</span><br/>
                <span class="h4 text-light">{{ data.health }}%</span>
            </div>
        </div>

        <div v-if="data.workers.length > 0" class="row">
            <div v-for="(worker, i) in data.workers" :key="i" class="col-12">
                <div class="row px-2 px-md-3 pt-3">
                    <div class="col-12 bg-layer2 shadow-sm rounded-3 p-3">

                        <div class="row">
                            <div class="col-7 col-md-10">
                                <span class="h7 text-extra-muted">Worker {{ worker.clock.now }}</span><br/>
                                <span class="h5">{{ worker.name }}</span>
                            </div>
                            <div class="col-5 col-md-2 text-end">
                                <span class="h7 text-extra-muted">Health</span><br/>
                                <span class="h5">{{ worker.health }}%</span>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

    <div id="loading" class="d-block">
        <div class="row h-25">
        </div>
        <div class="row h-75">
            <div class="col h-100 text-center">
                <h1 class="text-muted align-middle h-100">Loading ... !</h1>
            </div>
        </div>
    </div>

</div>

<script type="application/javascript" src="petite_vue.js"></script>
<script type="application/javascript" src="bootstrap.js"></script>
<script type="application/javascript" src="monitor_index.js"></script>

</body>
</html>
