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

{% block title %}
    CCM
{% 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 class="hide-on-mobile" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="page-directory-previous breadcrumb-item">
                    <a href="{{ path('ccm') }}">CCM</a>
                </li>
                <li aria-current="page" class="page-directory breadcrumb-item active">Clientes</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" >Clientes</h1>
                    </div>
                    <div class="col-lg-6 text-lg-right">
                        <a class="btn btn-tqm" href="{{ path('ccm_new_client') }}">
                            <i class="fas fa-plus"></i>
                            Novo Cliente
                        </a>
                    </div>
                </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="" 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 %}