{% extends 'partial/admin/base.html.twig' %}

{% block title %}Administration{% endblock %}

{% block stylesheets %}
	 <!-- Icon Fonts -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <!-- FontAwesome CDN (version 6) -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

{% endblock %}

{% block sidebar %}
    {% include 'partial/admin/sidebar.html.twig' %}
{% endblock %}

{% block navbar %}
    {% include 'partial/admin/navbar.html.twig' %}
{% endblock %}

{% block body %}
    {% include 'admin/category/category.html.twig' %}
{% endblock %}

{% block footer %}
    {% include 'partial/admin/footer.html.twig' %}
{% endblock %}

{% block javascripts %}
   
	<!-- Bootstrap JS -->
	<script src={{asset("assets_admin/js/bootstrap.bundle.min.js")}}></script>
	<!--plugins-->
	<script src={{asset("assets_admin/js/jquery.min.js")}}></script>
	<script src={{asset("assets_admin/plugins/simplebar/js/simplebar.min.js")}}></script>
	<script src={{asset("assets_admin/plugins/metismenu/js/metisMenu.min.js")}}></script>
	<script src={{asset("assets_admin/plugins/perfect-scrollbar/js/perfect-scrollbar.js")}}></script>
	<script src={{asset("assets_admin/plugins/datatable/js/jquery.dataTables.min.js")}}></script>
	<script src={{asset("assets_admin/plugins/datatable/js/dataTables.bootstrap5.min.js")}}></script>
	<script>
		$(document).ready(function() {
			$('#example').DataTable();
		  } );
	</script>
	<script>
		$(document).ready(function() {
			var table = $('#example2').DataTable({
				lengthChange: false,
				buttons: [
					{
						extend: 'copy',
						exportOptions: {
							columns: ':not(.noExport)'  // Exclut les colonnes avec la classe `noExport`
						}
					},
					{
						extend: 'excel',
						exportOptions: {
							columns: ':not(.noExport)'
						}
					},
					{
						extend: 'pdf',
						exportOptions: {
							columns: ':not(.noExport)'
						}
					},
					{
						extend: 'print',
						exportOptions: {
							columns: ':not(.noExport)'
						}
					}
				]
			});

			table.buttons().container().appendTo('#example2_wrapper .col-md-6:eq(0)');
		});
	</script>

	
	<script src={{asset("assets_admin/plugins/select2/js/select2.min.js")}}></script>
	<script>
		function formatIcon (state) {
			if (!state.id) {
				return state.text;
			}
			var iconClass = $(state.element).data('icon');
			if (!iconClass) {
				return state.text;
			}
			var $state = $(
				'<span><i class="' + iconClass + ' me-2"></i>' + state.text + '</span>'
			);
			return $state;
		}

		$('.single-select').select2({
			theme: 'bootstrap4',
			width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
			placeholder: $(this).data('placeholder'),
			allowClear: Boolean($(this).data('allow-clear')),
			templateResult: formatIcon,    // Pour afficher les options avec icônes
			templateSelection: formatIcon, // Pour afficher la sélection avec icône
		});


		$('.multiple-select').select2({
			theme: 'bootstrap4',
			width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
			placeholder: $(this).data('placeholder'),
			allowClear: Boolean($(this).data('allow-clear')),
		});
	</script>


	<!--app JS-->
	<script src={{asset("assets_admin/js/app.js")}}></script>

{% endblock %}