{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
crossorigin="anonymous" />
<title>Manimaran | Edit Category</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead pb-3">Add Category</h2>
	    			</div>
	    		</div>
				<form action='/edit-category/{{cat_obj.id}}' id="add-category" method="post" class="form-reset" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="card dashboard-card p-4">
						<div class="row">
							<div class="col-12">
									<div class="picUpdate d-flex align-items-center justify-content-between">
										<div class="profile-pic">
											<div class="d-flex align-items-center">
												<div>
													<img src="{% if cat_obj.image %}{{ cat_obj.image }}{% else %}/static/admin/images/user-default.png{% endif %}"  id="profile-image"/>
												</div>
												<div class="px-3">
													<input type="file" name='image' id="myFileInput" onchange="loadfile(event)" accept="image/*"  />
													<input type="button" class="btn mb-0" onclick="document.getElementById('myFileInput').click()"  value="Upload a New Photo"/>
												</div>
											</div>
										</div>
									</div>
							</div>
							<div class="col-12 col-md-12">
								<div class="top-card px-0">
									<p class="f-18 mt-4">Category Information</p>	    						
								</div>
								<div class="updateDetail row">
									<form class="row gx-5">
										<div class="col-6 mb-3">
											<label class="form-label">Name*</label>
											<input type="text" class="form-control mb-0" name='name' value="{{cat_obj.name}}">
										</div>	
										<div class="col-12 my-4 text-end">
											<button type="submit" class="update-btn">Update Category</button>
										</div>
									</form>
								</div>
						</div>
					</div>
				</form>
	    	</div>
	    </div>

<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" crossorigin="anonymous"></script>
<script>
function loadfile(event){
	var image = document.getElementById('profile-image');
	image.src = URL.createObjectURL(event.target.files[0]);
};

</script>

<!-- end of js -->
{% endblock %}