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

{% block title %}Minhas iniciativas
{% 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="initiative-panel container-fluid box-no-bkg-color">
		<nav aria-label="breadcrumb" class="hide-on-mobile">
			<ol class="breadcrumb">
				<li class="page-directory-previous breadcrumb-item">
  					<a href="{{ path('index') }}">Início</a>
				</li>
				<li aria-current="page" class="page-directory breadcrumb-item active">Minhas iniciativas</li>
			</ol>
		</nav>
        <div class="initiative-panel box txt-center-mobile">
            <div class="title">
                <div class="row">
                    <div class="col-lg-6">
                        <h1 class="page-title">Minhas iniciativas</h1>
					</div>
					<div class="col-lg-6 text-lg-right">
                        <a href="{{ path('initiative_new') }}" class="btn btn-tqm ml-auto">
							<i class="fas fa-plus"></i>
							Adicionar Iniciativa
						</a>
					</div>
                </div>
            </div>
			<div class="row">
				<div class="col-lg-12 mt-3 pl-5">
					<span class="badge-dark-blue d-inline-block mr-3 text-center">
						Soma redução de custo <br/>
						R$ {{sum_cost_reduction}}
					</span>
					<span class="badge-dark-blue d-inline-block text-center">
						Soma custo evitado <br/>
						R$ {{sum_avoided_cost}}
					</span>
				</div>
			</div>
            <div class="box-body px-4 py-4">
                <div class="tableContainer">
					<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="" id="exportData">
								<span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-file-export"></span>
							</div>
						</div>
						<div class="rightSideHeader">
							<p class="numberOfPages hide-on-mobile">
								Página <span id="currentPage"></span> de <span id="totalPage"></span>
							</p>
							<div class="leftArrowIcon hide-on-mobile">
								<span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-chevron-left"></span>
							</div>
							<div class="rightArrowIcon hide-on-mobile">
								<span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-chevron-right"></span>
							</div>
						</div>
					</div>
					<div style="height: 90%; max-width:100%;" class="ag-theme-material" id="aggridTableWrapper">

					</div>
                </div>
            </div>
        </div>
    </div>
	<script>
		var tableData = {{ tableData|json_encode|raw }};
	</script>
	{{ encore_entry_script_tags('simple-aggrid-table') }}
{% endblock %}