{% extends "../../layouts/master.njk" %}

{% block csslib %}
	<link href="/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block jslib %}
	{# // begin::Vendors Javascript(used by this page) #}
	<script src='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js'></script>
	{# // end::Vendors Javascript #}
	{# // end::Custom Javascript #}

	<script src='/cms-static/common/js/form-data-json.min.js'></script>
	<script src='/cms-static/common/js/es-form.js'></script>
{% endblock %}

{% block content %}
	{% block title %}
		<title>{{ 'Edit' if country else 'Add' }} Country - {{browserTitle | upper()}} CMS</title>
	{% endblock %}

	<div class="d-flex flex-column flex-column-fluid">
		<div class="app-toolbar py-3 py-lg-6" id="beaver_app_toolbar">
			<div class="app-container container-xxl d-flex flex-stack" id="beaver_app_toolbar_container">
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
					<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Add Country</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a class="text-muted text-hover-primary" href="{{LANDING_URL}}">Dashboard</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span></li>
						<li class="breadcrumb-item text-muted">Country <span class="bullet bg-gray-400 w-5px h-2px"></span></li>
						<li class="breadcrumb-item text-muted">New</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="app-content flex-column-fluid" id="beaver_app_content">
			<div class="app-container container-xxl" id="beaver_app_content_container">
				<div class="card mb-5 mb-xl-10">
					<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#beaver_account_profile_details" aria-expanded="true" aria-controls="beaver_account_profile_details">
						<div class="card-title m-0">
							<h3 class="fw-bold m-0">Country Form</h3>
						</div>
					</div>
					<div id="beaver_account_settings_profile_details">
						<form class="form es-form" id="beaver_account_profile_details_form" action="/admin/config/country/save" data-redirect-url="/admin/config/country" method="post" autocomplete="off">
							<input type="hidden" name="id" value="{{ country._id }}">
							<div class="card-body border-top p-9">
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Name</label>
									<div class="col-lg-8">
										<div class="row">
											<div class="col-lg-12 fv-row">
												<input type="text" name="name" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Name" value="{{ country.name.en }}">
												<div class="fv-plugins-message-container invalid-feedback" id="field-error-name"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Country Code</label>
									<div class="col-lg-8 fv-row">
										<input type="text" name="code" class="form-control form-control-lg form-control-solid" placeholder="Country Code" value="{{ country.code if country}}">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-code"></div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Currency</label>
									<div class="col-lg-8 fv-row">
										<input type="text" name="currency" class="form-control form-control-lg form-control-solid" placeholder="Currency Name" value="{{ country.currency or 'USD' }}">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-currency"></div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Currency Symbol</label>
									<div class="col-lg-8 fv-row">
										<input type="text" name="currency_symbol" placeholder="Currency Symbol" class="form-control form-control-lg form-control-solid" value="{{ country.currency_symbol or '$' }}">
										<div id="field-error-currency_symbol" class="fv-plugins-message-container invalid-feedback"></div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Currency Decimal Points</label>
									<div class="col-lg-8 fv-row">
										<input type="text" name="currency_decimal_points" placeholder="Currency Percision" class="form-control form-control-lg form-control-solid" value="{{ country.currency_decimal_points or 2 }}">
										<div id="field-error-currency_decimal_points" class="fv-plugins-message-container invalid-feedback"></div>
									</div>
								</div>

								{# <div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Timezone</label>
									<div class="col-lg-8 fv-row">
										<input type="text" name="timezone" placeholder="Timezone" class="form-control form-control-lg form-control-solid" value="{{ country.timezone }}">
										<div id="field-error-timezone" class="fv-plugins-message-container invalid-feedback"></div>
									</div>
								</div> #}

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Timezone</label>
									<div class="col-lg-8 fv-row">
										<select class="form-control form-control-lg form-control-solid" data-control="select2" name="timezone">
											<option>-Select Timezone-</option>
											{% for timezone in timezones %}
												<option value="{{timezone.tzCode}}" {% if country.timezone == timezone.tzCode %} selected {% endif %}>{{timezone.label}}</option>
											{% endfor %}
										</select>
										<div id="field-error-timezone" class="fv-plugins-message-container invalid-feedback"></div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Position</label>
									<div class="col-lg-8 fv-row">
										<input type="number" name="position" class="form-control form-control-lg form-control-solid" placeholder="Position" value="{{ country.position or 1 }}">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-position"></div>
									</div>
								</div>

							</div>

							<div class="card-footer d-flex justify-content-end py-6 px-9">
								<button class="btn btn-dark form-submit-btn" id="beaver_account_profile_details_submit" type="submit">
									<span class="preloader d-none">Updating</span>
									<span class="label">Save</span></button>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock %}