93 lines
4.0 KiB
HTML
93 lines
4.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n %}
|
|
{% load crispy_forms_tags %}
|
|
|
|
{% block title %}Create Form Template - ATS{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
|
<div class="flex-1">
|
|
<h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
|
|
<div class="bg-temple-red/10 p-3 rounded-xl">
|
|
<i data-lucide="file-plus-2" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
Create Form Template
|
|
</h1>
|
|
</div>
|
|
<a href="{% url 'form_templates_list' %}" class="inline-flex items-center gap-2 border border-gray-300 text-gray-600 hover:bg-gray-100 px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> Back to Templates
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<div class="w-full max-w-4xl">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div class="bg-gradient-to-br from-temple-red/5 to-transparent border-b border-gray-100 px-6 py-4">
|
|
<h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
|
|
<i data-lucide="plus-circle" class="w-5 h-5 text-temple-red"></i> New Form Template
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" id="createFormTemplate" class="space-y-6">
|
|
{% csrf_token %}
|
|
{{ form|crispy }}
|
|
<div class="flex flex-col sm:flex-row justify-between gap-3 pt-4 border-t border-gray-200">
|
|
<a href="{% url 'form_templates_list' %}" class="inline-flex items-center gap-2 border border-gray-300 text-gray-600 hover:bg-gray-100 px-6 py-2.5 rounded-xl text-sm font-medium transition">
|
|
<i data-lucide="x" class="w-4 h-4"></i> Cancel
|
|
</a>
|
|
<button type="submit" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-6 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="save" class="w-4 h-4"></i> Create Template
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="fixed top-4 right-4 z-50 bg-emerald-100 border border-emerald-200 text-emerald-800 px-4 py-3 rounded-xl shadow-lg flex items-center gap-3 animate-in slide-in-from-right">
|
|
<i data-lucide="check-circle" class="w-5 h-5 text-emerald-600"></i>
|
|
<span class="text-sm font-medium">{{ message }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('createFormTemplate');
|
|
|
|
form.addEventListener('submit', function(event) {
|
|
let isValid = true;
|
|
|
|
// Validate template name
|
|
const nameField = form.querySelector('#id_name');
|
|
if (!nameField.value.trim()) {
|
|
nameField.classList.add('is-invalid');
|
|
isValid = false;
|
|
} else {
|
|
nameField.classList.remove('is-invalid');
|
|
}
|
|
|
|
if (!isValid) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
// Remove validation errors on input
|
|
const nameField = form.querySelector('#id_name');
|
|
nameField.addEventListener('input', function() {
|
|
if (this.value.trim()) {
|
|
this.classList.remove('is-invalid');
|
|
}
|
|
});
|
|
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |