@extends('layouts.master', 	[
								'body_id'			=>	'andon_dashboard',
							])

@section('styles')

@endsection

@section('content')


	@component('andon.dashboard_core',
		[ 
			'user_is_public' 	=> 	$user_is_public,
			'sub_plant'			=> 	$sub_plant,
			'plants'			=>	$plants,
			'departments'		=>	$departments,
			'operator_users' 	=>	$operator_users
		]

	)
			{{-- 'users'				=> 	$users, --}}

		@slot('custom_container')

			<div  class="d-flex" style="position: relative; top:-20px">
				<h1 class="mx-auto mb-0" style="font-size: 1.8rem">@lang('andon.line_stop')</h1>
				<h1 class="mx-auto mb-0" style="font-size: 1.8rem">@lang('andon.machine_fail')</h1>
			</div>

			<div class="d-flex flex-wrap" id="faults_container" style="position: relative; top:-20px">
				<svg id="svg_left_halt" width="50%" height="100%" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
				<svg id="svg_right_no_halt" width="50%" height="100%" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
			</div>

		@endslot
	@endcomponent


@endsection

@section('plugin-scripts')
	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
@endsection

@section('app-scripts')
	<script type="text/javascript">
		const DEPARTMENTS = {!! $departments->toJson() !!};
		const LINES = {!! $sub_plant->lines->toJson() !!};
		{{-- const USERS = {!! $users->toJson() !!}; --}}
		const ACTIVE_SUB_PLANT = {!! $sub_plant->toJson() !!};
		var AUTO_UPDATE = true;
	</script>
	
	<script src="{{mix('js/andon/dashboard_circles.js')}}"></script>
@endsection