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

{% block title %}
	{{ 'app.admin.pages.aliments.head_title'|trans }}
{% endblock %}

{% block toolbar_actions %}
	{% include 'Includes/Button/add.html.twig'%}
{% endblock %}

{% block search %}
	{% include 'Search/list.html.twig' %}
{% endblock %}

{% block component_body %}
	<div class="card card-flush">
		<div class="card-body pt-0">
			<div class="table-responsive">
				<table class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold">
					<thead class="fs-7 text-gray-400 text-uppercase">
						<tr>
							<th class="min-w-50px ps-4 rounded-start">{{ 'app.global.fields.status'|trans }}</th>
							<th class="ps-4 min-w-50px rounded-start">{{ 'app.global.fields.svg.label'|trans }}</th>
							<th class="ps-4 min-w-50px rounded-start">{{ 'app.global.fields.image.label'|trans }}</th>
							<th class="min-w-50px">{{ 'app.global.fields.name'|trans }}</th>
							<th class="min-w-50px">{{ 'app.global.fields.code'|trans }}</th>
							<th class="min-w-50px">{{ 'app.global.fields.description'|trans }}</th>
							<th class="w-200px">{{ 'app.global.fields.creation_date'|trans }}</th>
							<th class="text-end"></th>
						</tr>
					</thead>
					<tbody>
						{% for aliment in aliments %}
							<tr>
								<td>
									{{ enabled(aliment.id, 'foxorders_admin_aliment_enable', aliment.enabled) }}
								</td>
								<td>
									<div class="d-flex align-items-center">
										<div class="symbol symbol-45px me-5">
        									{% set logo = getImage(aliments_images ~ aliment.logoSvg) %}
											<img alt="Logo" src="{{ asset(logo) }}" class="w-30px h-30px"/>
										</div>
									</div>
								</td>
								<td>
									<div class="d-flex align-items-center">
										<div class="symbol symbol-45px me-5">
        									{% set logo = getImage(aliments_images ~ aliment.logo) %}
											<img alt="Logo" src="{{ asset(logo) }}" class="w-30px h-30px"/>
										</div>
									</div>
								</td>
								<td>
									<a class="text-dark fw-bolder text-hover-primary d-block fs-6">{{ aliment.name }}</a>
								</td>
								<td>
									<a class="text-dark fw-bolder text-hover-primary d-block fs-6">{{ aliment.code }}</a>
								</td>
								<td>
									<a class="text-dark fw-bolder text-hover-primary d-block fs-6">{{ aliment.description }}</a>
								</td>
								<td>
									<a class="text-dark fw-bolder text-hover-primary d-block fs-6">{{ aliment.createdAt|date('d/m/Y H:i') }}</a>
								</td>
								<td class="text-end">
									<div class="d-flex justify-content-end flex-shrink-0">
										{{ link('edit','modal', 'success', {'entity-id' : aliment.id, 'entity-name' : aliment.name, 'modalId': 'foxorders_modal_form_admin' }) }}
										{% include 'Includes/delete.html.twig' with {
                                            'route':path('foxorders_admin_aliment_delete', {'id': aliment.id}) ,
                                            'token': csrf_token('delete' ~ aliment.id),
                                            'button': 'list_delete'}
                                        %}
									</div>
								</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="5" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
			{% include 'List/pagination.html.twig' with { 'data' : aliments } %}
		</div>
	</div>
{% endblock %}

{% block modals %}
	{% include 'Modal/form.html.twig' with {
        'title': 'app.admin.pages.aliments.new.title'|trans,
        'id': 'admin',
    } %}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript">
		var translations = {
			'code': {
				'empty': '{{ 'app.global.validation.aliments.code.empty'|trans }}',
				'exist': '{{ 'app.global.validation.aliments.code.exist'|trans }}'
			},
			"name": '{{ 'app.global.validation.aliments.name'|trans }}',
			"modal": {
				'add': '{{ 'app.admin.pages.aliments.new.title'|trans }}',
				'edit': '{{ 'app.admin.pages.aliments.edit.title'|trans }}'
			}
		}
	</script>
	<script src="{{asset('foxorders/js/admin/aliments.js') }}"></script>
	<script src="{{asset('foxorders/js/ajax/toggle-status.js') }}"></script>
{% endblock %}