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

{% block csslib %}
	<link href='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.css' rel='stylesheet' type='text/css'/>
	<link href='/cms-static/admin/assets/plugins/custom/jstree/jstree.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='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js') #}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
	{# <script src='/cms-static/admin/assets/js/custom/apps/ecommerce/catalog/products.js'></script> #}
	{# //- script(src='/cms-static/admin/assets/js/widgets.bundle.js') #}
	{# //- script(src='/cms-static/admin/assets/js/custom/widgets.js') #}

	{# <script src='/cms-static/admin/assets/js/custom/utilities/modals/create-app.js'></script> #}
	{# <script src='/cms-static/admin/assets/js/custom/utilities/modals/users-search.js'></script> #}
	<script src='/cms-static/admin/assets/plugins/custom/jstree/jstree.bundle.js'></script>

	{# // Form Submission Script #}
	<script src='/cms-static/common/js/custom-functions.js'></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>Media Management - {{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">Media Management</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">Media</li>
					</ul>
					{# <a class="btn btn-sm fw-bold btn-primary" href="#" data-bs-toggle="modal" data-bs-target="#media_uploader_modal">Upload Media</a> #}
				</div>
			</div>
		</div>

		<div id="beaver_app_content" class="app-content flex-column-fluid">
			<div id="media-management-panel" class="app-container container">
				<div class="row g-5 g-10 mb-10">
					<div class="col-12 col-md-8 mx-auto my-5">
						<!-- begin::Form -->
						{% include '../../partials/_media-upload-DZ-form.njk' %}
						<!-- end::Form -->
					</div>
				</div>
				<div class="row g-5 g-10 mb-10">
					<div class="col-12 col-md-8 mx-auto my-5">
						<input class="form-control form-control-sm " id="search-image-input" placeholder="Search images with name" />
					</div>
				</div>
				<div class="row g-5 g-10 mb-5">
					<div class="col-12 col-md-8 mx-auto text-center">
						<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6 justify-content-center" id="media-filter-tabs">
							<li class="nav-item">
								<a class="nav-link active cursor-pointer" data-filter="all">All Media</a>
							</li>
							<li class="nav-item">
								<a class="nav-link cursor-pointer" data-filter="image">Images</a>
							</li>
							<li class="nav-item">
								<a class="nav-link cursor-pointer" data-filter="document">Documents</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="row g-5 g-10 mb-10">
					<div class="col-12 col-sm-7 col-md-9">
						<div class="row g-5 g-10 mb-10" id="page-media-holder">
							{% for item in media %}
								<input id="img-{{ loop.index }}" value="{{ item.url }}" hidden/>
								<div class="col-12 col-sm-3 col-md-3 col-lg-2 col-xl-2 col-xxl-2 text-center mb-2 mb-xl-2 media-list-item" data-name="{{item.file.name}}" data-id="{{item._id}}" data-file-type="{% if item.file_type == 'pdf' %}document{% else %}image{% endif %}">
									{%if item.file_type=='pdf'%}
										<img class="lazy img-thumbnail cursor-pointer" src="/cms-static/common/media/blank-image.svg" data-src="/cms-static/common/media/pdf-thumbnail.png?tr=w-150,h-150" alt="image" srcset="" style="width: 100%; height:auto; object-fit: cover;">
									{%else%}
										<img class="lazy img-thumbnail cursor-pointer" src="/cms-static/common/media/blank-image.svg" data-src="{{ item.url }}?tr=w-150,h-150" alt="image" srcset="" style="width: 100%; height:auto; object-fit: cover;">
									{%endif%}
									<div class="row mt-1">
										<div class="col-12">
											<span class="btn btn-danger btn-sm mt-1" id="{{ item._id }}" url="/admin/cms/media/delete" data-beaver-subscriptions-table-filter="delete_row" onClick="deleteItem(this)" data-bs-toggle="tooltip" data-bs-placement="top" title="Click to delete image">
												<i class="fa fa-trash"></i>
											</span>
											<span class="btn btn-success btn-sm copy-btn mt-1" data-clipboard-target="#img-{{ loop.index }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Click to copy Image URL">
												<i class="fa fa-clipboard text-white"></i>
											</span>
										</div>
									</div>
								</div>
							{% else %}
								<div class="text-center">
									<h4 class="mt-10">No images available</h4>
								</div>
							{% endfor %}
						</div>
					</div>
					<div class="col-12 col-sm-5 col-md-3 rounded bg-light-primary py-3" id="media-meta-panel">
						<div class="row">
							<div class="col-12" id="img-holder">
								<img id="preview-img" src="">
							</div>
							<div class="col-12">
								<form class="es-form" action="/admin/cms/media/add-meta" method="post">
									<input type="hidden" name="id" value="">
									<div class="row">
										<div class="col-12">
											<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
												<span>Media Title</span>
											</label>
											<input type="text" name="title" class="form-control" id="title_field">
										</div>
										<div class="col-12">
											<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
												<span>Media Alt Text</span>
											</label>
											<input type="text" name="alt_text" class="form-control" id="alt_text_field">
										</div>
										<div class="mb-3">
											<label for="media-modal-link" class="form-label">Link</label>
											<input type="text" name="link" id="media-modal-link" class="form-control form-control-solid" placeholder="Enter link (optional)"/>
										</div>
										<div class="my-3 ms-2 form-check">
											<input type="checkbox" class="form-check-input form-control-light" name="link_new_tab" id="media-modal-link-new-tab" value="true" >
											<label class="form-check-label" for="media-modal-link-new-tab">Open link in new tab</label>
										</div>
										<div class="col-12 mt-5">
											<button class="btn btn-sm btn-success form-submit-btn btn-block" type="submit">
												<span class="label">Apply</span>
												<span class="preloader d-none">Saving...</span>
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock %}