{% load static %}
{% load has_youtube %}
{% load valid_extension %}

<!--begin::Modal - Upload Media -->
<div class="modal fade modal-animate" id="kt_modal_upload_media" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
	<!--begin::Modal dialog-->
	<div class="modal-dialog modal-dialog-centered mw-900px">
		<!--begin::Modal content-->
		<div class="modal-content scroll-y m-5">
			<!--begin::Modal header-->
			<div class="modal-header pb-0 border-0 justify-content-end">
				<!--begin::Close-->
				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal" aria-label="Close">
					<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
					<span class="svg-icon svg-icon-3x">
						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
							<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
				</div>
				<!--end::Close-->
			</div>
			<!--begin::Modal header-->
			<!--begin::Modal body-->
			<div class="modal-body scroll-y mx-5 mx-xl-10 pt-1 pb-8">
				<!--begin::Heading-->
				<div class="text-center mb-8 unselectable">
					<!--begin::Title-->
					<h1 class="mb-3"> Upload your content to get started! </h1>
					<!--end::Title-->
				</div>
				<!--end::Heading-->
				<!--begin::Stepper-->
				<div class="stepper stepper-links d-flex flex-column" id="kt_upload_media_stepper">
					<!--begin::Nav-->
					<div class="stepper-nav py-5 unselectable">
						<!--begin::Step 1 :: Upload type -->
						<div id="upload_type" class="stepper-item current" data-kt-stepper-element="nav">
							<h3 class="stepper-title"> Content format  </h3>
						</div>
						<!--end::Step 1-->
						<!--begin::Step 2 :: Upload Info -->
						<div class="stepper-item" data-kt-stepper-element="nav">
							<h3 class="stepper-title"> Audio selection </h3>
						</div>
						<!--end::Step 2-->
						<!--begin::Step 3 :: Confirm Info -->
						<div class="stepper-item" data-kt-stepper-element="nav">
							<h3 class="stepper-title"> Listen and Review </h3>
						</div>
						<!--end::Step 3-->
						<!--begin::Step 4 :: Finished -->
						<div class="stepper-item" data-kt-stepper-element="nav">
							<h3 class="stepper-title"> Go live </h3>
						</div>
						<!--end::Step 4-->
					</div>
					<!--end::Nav-->
					<!--begin::Form-->
					<form class="mx-auto mw-600px w-100 py-10" novalidate="novalidate" id="kt_upload_media_form" data-kt-redirect-url="{% url 'process:sound' %}">
						<!--begin::Step 1-->
						<div id="upload_type" class="current" data-kt-stepper-element="content">
							{% csrf_token %}
							<!--begin::Wrapper-->
							<div class="w-100">
								<!--begin::Heading-->
								<div class="pb-10 pb-lg-15 text-center ">
									<!--begin::Title-->
									<h2 class="fw-bolder text-dark unselectable">
										Choose your Uploading type
										<i class="fad fa-exclamation-circle ms-2 fs-5 selectable" data-bs-toggle="tooltip" title="Upload type is issued based on your selected account."></i>
									</h2>
									<!--end::Title-->
									<!--begin::Notice-->
									<div class="text-muted fw-bold fs-6 unselectable">
										For more information, Check our 
										<a href="{% url 'landing:help' %}" class="link-primary fw-bolder selectable"> Help </a>
										page
									</div>
									<!--end::Notice-->
								</div>
								<!--end::Heading-->
								<!--begin::Input group-->
								<div class="fv-row">
									<!--begin::Row-->
									<div class="row">
										<!--begin::Col-->
										<div class="col-lg-6">
											<!--begin::Option-->
											<input type="radio" class="btn-check" name="upload_type" value="normal" id="kt_upload_media_type_normal" />
											<label class="btn btn-outline btn-outline-dashed btn-outline-default p-7 d-flex align-items-center mb-10" for="kt_upload_media_type_normal">
												<!--begin::Svg Icon | path: assets/media/icons/duotune/general/gen002.svg-->
												<span class="svg-icon svg-icon-3hx me-5">
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
														<path opacity="0.3" d="M4.05424 15.1982C8.34524 7.76818 13.5782 3.26318 20.9282 2.01418C21.0729 1.98837 21.2216 1.99789 21.3618 2.04193C21.502 2.08597 21.6294 2.16323 21.7333 2.26712C21.8372 2.37101 21.9144 2.49846 21.9585 2.63863C22.0025 2.7788 22.012 2.92754 21.9862 3.07218C20.7372 10.4222 16.2322 15.6552 8.80224 19.9462L4.05424 15.1982ZM3.81924 17.3372L2.63324 20.4482C2.58427 20.5765 2.5735 20.7163 2.6022 20.8507C2.63091 20.9851 2.69788 21.1082 2.79503 21.2054C2.89218 21.3025 3.01536 21.3695 3.14972 21.3982C3.28408 21.4269 3.42387 21.4161 3.55224 21.3672L6.66524 20.1802L3.81924 17.3372ZM16.5002 5.99818C16.2036 5.99818 15.9136 6.08615 15.6669 6.25097C15.4202 6.41579 15.228 6.65006 15.1144 6.92415C15.0009 7.19824 14.9712 7.49984 15.0291 7.79081C15.0869 8.08178 15.2298 8.34906 15.4396 8.55884C15.6494 8.76862 15.9166 8.91148 16.2076 8.96935C16.4986 9.02723 16.8002 8.99753 17.0743 8.884C17.3484 8.77046 17.5826 8.5782 17.7474 8.33153C17.9123 8.08486 18.0002 7.79485 18.0002 7.49818C18.0002 7.10035 17.8422 6.71882 17.5609 6.43752C17.2796 6.15621 16.8981 5.99818 16.5002 5.99818Z" fill="currentColor"/>
														<path d="M4.05423 15.1982L2.24723 13.3912C2.15505 13.299 2.08547 13.1867 2.04395 13.0632C2.00243 12.9396 1.9901 12.8081 2.00793 12.679C2.02575 12.5498 2.07325 12.4266 2.14669 12.3189C2.22013 12.2112 2.31752 12.1219 2.43123 12.0582L9.15323 8.28918C7.17353 10.3717 5.4607 12.6926 4.05423 15.1982ZM8.80023 19.9442L10.6072 21.7512C10.6994 21.8434 10.8117 21.9129 10.9352 21.9545C11.0588 21.996 11.1903 22.0083 11.3195 21.9905C11.4486 21.9727 11.5718 21.9252 11.6795 21.8517C11.7872 21.7783 11.8765 21.6809 11.9402 21.5672L15.7092 14.8442C13.6269 16.8245 11.3061 18.5377 8.80023 19.9442ZM7.04023 18.1832L12.5832 12.6402C12.7381 12.4759 12.8228 12.2577 12.8195 12.032C12.8161 11.8063 12.725 11.5907 12.5653 11.4311C12.4057 11.2714 12.1901 11.1803 11.9644 11.1769C11.7387 11.1736 11.5205 11.2583 11.3562 11.4132L5.81323 16.9562L7.04023 18.1832Z" fill="currentColor"/>
													</svg>
												</span>
												<!--end::Svg Icon-->
												<!--begin::Info-->
												<span class="d-block fw-bold text-start text-center">
													<span class="text-dark fw-bolder d-block fs-4 mb-2">Upload a local file</span>
													<span class="text-muted fw-bold fs-7"> browse files from your PC. </span>
												</span>
												<!--end::Info-->
											</label>
											<!--end::Option-->
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										<div class="col-lg-6">
											{% if user.email|has_youtube or user.is_superuser %}
											<!--begin::Option-->
											<input type="radio" class="btn-check" name="upload_type" value="youtube" id="kt_upload_media_type_youtube" />
											<label class="btn btn-outline btn-outline-dashed btn-outline-default p-7 d-flex align-items-center" for="kt_upload_media_type_youtube">
												<!--begin::Svg Icon | path: assets/media/icons/duotune/social/soc007.svg-->
												<span class="svg-icon svg-icon-3hx me-5 ">
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
														<path d="M21 6.30005C20.5 5.30005 19.9 5.19998 18.7 5.09998C17.5 4.99998 14.5 5 11.9 5C9.29999 5 6.29998 4.99998 5.09998 5.09998C3.89998 5.19998 3.29999 5.30005 2.79999 6.30005C2.19999 7.30005 2 8.90002 2 11.9C2 14.8 2.29999 16.5 2.79999 17.5C3.29999 18.5 3.89998 18.6001 5.09998 18.7001C6.29998 18.8001 9.29999 18.8 11.9 18.8C14.5 18.8 17.5 18.8001 18.7 18.7001C19.9 18.6001 20.5 18.4 21 17.5C21.6 16.5 21.8 14.9 21.8 11.9C21.8 9.00002 21.5 7.30005 21 6.30005ZM9.89999 15.7001V8.20007L14.5 11C15.3 11.5 15.3 12.5 14.5 13L9.89999 15.7001Z" fill="currentColor"/>
													</svg>
												</span>
												<!--end::Svg Icon-->
												<!--begin::Info-->
												<span class="d-block fw-bold text-start text-center">
													<span class="text-dark fw-bolder d-block fs-4 mb-2"> Import from YouTube </span>
													<span class="text-muted fs-7"> Using a YouTube URL. </span>
												</span>
												<!--end::Info-->
											</label>
											<!--end::Option-->
											{% else %}
											<!--begin::Option-->
											<label class="btn btn-outline btn-outline-dashed btn-outline-default p-7 d-flex align-items-center" >
												<!--begin::Svg Icon | path: assets/media/icons/duotune/social/soc007.svg-->
												<span class="svg-icon svg-icon-3hx me-5 ">
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
														<path d="M21 6.30005C20.5 5.30005 19.9 5.19998 18.7 5.09998C17.5 4.99998 14.5 5 11.9 5C9.29999 5 6.29998 4.99998 5.09998 5.09998C3.89998 5.19998 3.29999 5.30005 2.79999 6.30005C2.19999 7.30005 2 8.90002 2 11.9C2 14.8 2.29999 16.5 2.79999 17.5C3.29999 18.5 3.89998 18.6001 5.09998 18.7001C6.29998 18.8001 9.29999 18.8 11.9 18.8C14.5 18.8 17.5 18.8001 18.7 18.7001C19.9 18.6001 20.5 18.4 21 17.5C21.6 16.5 21.8 14.9 21.8 11.9C21.8 9.00002 21.5 7.30005 21 6.30005ZM9.89999 15.7001V8.20007L14.5 11C15.3 11.5 15.3 12.5 14.5 13L9.89999 15.7001Z" fill="currentColor"/>
													</svg>
												</span>
												<!--end::Svg Icon-->
												<!--begin::Info-->
												<span class="d-block fw-bold text-start text-center">
													<span class="text-dark fw-bolder d-block fs-5 mb-2"> To Import from YouTube </span>
													<a href="{% url 'landing:subscribe' %}" class="link-primary fw-bold fs-7 selectable" > Upgrade Your Subscriptions. </a>
												</span>
												<!--end::Info-->
											</label>
											<!--end::Option-->
											{% endif %}
										</div>
										<!--end::Col-->
									</div>
									<!--end::Row-->
								</div>
								<!--end::Input group-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 1-->
						<!--begin::Step 2-->
						<div id="upload_info" data-kt-stepper-element="content">
							<!--begin::Wrapper-->
							<div class="w-100">
								<!--begin::Heading-->
								<div class="pb-5 pb-lg-10 text-center">
									<!--begin::Title-->
									<h2 class="fw-bolder text-dark unselectable"> Edit audio </h2>
									<!--end::Title-->
									<!--begin::Notice-->
									<div class="text-muted fw-bold fs-6 unselectable">
										Now it’s time to edit your audio. You can choose whether you want to remove the audio from the video completely or only certain sections.
									</div>
									<!--end::Notice-->
								</div>
								<!--end::Heading-->
								<!--begin::Input group : Upload File/URL -->
								<div class="mb-10 fv-row text-center" id="form_upload_info"> </div>
								<!--end::Input group : Upload File/URL -->
								<!-- begin:: Media Loader/Player -->
								<div class="mb-10 fv-row d-none" id="media_video_place">
									<video class="d-none" id="media_video" width=600 preload="metadata" controls></video>
									<div class="d-none" id="videoObject"></div>
								</div>
								<!-- end:: Media Loader/Player -->
								<!--begin::Action Part-List-->
								<div class="mb-10 fv-row d-none" id="part_time_list">
									<div class="separator d-flex flex-center mb-2" >
										<div class="text-uppercase bg-body fs-7 fw-semibold text-muted px-3" > Adding parts </div>
									</div>
									<!-- Div For Adding A part time value to list  -->
									<div class="d-flex flex-stack py-2 border-bottom border-gray-300 border-bottom-dashed align-items-center justify-content-center">
										<div class="d-flex flex-column align-items-center justify-content-center" id="add_part" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="right" data-bs-dismiss="click" title="Click here to add a duration.">
											<i class="fad fa-plus-circle text-success fs-3x"></i>
										</div>
									</div>
									<!-- Div For Adding A part time value to list  -->
									<!--begin::Input group::Part-Time-->
									<div class=" mh-250px scroll-y mb-10 fv-row" id="part_list">
										<!-- Add List Of Parts-time With JavaScript -->
									</div>
									<!--end::Input group::Part-Time-->
								</div>
								<!--end::Action Part-List-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 2-->
						<!--begin::Step 3-->
						<div id="upload_confirmation" data-kt-stepper-element="content">
							<!--begin::Wrapper-->
							<div class="w-100">
								<!--begin::Heading-->
								<div class="pb-5 pb-lg-10 text-center">
									<!--begin::Title-->
									<h2 class="fw-bolder text-dark unselectable"> Give your audio a listen to see if you are happy! </h2>
									<!--end::Title-->
									<!--begin::Notice-->
									<!-- Edit URL To Final Url "Help"-->
									<div class="text-muted fw-bold fs-6 unselectable">
										for more information, please visit our
										<a href="{% url 'landing:index' %}" class="link-primary fw-bolder selectable"> Help </a>
										page.
									</div>
									<!--end::Notice-->
								</div>
								<!--end::Heading-->
								<!--begin::Input group-->
								<div class="mb-10 fv-row text-center" id="form_conform_info">

								</div>
								<!--end::Input group-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 3-->
						<!--begin::Step 4-->
						<div id="upload_complated" data-kt-stepper-element="content">
							<!--begin::Wrapper-->
							<div class="w-100">
								<!--begin::Heading-->
								<div class="pb-5 pb-lg-10 text-center">
									<!--begin::Title-->
									<h2 class="fw-bolder text-dark"> Your video is ready to be heard by your audience! </h2>
									<!--end::Title-->
									<!--begin::Notice-->
									<!-- Edit URL To Final Url "Help"-->
									<div class="text-muted fw-bold fs-6 unselectable">
										for more information, please visit our
										<a href="{% url 'landing:index' %}" class="link-primary fw-bolder selectable"> Help </a>
										page.
									</div>
									<!--end::Notice-->
								</div>
								<!--end::Heading-->
								<!--begin::Body-->
								<div  class="mb-0">
									<!--begin::Text-->
									<!-- div class="fs-6 text-gray-600 mb-5">
										Removing an instrument is as much an art as it is a science and probably deserves to be used by you,
										but for all the tips, it's about knowing what works for your incredible audience.
									</div-->
									<!--end::Text-->
									<!--begin::Alert-->
									
									<!--end::Alert-->
								</div>
								<!--end::Body-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 4-->
						<!--begin::Actions-->
						<div class="d-flex flex-stack pt-5">
							<!--begin::Wrapper-->
							<div class="mr-2">
								<button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
									<!--begin::Svg Icon | path: icons/duotune/arrows/arr063.svg-->
									<span class="svg-icon svg-icon-4 me-1">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
											<rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1" fill="currentColor" />
											<path d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z" fill="currentColor" />
										</svg>
									</span>
									<!--end::Svg Icon-->
									Back
								</button>
								<button type="button" class="btn btn-lg btn-primary me-3 d-none" data-kt-stepper-action="close">
									<!--begin::Svg Icon | path: icons/duotune/arrows/arr063.svg-->
									
									<!--end::Svg Icon-->
									close
								</button>
							</div>
							<!--end::Wrapper-->
							<!--begin::Wrapper-->
							<div>
								<button type="button" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit">
									<span class="indicator-label">
										Submit
										<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
										<span class="svg-icon svg-icon-3 ms-2 me-0">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
												<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor" />
												<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor" />
											</svg>
										</span>
										<!--end::Svg Icon-->
									</span>
									<span class="indicator-progress">Please wait...
									<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
								</button>
								<button type="button" class="btn btn-lg btn-primary d-none" data-kt-stepper-action="next">
									Continue
									<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
									<span class="svg-icon svg-icon-4 ms-1 me-0">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
											<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor" />
											<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor" />
										</svg>
									</span>
									<!--end::Svg Icon-->
								</button>
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Actions-->
					</form>
					<!--end::Form-->
				</div>
				<!--end::Stepper-->
			</div>
		</div>
		<!--end::Modal content-->
	</div>
	<!--end::Modal dialog-->
