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

{% block title %}Editar iniciativa
{% 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">
  		<nav aria-label="breadcrumb" class="hide-on-mobile">
  			<ol class="breadcrumb">
  				<li class="page-directory-previous breadcrumb-item">
  					<a href="{{ path('pdp_index') }}">Meus PDPs</a>
  				</li>
  				<li aria-current="page" class="page-directory breadcrumb-item active">{{pdp.title ? pdp.title : 'Editar'}}</li>
  			</ol>
  		</nav>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="/pdp/{{pdp.id}}/edit">Contrato Projeto</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/pdp/{{pdp.id}}/scheme">Cronograma</a>
            </li>
        </ul>

        <div class="no-max box">
			<div class="px-4 pt-4">
				<h6 class="page-subtitle hr alignt-buttons-center mb-3">Tarefas</h6>
			</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" data-pdp-finished="{{pdp_finished}}">
	                            <img src="{{asset('build/images/excluir.svg')}}" alt="" data-pdp-finished="{{pdp_finished}}">
	                        </div>
							<div class="trashIcon" id="fininshAllSelected" data-pdp-finished="{{pdp_finished}}">
								<img src="{{asset('build/images/Concluir.svg')}}" alt="" data-pdp-finished="{{pdp_finished}}">
							</div>
	                        <div class="" id="pdpNotifyUser" data-pdp-finished="{{pdp_finished}}">
	                            <span data-pdp-finished="{{pdp_finished}}" class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-bell"></span>
	                        </div>
	                        <div class="" id="exportData">
	                            <span class="c-pointer trashIcon ml-4 mt-2 font-blue fas fa-file-export"></span>
	                        </div>
	                        {# <input class="inputSearch ml-5" id="inputSearchTable" type="text" placeholder="Procurar..." ></input> #}
	                    </div>
	                    <div class="rightSideHeader">
							{% if isInitialApprover and initialNeedsApprove %}
								<a class="btn btn-tqm-outline mr-2 btn-initial-approve" href="#" data-id="{{pdp.id}}">
									<i class="mr-1 fas fa-check"></i>
									Aprovar MS10
								</a>
							{% endif %}
							{% if isResultsApprover and resultsNeedsApprove %}
								<a class="btn btn-tqm-outline mr-2 btn-results-approve" href="#" data-id="{{pdp.id}}">
									<i class="mr-1 fas fa-check"></i>
									Aprovar MS50
								</a>
							{% endif %}
							{% if not pdp_finished %}
								<a class="btn btn-tqm" href="/pdp/{{pdp.id}}/new-task">
									<i class="mr-1 fas fa-plus"></i>
									Nova tarefa
								</a>
							{% endif %}
							{# <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 style="height: 90%; max-width:100%;" class="ag-theme-material" id="aggridTableWrapper">

	                </div>
	            </div>
	        </div>
        </div>
    </div>
    <script>
		var tableData = {{ tableData|json_encode|raw }};
		window.props = {
			noPagination: true
		}
	</script>
	<style>
		.ag-header-cell-label {
			padding-left: 15px !important;
		}
		.ag-row:not(.pdp-row-colored):not(:hover) {
			background-color: #FFF !important;
		}
		.ag-center-cols-container {
			width: 100% !important;
		}
	</style>
	{{ encore_entry_script_tags('simple-aggrid-table') }}
	{{ encore_entry_script_tags('pdp') }}
{% endblock %}