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

{% block title %}
	{{ 'app.manager.pages.medias.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 id="kt_project_users_card_pane" class="tab-pane fade show active">
		<div class="row g-6 g-xl-9">
			{% for media in medias %}
				<div class="col-md-6 col-xxl-4">
					<div class="card card-stretch">
						<div class="overlay">
							<div class="overlay-layer card-rounded bg-dark bg-opacity-75 z-index-3">
								{{ link('edit','modal', 'success', {'entity-id' : media.id, 'modalId': 'foxorders_modal_form_franchise' }) }}
								{% include 'Includes/Manager/delete.html.twig' with {
									'route':path('foxorders_franchise_media_delete', {'id': media.id}) ,
									'token': csrf_token('delete' ~ media.id),
									'button': 'list_delete'} %}
							</div>
							<div class="card-body pt-5">
								<div class="d-flex flex-center flex-column mb-5">
									<div class="symbol symbol-150px symbol-circle mb-7">
										{% if media.url %}
											{% if media.url.name ends with '.mp4' %}
												{% set video = medias_images ~ media.url.name %}
												<video controls muted style="width: 100%; height: auto;">
													<source src="{{ asset(video) }}" id="video_preview" type="video/mp4">
												</video>
											{% else %}
												{% set image = media.imageUrl ? media.imageUrl : getImage(medias_images ~ media.url.name) %}
												<object style="width: 100%; height: auto;" data="{{ asset(image) }}"></object>
											{% endif %}
										{% endif %}
									</div>
								</div>
								<div class="separator separator-dashed my-3"></div>
								<div class="d-flex flex-stack fs-4 py-3">
									<div class="row col-lg-12">
										<div class="col-md-6 align-center text-center">
											<div class="fw-bold mt-5">{{ 'app.manager.pages.medias.form.name.label'|trans }}</div>
											<div class="text-gray-600">{{ media.mediaName.description }}</div>
										</div>
										<div class="col-md-6 align-center text-center">
											<div class="fw-bold mt-5">{{ 'app.manager.pages.medias.form.type.label'|trans }}</div>
											<div class="text-gray-600">{{ media.type ? ('app.manager.pages.medias.form.type.' ~ media.type)|trans : 'app.global.choices.none'|trans }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			{% else %}
				<div style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</div>
			{% endfor %}
		</div>
		{% include 'List/pagination.html.twig' with { 'data' : medias } %}
	</div>
{% endblock %}
{% block modals %}
	{% include 'Modal/form.html.twig' with {
        'title': 'app.manager.pages.medias.new.title'|trans,
        'id': 'franchise',
    } %}
{% endblock %}
{% block javascripts %}
	{{ parent() }}
	<script>
		var franchise = {{ franchise.id }};
		var translations = {
			"name": '{{ 'app.global.validation.medias.name'|trans }}',
			"image": '{{ 'app.global.validation.medias.image'|trans }}',
			"key": '{{ 'app.global.validation.medias.type'|trans }}',
			"modal": {
				'add': '{{ 'app.manager.pages.medias.new.title'|trans }}',
				'edit': '{{ 'app.manager.pages.medias.edit.title'|trans }}'
			}
		}
		var videoTypeCode = "{{ constant('APP\\Entity\\Franchise\\MediaInterface::FILE_TYPE_VIDEO') }}";
		var imageTypeCode = "{{ constant('APP\\Entity\\Franchise\\MediaInterface::FILE_TYPE_IMAGE') }}";
	</script>
	<script src="{{ asset('foxorders/js/validation/rules/franchise/medias.js') }}"></script>
	<script src="{{ asset('foxorders/js/franchise/medias.js') }}"></script>
{% endblock %}