</div>
<!--end::Modal - Upload Media -->

<!--begin::Modal - Watch Video -->
<div class="modal fade modal-animate" id="streamModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="streamModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body show_stream">
				<div class="btn btn-sm btn-icon btn-icon-white btn-active-color-danger close_stream" data-bs-dismiss="modal" aria-label="Close">
					<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
					<span class="svg-icon svg-icon-3x">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
							<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
							<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
				</div>
                <div class="js-player d-flex fv-row" id="player" style="height: 450px;"> </div>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - Watch Video --> 

<!--begin::Modal - Part List Detail -->
<div class="modal fade modal-animate" id="kt_parts_time_list_media" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="ktModalPartsTimeListMediaLabel" aria-hidden="true">
	<!--begin::Modal dialog-->
	<div class="modal-dialog modal-dialog-centered mw-700px">
		<!--begin::Modal content-->
		<div class="modal-content">
			<!--begin::Modal header-->
			<div class="modal-header pb-0 border-0 justify-content-end">
				<!--begin::Close-->
				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal" aria-label="Close">
					<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
					<span class="svg-icon svg-icon-3x">
						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
							<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
				</div>
				<!--end::Close-->
			</div>
			<!--begin::Modal header-->
			<div class="modal-body scroll-y mx-5 mx-xl-10 pt-1 pb-8">
				<!--begin::Heading-->
				<div class="text-center mb-8 unselectable">
					<!--begin::Title-->
					<h2 class="mb-3"> Selected intervals: </h2>
					<!--end::Title-->
				</div>
				<!--end::Heading-->
				<!--begin::Wrapper-->
				<div class="w-100">
					<!--begin::Action Part-List-->
					<div class="mb-10 fv-row">
						<!--begin::Input group::Part-Time-->
						<div class=" mh-250px scroll-y mb-10 fv-row" id="parts_time_list_view">
							<!-- Add List Of Parts-time With JavaScript -->
						</div>
						<!--end::Input group::Part-Time-->
					</div>
					<!--end::Action Part-List-->
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Modal body-->
		</div>
		<!--end::Modal content-->
	</div>
	<!--end::Modal dialog-->
