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

{% block title %}
	{{ 'app.shop_owner.pages.translations.head_title'|trans }}
{% endblock %}

{% block component_body %}
	<div class="card card-flush">
		<div class="card-body pt-0">
			<div class="row g-6 g-xl-9">
				<div class="col-sm-12 col-md-4">
					<div class="card h-100">
						<div class="card-header pt-9">
							<div class="card-title m-0">
								{{ 'app.shop_owner.pages.translations.card_title'|trans }}
							</div>
						</div>
						<div class="card-body p-9">
							<div class="fs-3 fw-bold text-gray-900">
								{{ 'app.shop_owner.pages.translations.source.title'|trans }}
							</div>
							<p class="text-gray-500 fw-semibold fs-5 mt-1 mb-7">
								{{ 'app.shop_owner.pages.translations.source.description'|trans }}
							</p>
							<div class="d-flex flex-wrap mb-5" style="min-height: 200px">
								<div class="min-w-125px mb-3 w-100">
									{{ defaultLocaleCode|select('srcLocaleList', 'fa fa-language', false, null, true) }}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="card h-100">
						<div class="card-header pt-9">
							<div class="card-title m-0"></div>
						</div>
						<div class="card-body p-9">
							<button class="btn btn-primary btn-translate mt-10 min-w-175px">{{ 'app.global.buttons.translate'|trans }}
								<div class="spinner-border text-white spinner" role="status" style="width: 1rem; height: 1rem; display: none">
								</div>
							</button>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5">
					<div class="card h-100">
						<div class="card-header pt-9">
							<div class="card-title m-0"></div>
						</div>
						<div class="card-body p-9">
							<div class="fs-3 fw-bold text-gray-900">
								{{ 'app.shop_owner.pages.translations.destination.title'|trans }}
							</div>
							<p class="text-gray-500 fw-semibold fs-5 mt-1 mb-7">
								{{ 'app.shop_owner.pages.translations.destination.description'|trans }}
							</p>
							<div class="d-flex flex-wrap mb-5" style="min-height: 200px">
								<div class="min-w-125px mb-3 w-100">
									{{ targetlocales|select('destLocaleList', 'fa fa-language', true ,'app.shop_owner.pages.translations.destination.placeholder'|trans) }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		var shop = {{ shop.id }};
		swalTranslatedTitle = '{{ 'app.shop_owner.pages.translations.swal.translated_title'|trans }}';
		swalTranslatedText = '{{ 'app.shop_owner.pages.translations.swal.translated_text'|trans }}';
		swalFailedTitle = '{{ 'app.shop_owner.pages.translations.swal.failed_title'|trans }}';
		swalFailedText = '{{ 'app.shop_owner.pages.translations.swal.failed_text'|trans }}';
    </script>
    <script src="{{asset('foxorders/js/shop/translate.js') }}"></script>
{% endblock %}