474 lines
25 KiB
HTML
474 lines
25 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Update" %} {{ person.get_full_name }} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto py-6 px-4">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'person_list' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
|
|
<i data-lucide="users" class="w-4 h-4"></i> {% trans "Applicants" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li><a href="{% url 'person_detail' person.slug %}" class="text-gray-500 hover:underline transition">
|
|
{{ person.full_name }}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold" style="color: #9d2235;">{% trans "Update" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="user-edit" class="w-6 h-6" style="color: #9d2235;"></i>
|
|
</div>
|
|
{% trans "Update Applicant" %}
|
|
</h1>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{% url 'person_detail' person.slug %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="eye" class="w-4 h-4"></i> {% trans "View Details" %}
|
|
</a>
|
|
<a href="{% url 'person_delete' person.slug %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700 transition-all duration-200">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
|
|
</a>
|
|
<a href="{% url 'person_list' %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to List" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Profile Info -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
|
<div class="px-6 py-4" style="background-color: #f8f9fa;">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="info" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Currently Editing" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-4">
|
|
{% if person.profile_image %}
|
|
<img src="{{ person.profile_image.url }}" alt="{{ person.get_full_name }}"
|
|
class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
|
|
{% else %}
|
|
<div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center border-3 border-gray-200">
|
|
<i data-lucide="user" class="w-12 h-12 text-gray-400"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<h5 class="text-xl font-bold text-gray-900 mb-1">{{ person.get_full_name }}</h5>
|
|
{% if person.email %}
|
|
<p class="text-gray-600 mb-1">{{ person.email }}</p>
|
|
{% endif %}
|
|
<small class="text-gray-500">
|
|
{% trans "Created" %}: {{ person.created_at|date:"d M Y" }} •
|
|
{% trans "Last Updated" %}: {{ person.updated_at|date:"d M Y" }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="edit-2" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Edit Information" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
{% if form.non_field_errors %}
|
|
<div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="text-red-700 mb-0">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="mb-6 p-4 rounded-lg {% if message.tags == 'error' %}bg-red-50 border border-red-200{% elif message.tags == 'success' %}bg-green-50 border border-green-200{% else %}bg-blue-50 border border-blue-200{% endif %}" role="alert">
|
|
<div class="flex items-start gap-3">
|
|
{% if message.tags == 'error' %}
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
{% elif message.tags == 'success' %}
|
|
<i data-lucide="check-circle" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
{% else %}
|
|
<i data-lucide="info" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
|
|
{% endif %}
|
|
<div>
|
|
<p class="mb-0 text-gray-800">{{ message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<form method="post" action="{% url 'person_update' person.slug %}" enctype="multipart/form-data" id="person-form" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Profile Image Section -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-3">{% trans "Profile Photo" %}</label>
|
|
<div class="flex items-start gap-4">
|
|
<div id="image-preview-container" class="flex-shrink-0">
|
|
{% if person.profile_image %}
|
|
<img src="{{ person.profile_image.url }}" alt="{{ person.get_full_name }}"
|
|
class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
|
|
{% else %}
|
|
<div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center border-3 border-gray-200">
|
|
<i data-lucide="user" class="w-12 h-12 text-gray-400"></i>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<input type="file" name="profile_image" id="id_profile_image"
|
|
class="hidden" accept="image/*"
|
|
onchange="previewImage(this)">
|
|
<button type="button" onclick="document.getElementById('id_profile_image').click()"
|
|
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="upload" class="w-4 h-4"></i>
|
|
{% trans "Change Photo" %}
|
|
</button>
|
|
<p class="text-xs text-gray-500 mt-2">{% trans "JPG, PNG or GIF. Max size 2MB." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="id_first_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "First Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="first_name" id="id_first_name"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter first name' %}"
|
|
value="{{ form.first_name.value|default:person.first_name }}"
|
|
required>
|
|
{% if form.first_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.first_name.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_middle_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Middle Name" %}
|
|
</label>
|
|
<input type="text" name="middle_name" id="id_middle_name"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter middle name' %}"
|
|
value="{{ form.middle_name.value|default:person.middle_name }}">
|
|
{% if form.middle_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.middle_name.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_last_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Last Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="last_name" id="id_last_name"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter last name' %}"
|
|
value="{{ form.last_name.value|default:person.last_name }}"
|
|
required>
|
|
{% if form.last_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.last_name.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_email" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Email Address" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="email" name="email" id="id_email"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter email address' %}"
|
|
value="{{ form.email.value|default:person.email }}"
|
|
required>
|
|
{% if form.email.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.email.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="id_phone" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Phone Number" %}
|
|
</label>
|
|
<input type="tel" name="phone" id="id_phone"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter phone number' %}"
|
|
value="{{ form.phone.value|default:person.phone }}">
|
|
{% if form.phone.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.phone.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_national_id" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "National ID" %}
|
|
</label>
|
|
<input type="text" name="national_id" id="id_national_id"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter national ID' %}"
|
|
value="{{ form.national_id.value|default:person.national_id }}">
|
|
{% if form.national_id.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.national_id.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_date_of_birth" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Date of Birth" %}
|
|
</label>
|
|
<input type="date" name="date_of_birth" id="id_date_of_birth"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
value="{{ form.date_of_birth.value|default:person.date_of_birth|date:'Y-m-d' }}">
|
|
{% if form.date_of_birth.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.date_of_birth.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_nationality" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Nationality" %}
|
|
</label>
|
|
<input type="text" name="nationality" id="id_nationality"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter nationality' %}"
|
|
value="{{ form.nationality.value|default:person.nationality }}">
|
|
{% if form.nationality.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.nationality.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_gender" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Gender" %}
|
|
</label>
|
|
<select name="gender" id="id_gender"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition bg-white">
|
|
<option value="">{% trans "Select Gender" %}</option>
|
|
<option value="M" {% if person.gender == 'M' %}selected{% endif %}>{% trans "Male" %}</option>
|
|
<option value="F" {% if person.gender == 'F' %}selected{% endif %}>{% trans "Female" %}</option>
|
|
</select>
|
|
{% if form.gender.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.gender.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_gpa" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "GPA" %}
|
|
</label>
|
|
<input type="number" step="0.01" name="gpa" id="id_gpa"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter GPA' %}"
|
|
value="{{ form.gpa.value|default:person.gpa }}">
|
|
{% if form.gpa.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.gpa.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address -->
|
|
<div>
|
|
<label for="id_address" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Address" %}
|
|
</label>
|
|
<textarea name="address" id="id_address" rows="3"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition resize-vertical"
|
|
placeholder="{% trans 'Enter address' %}">{{ form.address.value|default:person.address }}</textarea>
|
|
{% if form.address.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.address.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- LinkedIn Profile -->
|
|
<div>
|
|
<label for="id_linkedin_profile" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "LinkedIn Profile URL" %}
|
|
</label>
|
|
<input type="url" name="linkedin_profile" id="id_linkedin_profile"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="https://linkedin.com/in/username"
|
|
value="{{ form.linkedin_profile.value|default:person.linkedin_profile }}">
|
|
{% if form.linkedin_profile.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.linkedin_profile.errors.0 }}</div>
|
|
{% endif %}
|
|
<p class="text-xs text-gray-500 mt-1">{% trans "Optional: Add LinkedIn profile URL" %}</p>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
|
|
<a href="{% url 'person_detail' person.slug %}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Update Applicant" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Profile Image Preview
|
|
const profileImageInput = document.getElementById('id_profile_image');
|
|
const imagePreviewContainer = document.getElementById('image-preview-container');
|
|
const originalImage = imagePreviewContainer.innerHTML;
|
|
|
|
profileImageInput.addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file && file.type.startsWith('image/')) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
imagePreviewContainer.innerHTML = `
|
|
<img src="${e.target.result}" alt="Profile Preview" class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
|
|
<p class="text-xs text-gray-500 mt-2">${file.name}</p>
|
|
`;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else if (!file) {
|
|
imagePreviewContainer.innerHTML = originalImage;
|
|
}
|
|
});
|
|
|
|
// Form Validation
|
|
const form = document.getElementById('person-form');
|
|
form.addEventListener('submit', function(e) {
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
submitBtn.disabled = true;
|
|
submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
|
|
|
|
const firstName = document.getElementById('id_first_name').value.trim();
|
|
const lastName = document.getElementById('id_last_name').value.trim();
|
|
const email = document.getElementById('id_email').value.trim();
|
|
|
|
if (!firstName || !lastName) {
|
|
e.preventDefault();
|
|
submitBtn.disabled = false;
|
|
submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
alert('{% trans "First name and last name are required." %}');
|
|
return;
|
|
}
|
|
|
|
if (!email) {
|
|
e.preventDefault();
|
|
submitBtn.disabled = false;
|
|
submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
alert('{% trans "Email address is required." %}');
|
|
return;
|
|
}
|
|
|
|
if (!email.includes('@')) {
|
|
e.preventDefault();
|
|
submitBtn.disabled = false;
|
|
submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
alert('{% trans "Please enter a valid email address." %}');
|
|
return;
|
|
}
|
|
});
|
|
|
|
// Email validation
|
|
function isValidEmail(email) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
}
|
|
|
|
// LinkedIn URL validation
|
|
const linkedinInput = document.getElementById('id_linkedin_profile');
|
|
linkedinInput.addEventListener('blur', function() {
|
|
const value = this.value.trim();
|
|
if (value && !isValidLinkedInURL(value)) {
|
|
this.classList.add('border-red-500');
|
|
if (!this.nextElementSibling || !this.nextElementSibling.classList.contains('text-red-600')) {
|
|
const feedback = document.createElement('p');
|
|
feedback.className = 'text-red-600 text-sm mt-1';
|
|
feedback.textContent = '{% trans "Please enter a valid LinkedIn URL" %}';
|
|
this.parentNode.appendChild(feedback);
|
|
}
|
|
} else {
|
|
this.classList.remove('border-red-500');
|
|
const feedback = this.parentNode.querySelector('.text-red-600');
|
|
if (feedback && feedback.textContent.includes('LinkedIn')) feedback.remove();
|
|
}
|
|
});
|
|
|
|
function isValidLinkedInURL(url) {
|
|
const linkedinRegex = /^https?:\/\/(www\.)?linkedin\.com\/.+/i;
|
|
return linkedinRegex.test(url);
|
|
}
|
|
|
|
// Warn before leaving if changes are made
|
|
let formChanged = false;
|
|
const formInputs = form.querySelectorAll('input, select, textarea');
|
|
|
|
formInputs.forEach(input => {
|
|
input.addEventListener('change', function() {
|
|
formChanged = true;
|
|
});
|
|
});
|
|
|
|
window.addEventListener('beforeunload', function(e) {
|
|
if (formChanged) {
|
|
e.preventDefault();
|
|
e.returnValue = '{% trans "You have unsaved changes. Are you sure you want to leave?" %}';
|
|
return e.returnValue;
|
|
}
|
|
});
|
|
|
|
form.addEventListener('submit', function() {
|
|
formChanged = false;
|
|
});
|
|
});
|
|
|
|
function previewImage(input) {
|
|
if (input.files && input.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const preview = document.getElementById('image-preview-container');
|
|
preview.innerHTML = `
|
|
<img src="${e.target.result}" alt="Profile Preview" class="w-24 h-24 rounded-full border-3 border-gray-200 object-cover">
|
|
<p class="text-xs text-gray-500 mt-2">${input.files[0].name}</p>
|
|
`;
|
|
};
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |