{% extends 'base.html.twig' %}
{% block header %}
	<div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-8">
            <h2>Objet métier ({{ objetmetiers|length }})</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{path('start')}}">Mapsi</a>
                </li>
                <li class="breadcrumb-item active">
                    <strong><a>Objet Métier</a></strong>
                </li>
            </ol>
        </div>
        <div class="col-sm-4">
            <div class="title-action">
            {% if is_granted('ROLE_ADMIN') %}
                <a class="btn btn-primary" href="{{path('objetmetier_create')}}">+ Nouvel Objet Métier</a>
            {% endif%}
            </div>
        </div>
    </div>
{% endblock %}


{% block body %}
	<div class="wrapper wrapper-content animated fadeIn">
		<div class="row">
	        <div class="col-lg-12">
				<div class="tabs-container">
	                <ul class="nav nav-tabs" role="tablist">
		                <li><a class="nav-link active show" data-toggle="tab" href="#tab-1"> Liste</a></li>
	                </ul>
	                <div class="tab-content">
		                 <div role="tabpanel" id="tab-1" class="tab-pane active show">
	                        <div class="panel-body">
		                        <div class="row">
									<div class="col-lg-12">
										<section class="objetmetier">
											<div class="table-responsive">
												<table class="table table-striped table-bordered table-hover dataTables-objetmetier" >
													<thead>
													<tr>
												   		<th scope="col">ID</th>
												   		<th scope="col">Désignation</th>
												   		<th scope="col">Type</th>
												   		<th scope="col">DCP</th>
												   		{% if is_granted('ROLE_ADMIN') %}<th scope="col">Action</th>{% endif %}
												    </tr>
													</thead>
													<tbody>
														{% for objetmetier in objetmetiers %}
															<article>
																<tr>
															      <th scope="row" data-order="{{ objetmetier.id }}"><span class="badge badge-secondary">OM-{{ objetmetier.id }}</span></th>
															      <th scope="row"><a class="" href="{{path('objetmetier_edit',{'id' : objetmetier.id} ) }}">{{ objetmetier.designation | title }}</a></th>
															      <td scope="row">{{ objetmetier.type.designation | default("N/C") }}<br>{{ objetmetier.typesupport.designation | default("N/C") }}</td>
															      <td scope="row">{{ objetmetier.dcp.designation | default("N/C") }}<br>Sensible : {{ objetmetier.dcpsensible.designation | default("N/C") }}</td>
															      {% if is_granted('ROLE_ADMIN') %}<td><a class="btn btn-danger btn-sm del" href="{{path('objetmetier_remove',{'id' : objetmetier.id} ) }}"><i class="fa fa-trash"></i></a></td>{% endif %}
															      
										
															    </tr>
															</article>
														{% endfor %}
													</tbody>
												</table>
											</div>
										</section>
									</div>
								</div>
							</div>
	                    </div>
	                </div>
				</div>
	        </div>
	    </div>
	</div>
{% endblock %}


{% block javascripts %}
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function(){
	        
	        $('a.del').confirm({
			    title: 'Attention',
			    content: 'Voulez vous vraiment supprimer cet objet métier ?',
			    buttons: {
			        supprimer: function () {
			           location.href = this.$target.attr('href');
			        },
			        annuler: function () {
			        }    
			    }
			});

	        
	        
	        
            $('.dataTables-objetmetier').DataTable({
                pageLength: 25,
                responsive: true,
                dom: '<"html5buttons"B>lTfgitp',
                buttons: [
                    { extend: 'copy'},
                    {extend: 'csv'},
                    {extend: 'excel', title: 'Flux'},
                    {extend: 'pdf', title: 'Flux'},

                    {extend: 'print',
                     customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                    }
                    }
                ]

            });

        });

    </script>
{% endblock %}