collection-items.html

<div class="w-100" style="margin-top:80px">
	<div class="container py-5">
		<div class="d-flex align-items-center justify-content-between">
			<h2 class="mb-4">Collection Items</h2>
			
			<div class="">
				<button type="button" class="btn btn-custom-2 px-5" id="add-collection-item-show-modal">Add Item</button>
			</div>
		</div>
		
		<div class="row" id="collection-items-container"></div>
	</div>
</div>

<div class="modal fade" id="modal-collection-item" tabindex="-1">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title font-size-110">Add Item</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			
			<form id="collection-item-form">
				<input type="hidden" name="id" />
				<input type="hidden" name="collection_id" />
				
				<div class="modal-body pt-4">
					<div class="px-5 mb-4">
						<div class="mx-5 px-5">
							<div class="w-100 background-image-cover mb-3 position-relative bg-color-1" id="image-container" style="padding-top:100%; border:3px solid #aaaaaa"></div>
						</div>
						<div class="text-center">
							<input type="file" class="d-none" name="image" accept="image/*" />
							<button type="button" class="btn btn-custom-13 btn-sm px-5 action-btn" id="select-image" style="border-radius:29px">Select Image</button>
						</div>
					</div>
					
					<div class="mb-4">
						<label class="neo-bold font-size-90 mb-2" for="name">Name</label>
						<input type="text" class="form-control py-2 py-lg-3 px-3 font-size-90" name="name" placeholder="Enter Name" id="name" style="border-width:2px; height:40px" required />
					</div>
					
					<div class="mb-4">
						<label class="neo-bold font-size-90 mb-2" for="description">Description</label>
						<input type="text" class="form-control py-2 py-lg-3 px-3 font-size-90" name="description" placeholder="Enter Description" id="description" style="border-width:2px; height:40px" required />
					</div>
					
					<div>
						<label class="neo-bold font-size-90 mb-2">Properties</label>
						
						<div class="row" id="property-fields-container"></div>
					</div>
				</div>
				
				<div class="modal-footer">
					<button type="submit" class="btn btn-custom-2 px-5 font-size-90" style="border-radius:29px">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>