{% 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 #}
	{# //- // begin::Custom Javascript(used by this page) #}
	<script src='/cms-static/admin/assets/js/widgets.bundle.js'></script>
	<script src='/cms-static/admin/assets/js/custom/widgets.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>
	<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
	{# //- // 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>
	<script src='/cms-static/common/js/field-generator.js'></script>
{% endblock %}

{% block customScript %}
	<script>
		fieldSchemaJson = {{fields_to_map | safe}} || [];
		bkupDataJson = _.cloneDeep(fieldSchemaJson)
		generateField()
	</script>
{% endblock %}

{% block content %}
	{% block title %}
		<title>{{ contentType.title }} Configuration - {{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">Content Type Details | {{contentType.title}}</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">Content Type <span class="bullet bg-gray-400 w-5px h-2px ms-1"></span></li>
						<li class="breadcrumb-item text-muted">View</li>
					</ul>
				</div>
				<div class="d-flex align-items-center gap-2 gap-lg-3">
					<a href="/admin/config/content-type/" class="btn btn-sm fw-bold btn-light">
						<i class="fa fa-arrow-left"></i>
						Back
					</a>
					<a href="{{ '/admin/config/content-type/edit/' + contentType._id }}" class="btn btn-sm fw-bold btn-light-primary">Edit Content Type</a>
				</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="row">
					<div class="col-3">
						<ul class="nav nav-tabs nav-pills flex-row border-0 flex-md-column me-5 mb-3 mb-md-0 fs-6 min-w-lg-200px">

							<li class="nav-item w-100 me-0 mb-md-2">
								<a class="nav-link active w-100 btn btn-flex btn-active-light-info" data-bs-toggle="tab" href="#beaver_vtab_pane_5">
									<span class="svg-icon svg-icon-2">
										<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path opacity="0.3" d="M22.1 11.5V12.6C22.1 13.2 21.7 13.6 21.2 13.7L19.9 13.9C19.7 14.7 19.4 15.5 18.9 16.2L19.7 17.2999C20 17.6999 20 18.3999 19.6 18.7999L18.8 19.6C18.4 20 17.8 20 17.3 19.7L16.2 18.9C15.5 19.3 14.7 19.7 13.9 19.9L13.7 21.2C13.6 21.7 13.1 22.1 12.6 22.1H11.5C10.9 22.1 10.5 21.7 10.4 21.2L10.2 19.9C9.4 19.7 8.6 19.4 7.9 18.9L6.8 19.7C6.4 20 5.7 20 5.3 19.6L4.5 18.7999C4.1 18.3999 4.1 17.7999 4.4 17.2999L5.2 16.2C4.8 15.5 4.4 14.7 4.2 13.9L2.9 13.7C2.4 13.6 2 13.1 2 12.6V11.5C2 10.9 2.4 10.5 2.9 10.4L4.2 10.2C4.4 9.39995 4.7 8.60002 5.2 7.90002L4.4 6.79993C4.1 6.39993 4.1 5.69993 4.5 5.29993L5.3 4.5C5.7 4.1 6.3 4.10002 6.8 4.40002L7.9 5.19995C8.6 4.79995 9.4 4.39995 10.2 4.19995L10.4 2.90002C10.5 2.40002 11 2 11.5 2H12.6C13.2 2 13.6 2.40002 13.7 2.90002L13.9 4.19995C14.7 4.39995 15.5 4.69995 16.2 5.19995L17.3 4.40002C17.7 4.10002 18.4 4.1 18.8 4.5L19.6 5.29993C20 5.69993 20 6.29993 19.7 6.79993L18.9 7.90002C19.3 8.60002 19.7 9.39995 19.9 10.2L21.2 10.4C21.7 10.5 22.1 11 22.1 11.5ZM12.1 8.59998C10.2 8.59998 8.6 10.2 8.6 12.1C8.6 14 10.2 15.6 12.1 15.6C14 15.6 15.6 14 15.6 12.1C15.6 10.2 14 8.59998 12.1 8.59998Z" fill="currentColor"></path>
											<path d="M17.1 12.1C17.1 14.9 14.9 17.1 12.1 17.1C9.30001 17.1 7.10001 14.9 7.10001 12.1C7.10001 9.29998 9.30001 7.09998 12.1 7.09998C14.9 7.09998 17.1 9.29998 17.1 12.1ZM12.1 10.1C11 10.1 10.1 11 10.1 12.1C10.1 13.2 11 14.1 12.1 14.1C13.2 14.1 14.1 13.2 14.1 12.1C14.1 11 13.2 10.1 12.1 10.1Z" fill="currentColor"></path>
										</svg>
									</span>
									<span class="d-flex flex-column align-items-start">
										<span class="fs-4 fw-bold">Config</span>
										<span class="fs-7">General Configuration</span>
									</span>
								</a>
							</li>

							{% if contentType.page_builder == false %}
								<li class="nav-item w-100 me-0 mb-md-2">
									<a class="nav-link w-100 btn btn-flex btn-active-light-success" data-bs-toggle="tab" href="#beaver_vtab_pane_4">
										<span class="svg-icon svg-icon-2">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor"/>
												<path d="M11.9343 12.5657L9.53696 14.963C9.22669 15.2733 9.18488 15.7619 9.43792 16.1204C9.7616 16.5789 10.4211 16.6334 10.8156 16.2342L14.3054 12.7029C14.6903 12.3134 14.6903 11.6866 14.3054 11.2971L10.8156 7.76582C10.4211 7.3666 9.7616 7.42107 9.43792 7.87962C9.18488 8.23809 9.22669 8.72669 9.53696 9.03696L11.9343 11.4343C12.2467 11.7467 12.2467 12.2533 11.9343 12.5657Z" fill="currentColor"/>
											</svg>
										</span>
										<span class="d-flex flex-column align-items-start">
											<span class="fs-4 fw-bold">Fields</span>
											<span class="fs-7">Field Configuration</span>
										</span>
									</a>
								</li>
							{% endif %}

							{% if contentType.has_meta %}

								<li class="nav-item w-100 me-0 mb-md-2">
									<a class="nav-link w-100 btn btn-flex btn-active-light-info" data-bs-toggle="tab" href="#beaver_vtab_pane_6">
										<span class="svg-icon svg-icon-2">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path opacity="0.3" d="M19.0687 17.9688H11.0687C10.4687 17.9688 10.0687 18.3687 10.0687 18.9688V19.9688C10.0687 20.5687 10.4687 20.9688 11.0687 20.9688H19.0687C19.6687 20.9688 20.0687 20.5687 20.0687 19.9688V18.9688C20.0687 18.3687 19.6687 17.9688 19.0687 17.9688Z" fill="currentColor"/>
												<path d="M4.06875 17.9688C3.86875 17.9688 3.66874 17.8688 3.46874 17.7688C2.96874 17.4688 2.86875 16.8688 3.16875 16.3688L6.76874 10.9688L3.16875 5.56876C2.86875 5.06876 2.96874 4.46873 3.46874 4.16873C3.96874 3.86873 4.56875 3.96878 4.86875 4.46878L8.86875 10.4688C9.06875 10.7688 9.06875 11.2688 8.86875 11.5688L4.86875 17.5688C4.66875 17.7688 4.36875 17.9688 4.06875 17.9688Z" fill="currentColor"/>
											</svg>
										</span>
										<span class="d-flex flex-column align-items-start">
											<span class="fs-4 fw-bold">Meta</span>
											<span class="fs-7">Meta for Collection API</span>
										</span>
									</a>
								</li>

							{% endif %}

						</ul>
					</div>

					<div class="col-9">
						<div class="tab-content" id="myTabContent">

							{% if contentType.page_builder == false %}
								<div id="beaver_vtab_pane_4" class="tab-pane fade" role="tabpanel">
									<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">Content Fields</h3>
											</div>
											<div class="card-toolbar">
												<a class="btn btn-sm fw-bold btn-light-primary me-2" data-bs-toggle="modal" data-bs-target="#field_section_form_modal">
													<i class="fa fa-plus"></i>
													Add Field Section
												</a>
												<button class="btn btn-sm btn-dark" type="button" disabled="true" id="schema-save-btn">
													<i class="las la-save"></i> Save
  												</button>
											</div>
										</div>
										<input type="hidden" name="id" value="{{ contentType._id }}">
										<div class="card-body border-top p-9">
											<div class="form-field-holder"></div>
										</div>
									</div>
								</div>
							{% endif %}

							<div class="tab-pane fade show active" id="beaver_vtab_pane_5" role="tabpanel">
								<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">Content Type</h3>
										</div>
									</div>
									<div id="beaver_account_settings_profile_details">
										<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">Brand</label>
												<div class="col-lg-8 pt-2">
													{% for brand in contentType.brand %}
														<span class="badge badge-dark">{{ brand.name.en }}</span>
													{% endfor %}
												</div>
											</div>
											<div class="row mb-6">
												<label class="col-lg-4 col-form-label required fw-semibold fs-6">Title</label>
												<div class="col-lg-8 pt-2">{{ contentType.title }}</div>
											</div>
											<div class="row mb-6">
												<label class="col-lg-4 col-form-label required fw-semibold fs-6">URL</label>
												<div class="col-lg-8 pt-2">{{ contentType.slug }}</div>
											</div>
											<div class="row mb-6">
												<label class="col-lg-4 col-form-label required fw-semibold fs-6">Type</label>
												<div class="col-lg-8 pt-2">{{ 'Single' if contentType.single_type == true else 'Collection' }}</div>
											</div>
											<div class="row mb-6">
												<label class="col-lg-4 col-form-label required fw-semibold fs-6">Editor Type</label>
												<div class="col-lg-8 pt-2">{{ 'Page Builder' if contentType.page_builder == true else 'Default' }}</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 pt-2">{{ contentType.position }}</div>
											</div>
											<div class="row mb-6">
												<label class="col-lg-4 col-form-label required fw-semibold fs-6">Admin Icon (SVG Code)</label>
												<div class="col-lg-8 pt-2">
													<span class="svg-icon svg-icon-muted svg-icon-2hx">{{ contentType.admin_icon | safe }}</span>
												</div>
											</div>
											<div class="row mb-6">
												<label class="col-lg-4 col-form-label required fw-semibold fs-6">Attachable type</label>
												<div class="col-lg-8 pt-2">
													{% if contentType.allowed_type %}
														{% for ct in contentType.allowed_type %}
															<span class="badge badge-dark mr-1">{{ ct }}</span>
														{% endfor %}
													{% endif %}
												</div>
											</div>
										</div>
									</div>
								</div>

								{# //- include field-config-form	 #}

								<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">Features</h3>
										</div>
									</div>
									<div id="beaver_account_settings_profile_details">
										<div class="card-body border-top p-9">
											<div class="row mb-6">
												<div class="row mt-3">
													<div class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mt-4">
														<input id="has_slug" class="form-check-input" type="checkbox" value="true" disabled="true" name="has_slug" {{ 'checked' if contentType.has_slug }}>
														<label class="form-check-label" for="has_slug">Has Slug (URL)</label>
													</div>
													<div class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mt-4">
														<input id="active" class="form-check-input" type="checkbox" value="true" disabled="true" name="active" {{ 'checked' if contentType.active }}>
														<label class="form-check-label" for="active">Active</label>
													</div>
													<div class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mt-4">
														<input id="has_banner" class="form-check-input" type="checkbox" value="true" disabled="true" name="nav_on_collection_api" {{ 'checked' if contentType.nav_on_collection_api }}>
														<label class="form-check-label" for="nav_on_collection_api">Navigation On Collection API</label>
													</div>
													<div class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mt-4">
														<input id="has_gallery" class="form-check-input" type="checkbox" value="true" disabled="true" name="nav_on_single_api" {{ 'checked' if contentType.nav_on_single_api }}>
														<label class="form-check-label" for="nav_on_single_api">Navigation on Detail API</label>
													</div>
													<div class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mt-4">
														<input id="has_form" class="form-check-input" type="checkbox" value="true" disabled="true" name="has_form" {{ 'checked' if contentType.has_form }}>
														<label class="form-check-label" for="has_form">Has Form</label>
													</div>
													<div class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mt-4">
														<input type="checkbox" value="true" disabled="true" name="has_api_endpoint" id="has_api_endpoint" {{ 'checked' if contentType.has_api_endpoint }} class="form-check-input">
														<label class="form-check-label" for="has_api_endpoint">Has API Endpoint</label>
													</div>
													<div class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mt-4">
														<input type="checkbox" value="true" disabled="true" name="has_meta" id="hide_meta" {{ 'checked' if contentType.has_meta }} class="form-check-input">
														<label class="form-check-label" for="hide_meta">Has Meta</label>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							{% if contentType.has_meta %}
								<div id="beaver_vtab_pane_6" class="tab-pane fade" role="tabpanel">
									<form id="content_type_meta_form" class="form es-form" action="/admin/config/content-type/save-meta" data-disable-reset="true" method="post" autocomplete="off">
										<input type="hidden" name="_id" value={{ contentType._id }}>
										<div class="badge badge-danger fv-plugins-message-container invalid-feedback" id="field-error-_id"></div>
										<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">Meta Fields</h3>
												</div>
												<div class="card-toolbar">
													<button class="btn btn-dark btn-sm form-submit-btn" id="beaver_account_profile_details_submit" type="submit">
														<span class="preloader d-none">Saving...</span>
														<span class="label">Save</span>
													</button>
												</div>
											</div>
											<div id="beaver_account_settings_profile_details">
												<div class="card-body border-top p-9">

													<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
														{% for brandLanguage in authUser.brand.languages %}
															<li class="nav-item">
																<a class="nav-link {{'active' if loop.index == 1 }}" data-bs-toggle="tab" href="#meta_tab_{{ brandLanguage.prefix }}">{{ brandLanguage.name }}</a>
															</li>
														{% endfor %}
													</ul>

													<div class="tab-content" id="meta-lang-tabs">
														{% for brandLanguage in authUser.brand.languages %}
															<div class="tab-pane fade {{'show active' if loop.index == 1 }}" id="meta_tab_{{ brandLanguage.prefix }}" role="tabpanel">
																{% for meta_section in metaFields %}
																	<h3 class="badge badge-light-success">{{ meta_section.name }}</h3>
																	{% for meta_field in meta_section.fields %}
																		<div class="row mb-6">
																			<label class="col-lg-4 col-form-label fw-semibold fs-6">{{ meta_field.label }}</label>
																			<div class="col-lg-8 pt-2">
																				{% if contentType
																					.meta and contentType
																					.meta[brandLanguage.prefix][meta_section.slug] and contentType
																					.meta[brandLanguage.prefix][meta_section.slug][meta_field.name] %}
																					{% set fieldValue = contentType.meta[brandLanguage.prefix][meta_section.slug][meta_field.name] %}
																				{% else %}
																					{% set fieldValue = '' %}
																				{% endif %}
																				{% if meta_field.type == 'textarea' %}
																					<textarea class="form-control" name="meta[{{brandLanguage.prefix}}][{{ meta_section.slug }}][{{ meta_field.name }}]" placeholder="{{ meta_field.label }}">{{ fieldValue }}</textarea>
																				{% else %}
																					<input type="text" class="form-control" placeholder="{{ meta_field.label }}" name="meta[{{brandLanguage.prefix}}][{{ meta_section.slug }}][{{ meta_field.name }}]" value="{{ fieldValue }}">
																				{% endif %}
																			</div>
																		</div>
																	{% endfor %}
																{% endfor %}
															</div>
														{% endfor %}
													</div>

												</div>
											</div>
										</div>
									</form>
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock %}

{% block widgets %}
	<div class="modal fade" id="field_section_form_modal" tabindex="-1">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<form id="field-section-form">
					<div class="modal-header">
						<h3 class="modal-title">Add Field Section</h3>
						{# //- <!-- begin::Close--> #}
						<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close"></div>
						<span class="svg-icon svg-icon-1"></span>
						{# //- <!-- end::Close--> #}
					</div>
					<div class="modal-body">
						<input class="form-control" type="text" name="section_name" id="section_name" placeholder="Field Section Name"/>
						<div class="d-flex align-items-centre">
							<div class="form-check form-check-custom form-check-solid form-check-solid mt-5 mr-1">
								<input class="form-check-input" id="section_inline_fields" type="checkbox" name="inline"/>
								<label class="form-check-label" for="">Inline Fields</label>
							</div>
							<div class="form-check form-check-custom form-check-solid mt-5 mr-1">
								<input class="form-check-input" id="section_localisation" type="checkbox" name="localisation"/>
								<label class="form-check-label" for="flexCheckChecked">Localisation</label>
							</div>
							<div class="form-check form-check-custom form-check-solid mt-5">
								<input class="form-check-input" id="section_repeater" type="checkbox" name="repeater_group"/>
								<label class="form-check-label" for="flexCheckChecked">Repeater</label>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-light" type="reset" data-bs-dismiss="modal">Close</button>
						<button class="btn btn-primary" type="submit">Add Section</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="modal fade" id="field_form_modal" tabindex="-1">
		<div class="modal-dialog modal-dialog-centered modal-lg">
			<div class="modal-content position-absolute">
				<div class="modal-header">
					<h3 class="modal-title">Add Field</h3>
					<!-- begin::Close-->
					<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close"></div>
					<span class="svg-icon svg-icon-1"></span>
					<!-- end::Close-->
				</div>
				<div class="modal-body">

					<div class="modal-field-sections" id="field-list-section">
						<div class="row">
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="text">
										<i class="fas fa-font"></i>
										<span class="field-label-text">Text</span>
										<span class="field-label-description">The field type for adding single-line plain text.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="email">
										<i class="fas fa-at"></i>
										<span class="field-label-text">Email</span>
										<span class="field-label-description">The field type for entering a valid email address.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="number">
										<i class="fas fa-sort-numeric-down"></i>
										<span class="field-label-text">Number</span>
										<span class="field-label-description">The field type for entering numeric values only.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="date">
										<i class="fas fa-calendar-alt"></i>
										<span class="field-label-text">Date</span>
										<span class="field-label-description">The field type for selecting a date from a calendar.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="time">
										<i class="fas fa-clock"></i>
										<span class="field-label-text">Time</span>
										<span class="field-label-description">The field type for adding time.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="color">
										<i class="fas fa-eye-dropper"></i>
										<span class="field-label-text">Color</span>
										<span class="field-label-description">The field type for adding color.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="url">
										<i class="fas fa-link"></i>
										<span class="field-label-text">URL</span>
										<span class="field-label-description">The field type for adding URLs.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="textarea">
										<i class="fas fa-text-width"></i>
										<span class="field-label-text">Textarea</span>
										<span class="field-label-description">The field type for adding multi-line text content.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="article_editor">
										<i class="fas fa-code"></i>
										<span class="field-label-text">Article Editor</span>
										<span class="field-label-description">The field type for creating and editing article content using code.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="richtext">
										<i class="far fa-newspaper"></i>
										<span class="field-label-text">Rich Text</span>
										<span class="field-label-description">The field type for adding formatted and styled text content.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="dropdown">
										<i class="fas fa-chevron-circle-down"></i>
										<span class="field-label-text">Dropdown</span>
										<span class="field-label-description">The field type for selecting an option from a predefined list.</span>
									</a>
								</div>
							</div>
							<div class="col-12 col-md-4">
								<div class="each-field-type">
									<a class="btn" href="#" data-value="media">
										<i class="fas fa-photo-video"></i>
										<span class="field-label-text">Media</span>
										<span class="field-label-description">The field type for uploading and managing media files like images or videos.</span>
									</a>
								</div>
							</div>
						</div>

					</div>

					<div class="modal-field-sections d-none" id="text-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="text"/>
							<div class="row">
								<div class="col-12">
									<label for="field_name">Field Name</label>
									<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
								</div>
							</div>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<label class="mt-3" for="validation_min">Advanced Valdiation Rules</label>
							<div class="row my-3">
								<div class="col-6">
									<input class="form-control" type="text" name="validation_min" id="validation_min" placeholder="Minimum Charecters"/></div>
								<div class="col-6">
									<input class="form-control" type="text" name="validation_max" id="validation_max" placeholder="Maximum Charecters"/></div>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="email-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<label for="field_name">Field Name</label>
							<input type="hidden" name="field_type" value="email"/>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<label class="mt-3" for="validation_min">Advanced Valdiation Rules</label>
							<div class="row my-3">
								<div class="col-6">
									<input class="form-control" type="text" name="validation_min" id="validation_min" placeholder="Minimum Charecters"/></div>
								<div class="col-6">
									<input class="form-control" type="text" name="validation_max" id="validation_max" placeholder="Maximum Charecters"/></div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="number-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<label for="field_name">Field Name</label>
							<input type="hidden" name="field_type" value="number"/>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="date-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<label for="field_name">Field Name</label>
							<input type="hidden" name="field_type" value="date"/>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							{# <div class="row mb-3">
								<div class="col-12 col-sm-6">
									<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
										<input class="form-check-input" type="checkbox" value="date_range" name="options[]"/>
										<label class="form-check-label" for="">Date Range</label>
									</div>
								</div>
								<div class="col-12 col-sm-6">
									<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
										<input class="form-check-input" type="checkbox" value="time" name="options[]"/>
										<label class="form-check-label" for="">With Time</label>
									</div>
								</div>
							</div> #}
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							{# <label class="mt-3" for="validation_min">Advanced Valdiation Rules</label>
							<div class="row my-3">
								<div class="col-6">
									<input class="form-control" type="text" name="validation_min" id="validation_min" placeholder="Minimum Charecters"/></div>
								<div class="col-6">
									<input class="form-control" type="text" name="validation_max" id="validation_max" placeholder="Maximum Charecters"/></div>
							</div> #}
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="time-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="time"/>
							<div class="row">
								<div class="col-12">
									<label for="field_name">Field Name</label>
									<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
								</div>
							</div>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="color-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="color"/>
							<div class="row">
								<div class="col-12">
									<label for="field_name">Field Name</label>
									<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
								</div>
							</div>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="url-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="url"/>
							<div class="row">
								<div class="col-12">
									<label for="field_name">Field Name</label>
									<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
								</div>
							</div>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="textarea-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="textarea"/>
							<label for="field_name">Field Name</label>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<label class="mt-3" for="">Advanced Valdiation Rules</label>
							<div class="row my-3">
								<div class="col-6">
									<input class="form-control" type="text" name="validation_min" id="validation_min" placeholder="Minimum Charecters"/></div>
								<div class="col-6">
									<input class="form-control" type="text" name="validation_max" id="validation_max" placeholder="Maximum Charecters"/></div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="article_editor-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="article_editor"/>
							<label for="field_name">Field Name</label>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							{# <label class="mt-3" for="validation_min">Advanced Valdiation Rules</label>
							<div class="row my-3">
								<div class="col-6">
									<input class="form-control" type="text" name="validation_min" id="validation_min" placeholder="Minimum Charecters"/></div>
								<div class="col-6">
									<input class="form-control" type="text" name="validation_max" id="validation_max" placeholder="Maximum Charecters"/></div>
							</div> #}
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="richtext-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="richtext"/>
							<label for="field_name">Field Name</label>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<label class="mt-3" for="validation_min">Advanced Valdiation Rules</label>
							<div class="row my-3">
								<div class="col-6">
									<input class="form-control" type="text" name="validation_min" id="validation_min" placeholder="Minimum Charecters"/></div>
								<div class="col-6">
									<input class="form-control" type="text" name="validation_max" id="validation_max" placeholder="Maximum Charecters"/></div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="media-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="media"/>
							<label for="field_name">Field Name</label>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

					<div class="modal-field-sections d-none" id="dropdown-field-section">
						<form class="field-form">
							<input class="field_entry_type" type="hidden" value="edit" name="field_entry_type"/>
							<label for="field_name">Field Name</label>
							<input class="section_name_field" type="hidden" name="section_name_field"/>
							<input class="section_id_field" type="hidden" name="section_id_field"/>
							<input type="hidden" name="field_type" value="dropdown"/>
							<input class="form-control" type="text" name="field_name" id="field_name" placeholder="Field Name"/>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="multi_select" value="true" name="multi_select"/>
								<label class="form-check-label" for="">Multi-Select</label>
							</div>
							<label class="mt-3" for="field_pre_defined_values">Field Pre-Defined Values</label>
							<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6" id="cms-editor-tab-nav">
								{% for brandLanguage in authUser.brand.languages %}
									<li class="nav-item">
										<a class="nav-link {{'active' if loop.index == 1 }}" data-bs-toggle="tab" href="#beaver_tab_pane_{{ brandLanguage.prefix }}">
											{{ brandLanguage.name }}
											<span class="fa-solid fa-circle-exclamation d-none tab-invalid-icon"></span>
										</a>
									</li>
								{% endfor %}
							</ul>
							<div class="tab-content tab-content-fields mb-5" id="myTabContent">
								{% for brandLanguage in authUser.brand.languages %}
									<div class="tab-pane fade {{ 'active show' if loop.index == 1 }}" role="tabpanel" id="beaver_tab_pane_{{ brandLanguage.prefix }}">
										<textarea class="form-control mt-2 drop_down_field_options" name="field_options[{{ brandLanguage.prefix }}]" id="field_options_{{ brandLanguage.prefix }}" placeholder="Example : Male:m, Female:f,"></textarea>
									</div>
								{% endfor %}
							</div>
							<div class="row">
								<div class="col-12">
									<label for="field_info">Field Info</label>
									<input class="form-control" type="text" name="field_info" id="field_info" placeholder="Field Info"/>
								</div>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="validation_required" value="true" name="validation_required"/>
								<label class="form-check-label" for="">Required</label>
							</div>
							<div class="form-check form-check-custom form-check-success form-check-solid mt-1">
								<input class="form-check-input" type="checkbox" id="show_on_list" value="true" name="show_on_list"/>
								<label class="form-check-label" for="">Show on CMS Content List</label>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<a class="btn btn-light back-btn">Back</a>
									<button class="btn btn-primary" type="submit">Save Field</button>
								</div>
							</div>
						</form>
					</div>

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

{% endblock %}