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

{% block title %}{{ 'app.manager.pages.external_links.new.title'|trans }}{% endblock %}

{% block toolbar_actions %}
	<a class="btn btn-sm fw-bold btn-primary new-entity" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_franchise">
        {{ 'app.global.buttons.add'|trans }}
    </a>
{% 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="ps-4 min-w-100px rounded-start">{{ 'app.manager.pages.domains.list.domain'|trans }}</th>
							<th class="min-w-150px rounded-start text-center">{{ 'app.manager.pages.domains.list.template'|trans }}</th>
							<th class="w-200px">{{ 'app.global.fields.creation_date'|trans }}</th>
							<th class="w-50px text-end rounded-end"></th>
						</tr>
					</thead>
					<tbody class="fs-6">
						{% for domain in domains %}
							{% set image = getImage(templates_images ~ domain.cover) %}
							<tr>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{{ domain.url }}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									<button type="button" class="btn btn-light-primary my-2"
										data-bs-dismiss="true" data-bs-placement="top"
										data-bs-toggle="popover" data-bs-html="true"
										title="<b>Template preview</b>"
										data-bs-content='
											<div class="card overlay overflow-hidden" style="width: 50px">
												<div class="card-body p-0">
													<div class="overlay-wrapper">
														<img src={{ asset(image) }} alt="" class="w-100 rounded"/>
													</div>
													{% if domain.link is not null %}
													<div class="overlay-layer bg-dark bg-opacity-50">
														<a href={{ domain.link }} target="_blank" class="btn btn-light-primary btn-shadow ms-2">
															<i class="fa-solid fa-magnifying-glass"></i>
														</a>
													</div>
													{% endif %}
												</div>
											</div>
										'
									>
										{{ domain.templateName }}
									</button>
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{{ domain.createdAt|date('d/m/Y H:i') }}
								</td>
								<td class="text-end">
									<div class="d-flex justify-content-end flex-shrink-0">
										{{ link('edit','modal', 'success', {'entity-id' : domain.id, 'modalId': 'foxorders_modal_form_franchise' }) }}
										{% include 'Includes/delete.html.twig' with {
											'route': path('foxorders_franchise_domain_delete', {'id': domain.id}) ,
											'token': csrf_token('delete' ~ domain.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>
		</div>
	</div>
{% endblock %}

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

{% block javascripts %}
    {{ parent() }}
    <script>
		var franchise = {{ franchise.id }};
		var translations = {
            "url": {
                'empty': '{{ 'app.global.validation.domains.url.empty'|trans }}',
                'valid': '{{ 'app.global.validation.domains.url.valid'|trans }}',
                'lowerCase': '{{ 'app.global.validation.domains.url.lower_case'|trans }}',
                'exist': '{{ 'app.global.validation.domains.url.exist'|trans }}',
			},
			"modal": {
				'add': '{{ 'app.manager.pages.domains.new.title'|trans }}',
				'edit': '{{ 'app.manager.pages.domains.edit.title'|trans }}'
			}
        }
	</script>
    <script src="{{asset('foxorders/js/validation/rules/franchise/domains.js') }}"></script>
    <script src="{{asset('foxorders/js/franchise/domains.js') }}"></script>
{% endblock %}