</div>
<!--end::Modal - Part List Detail -->

<!--begin:: Plan Modal - Upgrade plan-->
<div class="modal fade" id="kt_modal_upgrade_plan" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="ktModalUpgradePlanLabel" aria-hidden="true" data-kt-redirect-url="{% url 'subscriptions:upgrade' %}" data-checker-plan="{% url 'subscriptions:plan_check' %}">
	<!--begin::Modal dialog-->
	<div class="modal-dialog modal-xl">
		<!--begin::Modal content-->
		<div class="modal-content rounded">
			<!--begin::Modal header-->
			<div class="modal-header justify-content-end border-0 pb-0">
				<!--begin::Close-->
				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
					<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
					<span class="svg-icon svg-icon-3x">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
							<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
							<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
				</div>
				<!--end::Close-->
			</div>
			<!--end::Modal header-->
			<!--begin::Modal body-->
			<div class="modal-body pt-0 pb-15 px-5 px-xl-20">
				<!--begin::Heading-->
				<div class="mb-13 text-center">
					<h1 class="mb-3">Upgrade a Plan</h1>
					<!-- <div class="text-muted fw-bold fs-5">
						If you need more info, please check
						<a href="#" class="link-primary fw-bolder">Pricing Guidelines</a>.
					</div> -->
				</div>
				<!--end::Heading-->
				<!--begin::Plans-->
				<div class="d-flex flex-column">
					<!--begin::Nav group-->
					<div class="nav-group nav-group-outline mx-auto" data-kt-buttons="true">
						<a href="javascript:void(0)" class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3 me-2" data-kt-plan="week">Weekly</a>
						<a href="javascript:void(0)" class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3 me-2 active" data-kt-plan="month">Monthly</a>
						<a href="javascript:void(0)" class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3" data-kt-plan="annual">Annual</a>
					</div>
					<!--end::Nav group-->
					<!--begin::Row-->
					<div class="row mt-10">
						<!--begin::Col-->
						<div class="col-lg-6 mb-10 mb-lg-0">
							<!--begin::Tabs-->
							<div class="nav flex-column">
								<input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
								{% for w_plan, m_plan, y_plan in plans %}
								<!--begin::Tab link-->
								{% if user.subscription.plan.plan_name == m_plan.plan_name  %}
								<div class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6 active" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_{{m_plan.plan_name}}">
								{% else %}
								<div class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_{{m_plan.plan_name}}">
								{% endif %}
									<!--end::Description-->
									<div class="d-flex align-items-center me-2">
										<!--begin::Radio-->
										<div class="form-check form-check-custom form-check-solid form-check-warning me-6">
											<input class="form-check-input" type="radio" name="plan" value="{{m_plan.plan_name}}" />
											<input type="hidden" name="week_{{w_plan.plan_name}}" value="{{w_plan.plan_id}}" />
											
											<input type="hidden" name="month_{{m_plan.plan_name}}" value="{{m_plan.plan_id}}" />
											
											<input type="hidden" name="year_{{y_plan.plan_name}}" value="{{y_plan.plan_id}}" />
										</div>
										<!--end::Radio-->
										<!--begin::Info-->
										<div class="flex-grow-1">
											<h2 class="d-flex align-items-center fs-2 fw-bolder flex-wrap">{{m_plan.plan_name}}</h2>
											<div class="fw-bold opacity-50">Best</div>
										</div>
										<!--end::Info-->
									</div>
									<!--end::Description-->
									<!--begin::Price-->
									<div class="ms-5">
										<span class="mb-2">$</span>
										<span class="fs-3x fw-bolder" data-kt-plan-price-week="{{w_plan.price}}" data-kt-plan-price-month="{{m_plan.price}}" data-kt-plan-price-annual="{{y_plan.price}}">{{m_plan.price}}</span>
										<span class="fs-7 opacity-50">/
										<span data-kt-element="period">Month</span></span>
									</div>
									<!--end::Price-->
								</div>
								<!--end::Tab link-->
								{% endfor %}
							</div>
							<!--end::Tabs-->
						</div>
						<!--end::Col-->
						<!--begin::Col-->
						<div class="col-lg-6">
							<!--begin::Tab content-->
							<div class="tab-content rounded h-100 bg-light p-10">
								{% for plan in monthly_plans %}
								<!--begin::Tab Pane-->
								{% if user.subscription.plan.plan_name == plan.plan_name  %}
								<div class="tab-pane fade show active" id="kt_upgrade_plan_{{plan.plan_name}}">
								{% else %}
								<div class="tab-pane fade " id="kt_upgrade_plan_{{plan.plan_name}}">
								{% endif %}	
								<!--begin::Heading-->
									<div class="pb-5">
										<h2 class="fw-bolder text-dark">What’s in {{plan.plan_name}} Plan?</h2>
										<div class="text-muted fw-bold"></div>
									</div>
									<!--end::Heading-->
									<!--begin::Body-->

									<div class="pt-1">
										{% for desc in plan.describe %}
										<!--begin::Item-->
										<div class="d-flex align-items-center mb-7">

											<span class="fw-bold fs-5 text-gray-700 flex-grow-1">{{desc}}</span>
											<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
											<span class="svg-icon svg-icon-1 svg-icon-success">
												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
													<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor" />
													<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="currentColor" />
												</svg>
											</span>
											<!--end::Svg Icon-->
										</div>
										<!--end::Item-->
										{% endfor %}
										
										
										<!--end::Item-->
									</div>
									<!--end::Body-->
								</div>
								<!--end::Tab Pane-->
								{% endfor %}
							</div>
							<!--end::Tab content-->
						</div>
						<!--end::Col-->
					</div>
					<!--end::Row-->
				</div>
				<!--end::Plans-->
				<!--begin::Actions-->
				<div class="d-flex flex-center flex-row-fluid pt-12">
					<button type="reset" class="btn btn-light me-3" id="kt_modal_cancel" data-bs-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-primary " id="kt_modal_upgrade_plan_btn">
					<i id="spinnerIcon" class="fa fa-spinner fa-spin"></i>Upgrade Plan</button>
					<div id="paypal_button_container"></div>
				</div>
				<!--end::Actions-->
			</div>
			<!--end::Modal body-->
		</div>
		<!--end::Modal content-->
	</div>
	<!--end::Modal dialog-->
