{% extends 'base.html.twig' %}

{% block title %}Novamar Insurance System
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	{{encore_entry_link_tags('indexCSS')}}
{% endblock %}

{% block body %}
	{{include('mx/nav_menu.twig', {option: 'homepage'})}}
	<main>
		<div class="row">
			<div class="col-4 ">
				<div class="alert-container card text-center">
					<b>Policies to expire</b>
					<div class="container-fluid text-center">
						<span id="policies" class="policies-number-circle teal-text border-color-teal">0</span>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="alert-container card text-center">
					<b>Payments Due</b>
					<div class="container-fluid text-center">
						<span id="payments" class="policies-number-circle orange-text text-lighten-1 border-color-orange">0</span>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="alert-container card text-center">
					<b>Claims</b>
					<div class="container-fluid text-center">
						<span id="claims" class="policies-number-circle blue-text text-lighten-1 border-color-blue">0</span>
					</div>
				</div>
			</div>
			<div class="col-12">
				<div id="activity-container" class="card" style="min-height:450px;">
					<h5 class="card-title blue-text text-darken-1">
						<i class="material-icons">history</i>
						Activity</h5>
					<div class="divider"></div>
					<div class="activity-list text-center mt-4">
						<div>
							<div class="spinner-border text-primary" role="status">
								<span class="visually-hidden">Loading...</span>
							</div>
						</div>
						Loading Activity...
					</div>
				</div>
			</div>
		</div>
	</main>
{% endblock %}
{% block javascripts %}
	{% if app.environment != 'dev' %}
		<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
	{% else %}
		<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
	{% endif %}
	<script type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
	<script type="text/javascript" src="{{asset('js/pages/home-mx.js')}}" defer></script>

{% endblock %}