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

{% block csslib %}
	{# <link href='/cms-static/admin/assets/css/style.bundle.css' rel='stylesheet' type='text/css'/> #}
{% endblock %}

{% block jslib %}
	{# //- // Form Submission Script #}
	<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 Menu - {{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">Edit Menu</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}}">Home</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span></li>
						<li class="breadcrumb-item text-muted">CMS</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span></li>
						<li class="breadcrumb-item text-muted">Menu</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">
				<form class="form es-form" id="beaver_modal_create_app_form" action="/admin/cms/menu/{{navPosition}}/edit" data-redirect-url="/admin/cms/menu" method="post">
					<input type="hidden" name="index" value="{{ menuItem.index }}">
					<input type="hidden" name="level" value="{{ menuItem.level }}">
					{% if menuItem.level == '1' %}
						<input type="hidden" name="parent_index" value="{{ menuItem.parent_index }}">
					{% elif menuItem.level == '2' %}
						<input type="hidden" name="parent_index" value="{{ menuItem.parent_index }}">
						<input type="hidden" name="sec_parent_index" value="{{ menuItem.sec_parent_index }}">
					{% endif %}
					<div class="card card-flush py-4">
						<div class="card-header">
							<div class="card-title">
								<h2 class="fw-bold">Edit Menu Item</h2>
							</div>
							<div class="card-toolbar">
								<button class="btn btn-sm btn-success form-submit-btn" id="save-btn" type="submit">
									<span class="label">Save</span>
									<span class="preloader d-none">Saving...</span></button>
							</div>
						</div>
						<div class="card-body pt-0">
							<div class="col-md-6">
								<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
									<span class="required">Menu Position</span>
									<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="path" data-beaver-initialized="1"></i>
								</label>
								<select id="beaver_ecommerce_add_product_status_select" class="form-select mb-2" data-control="select2" disabled name="menu_position" data-hide-search="true" data-placeholder="Select an option">
									{% for nav in menulist %}
										<option value="{{ nav.nav_position }}" {% if nav.nav_position == navPosition %}selected{% endif %}>{{ nav.nav_label }}</option>
									{% endfor %}
								</select>
								<div class="fv-plugins-message-container invalid-feedback" id="field-error-menu_position"></div>
							</div>
							<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="#beaver_tab_pane_{{brandLanguage.prefix}}">{{brandLanguage.name}}</a>
									</li>
								{% endfor %}
							</ul>
							<div class="tab-content tab-content-fields" 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}}">
										<div class="d-flex flex-column fv-row fv-plugins-icon-container col-md-6">
											<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
												<span class="required">Menu name ({{ brandLanguage.prefix }})</span>
												<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="label" data-beaver-initialized="1"></i>
											</label>
											<input type="text" class="form-control mb-2" name="label[{{ brandLanguage.prefix }}]" placeholder="Menu label" value="{{ menuItem.label[brandLanguage.prefix] }}">
											<div id="field-error-label_{{ brandLanguage.prefix }}" class="fv-plugins-message-container invalid-feedback"></div>
										</div>
										<div class="col-md-6">
											<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
												<span class="required">Path ({{ brandLanguage.prefix }})</span>
												<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="path" data-beaver-initialized="1"></i>
											</label>
											<input type="text" class="form-control mb-2" name="path[{{ brandLanguage.prefix }}]" placeholder="Menu path url" value="{{ menuItem.url[brandLanguage.prefix] }}">
											<div id="field-error-path_{{ brandLanguage.prefix }}" class="fv-plugins-message-container invalid-feedback"></div>
										</div>
									</div>
								{% endfor %}
							</div>
							<div class="col-md-6">
								<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
									<span>Active</span>
									<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="path" data-beaver-initialized="1"></i>
								</label>
								<div class="form-check form-check-custom form-check-solid">
									<input id="flexCheckChecked" class="form-check-input" type="checkbox" name="active" value="true" {{ "checked" if menuItem.active}}>
									<label class="form-check-label" for="flexCheckChecked">Active</label>
								</div>
							</div>
							<div class="col-md-6">
								<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
									<span>Link Type</span>
									<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="path" data-beaver-initialized="1"></i>
								</label>
								<div class="form-check form-check-custom form-check-solid">
									<input id="flexCheckChecked" class="form-check-input" type="checkbox" name="external" value="true" {{ "checked" if menuItem.external==true}}>
									<label class="form-check-label" for="flexCheckChecked">External</label>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

{% endblock %}