</div>
<!--end::Modal - Upgrade plan-->


<!--begin::Modal - Support Center - Create Ticket-->
<div class="modal fade" id="kt_modal_new_ticket" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="ktModalSupport" aria-hidden="true">
	<!--begin::Modal dialog-->
	<div class="modal-dialog modal-dialog-centered mw-750px">
		<!--begin::Modal content-->
		<div class="modal-content rounded">
			<!--begin::Modal header-->
			<div class="modal-header pb-0 border-0 justify-content-end">
				<!--begin::Close-->
				<div class="btn btn-sm btn-icon btn-active-color-primary" id="closemodal" data-bs-dismiss="modal" aria-label="Close">
					<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
					<span class="svg-icon svg-icon-3x">
						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
							<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
				</div>
				<!--end::Close-->
			</div>
			<!--begin::Modal header-->
			<!--begin::Modal body-->
			<div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
				<!--begin:Form-->
				<form id="kt_modal_new_ticket_form" class="form"  enctype="multipart/form-data" data-kt-redirect-url="{% url 'landing:support' %}">
					{% csrf_token %}
					<!--begin::Heading-->
					<div class="mb-13 text-center">
						<!--begin::Title-->
						<h1 class="mb-3">Create Ticket</h1>
						<!--end::Title-->
						<!--begin::Description-->  <!--end::Description-->
					</div>
					<!--end::Heading-->
					<!--begin::Input group-->
					<div class="d-flex flex-column mb-8 fv-row">
						<!--begin::Label-->
						<label class="d-flex align-items-center fs-6 fw-bold mb-2">
							<span class="required">Subject</span>
							<i class="fad fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a subject for your issue"></i>
						</label>
						<!--end::Label-->
						<input type="text" class="form-control form-control-solid" placeholder="Enter your ticket subject" name="subject" />
					</div>
					<!--end::Input group-->
					<!--begin::Input group-->
					<div class="row g-9 mb-8"> 
						<!--begin::Col-->
						<div class="col-md-6 fv-row">
							<label class="fs-6 fw-bold mb-2">Issue Type</label>
							<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a Issue Type" name="issue_type">
								<option value="">Select an option ...</option>
								<option value="bug">Bug</option>
								<option value="feature-request">Feature Request</option>
								<option value="support">Support</option>
							</select>
						</div>
						<!--end::Col-->
					</div>
					<!--end::Input group-->
					<!--begin::Input group-->
					<div class="d-flex flex-column mb-8 fv-row">
						<label class="required fs-6 fw-bold mb-2">Description</label>
						<textarea class="form-control form-control-solid" rows="4" name="description" placeholder="Type your ticket description"></textarea>
					</div>
					<!--end::Input group-->
					<!--begin::Input group-->
					<div class="fv-row mb-8">
						<label class="fs-6 fw-bold mb-2">Attachments</label>
						<!--begin::Dropzone-->
						<input type="file" class="form-control form-control-solid" name="attachments" id="attachments" accept=".png, .jpg, .jpeg .txt .json" multiple/>
						<!--end::Dropzone-->
					</div>
					<!--end::Input group-->
					<!--begin::Actions-->
					<div class="text-center">
						<button type="reset" id="kt_modal_new_ticket_cancel" class="btn btn-light me-3">Cancel</button>
						<button type="submit" id="kt_modal_new_ticket_submit" class="btn btn-primary">
							<span class="indicator-label">Submit</span>
							<span class="indicator-progress">Please wait...
							<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
						</button>
					</div>
					<!--end::Actions-->
				</form>
				<!--end:Form-->
			</div>
			<!--end::Modal body-->
		</div>
		<!--end::Modal content-->
	</div>
	<!--end::Modal dialog-->
</div>
<!--end::Modal - Support Center - Create Ticket-->