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

{% block title %}MOKPI
{% endblock %}

{% block body %}
	{{ encore_entry_link_tags('cute-alert-css') }}
	{{ encore_entry_link_tags('default-view') }}
	{{ encore_entry_link_tags('simple-aggrid-table-css') }}

	<div class="no-max container-fluid box-no-bkg-color">
		{% for label, messages in app.flashes %}
			{% for message in messages %}
				<div class="alert alert-{{ label }}">
					{{ message }}
				</div>
			{% endfor %}
		{% endfor %}
		<nav aria-label="breadcrumb" class="hide-on-mobile">
			<ol class="breadcrumb">
				<li aria-current="page" class="page-directory breadcrumb-item active">MOKPI</li>
			</ol>
		</nav>
		<div class="no-max box txt-center-mobile">
			<div class="title">
                <div class="row">
                    <div class="col-lg-6">
                        <h1 class="page-title">MOKPI</h1>
					</div>
					<div class="col-lg-6 text-lg-right">
						<a class="btn btn-tqm-outline mr-3" href="{{ path('mokpi_dashboard') }}">
							Acessar dashboard
						</a>
                        <a href="{{ path('mokpi_new') }}" class="btn btn-tqm ml-auto">
							<i class="fas fa-plus"></i>
							Novo MOKPI
						</a>
					</div>
                </div>
            </div>
			<div class="box-body px-4 py-4">
				<div class="tableContainer">
					<div class="row mb-4 hide-on-mobile">
						<input data-attr-search="name" class="col-md-2 mx-1 form-control" id="inputSearchTable" type="text" placeholder="Pesquisar nome"></input>
						<select data-attr-search="obj" class="form-control col-md-1-5 mx-1 inputSearchTable">
							<option value="">Filtrar obj</option>
							{% for obj in objs %}
								<option value="{{obj}}">{{obj}}</option>
							{% endfor %}
						</select>
						<select data-attr-search="year" class="form-control col-md-1-5 mx-1 inputSearchTable">
							<option value="">Filtrar ano</option>
							{% for year in years %}
								<option value="{{year}}">{{year}}</option>
							{% endfor %}
						</select>
						<select data-attr-search="category" class="form-control col-md-2 mx-1 inputSearchTable">
							<option value="">Filtrar categoria</option>
							<option value="SSMA">SSMA</option>
							<option value="Qualidade">Qualidade</option>
							<option value="Entrega">Entrega</option>
							<option value="Eficiência">Eficiência</option>
							<option value="Desenvolvimento de produto">Desenvolvimento de produto</option>
						</select>
						<select data-attr-search="user" class="form-control col-md-2 mx-1 inputSearchTable">
							<option value="">Filtrar responsável</option>
							{% for user in responsibles %}
								<option value="{{user}}">{{user}}</option>
							{% endfor %}
						</select>
						<p id="clearFilters" class="btn btn-discard">Limpar</p>
					</div>
					<div class="headerTable">
						<div class="leftSideHeader">
							<input style="margin-left: 30px" id="selectAllAggridCheckbox" type="checkbox"/>
							<div class="trashIcon" id="deleteAllSelected">
								<span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-trash"></span>
							</div>
							<div class="c-pointer trashIcon" id="exportData">
								<span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-file-export"></span>
							</div>
						</div>
						<div class="rightSideHeader">
							<div class="hide-on-mobile">
								<p class="numberOfPages">
									Página
									<span id="currentPage"></span>
									de
									<span id="totalPage"></span>
								</p>
								<div class="leftArrowIcon">
									<span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-chevron-left"></span>
								</div>
								<div class="rightArrowIcon">
									<span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-chevron-right"></span>
								</div>
							</div>
						</div>
					</div>
					<div style="height: 90%; max-width:100%;" class="ag-theme-material" id="aggridTableWrapper">

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

<script>
	var tableData = {{ tableData|json_encode|raw }};
	var currentUserId = {{app.user.id}};
</script>
{{ encore_entry_script_tags('mokpi-aggrid-table') }}{% endblock %}