427 lines
18 KiB
HTML
427 lines
18 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ title }} - ATS{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* KAAT-S UI Variables */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #eaeff3;
|
|
--kaauh-primary-text: #343a40;
|
|
--kaauh-success: #28a745;
|
|
--kaauh-info: #17a2b8;
|
|
--kaauh-danger: #dc3545;
|
|
--kaauh-warning: #ffc107;
|
|
}
|
|
|
|
/* Primary Color Overrides */
|
|
.text-primary-theme { color: var(--kaauh-teal) !important; }
|
|
.bg-primary-theme { background-color: var(--kaauh-teal) !important; }
|
|
|
|
/* Main Container & Card Styling */
|
|
.kaauh-card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
background-color: white;
|
|
}
|
|
|
|
/* Form Styling */
|
|
.form-section {
|
|
background-color: #f8f9fa;
|
|
border-radius: 0.75rem;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: var(--kaauh-primary-text);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: var(--kaauh-teal);
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
|
}
|
|
|
|
/* Button Styling */
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
border-color: #6c757d;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Required Field Indicator */
|
|
.required-field::after {
|
|
content: " *";
|
|
color: var(--kaauh-danger);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Error Styling */
|
|
.is-invalid {
|
|
border-color: var(--kaauh-danger) !important;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
color: var(--kaauh-danger);
|
|
font-size: 0.875rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Help Text */
|
|
.form-text {
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Icon Styling */
|
|
.section-icon {
|
|
color: var(--kaauh-teal);
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<!-- Header Section -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
|
<i class="fas fa-building me-2"></i>
|
|
{{ title }}
|
|
</h1>
|
|
<p class="text-muted mb-0">
|
|
{% if agency %}
|
|
{% trans "Update the hiring agency information below." %}
|
|
{% else %}
|
|
{% trans "Fill in the details to add a new hiring agency." %}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<a href="{% url 'agency_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Agencies" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card kaauh-card">
|
|
<div class="card-body p-4">
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger" role="alert">
|
|
<h5 class="alert-heading">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
{% trans "Please correct the errors below:" %}
|
|
</h5>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="mb-0">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
|
|
<!-- Basic Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="mb-4">
|
|
<i class="fas fa-info-circle section-icon"></i>
|
|
{% trans "Basic Information" %}
|
|
</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.name.id_for_label }}" class="form-label required-field">
|
|
{{ form.name.label }}
|
|
</label>
|
|
{{ form.name }}
|
|
{% if form.name.errors %}
|
|
{% for error in form.name.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.name.help_text %}
|
|
<div class="form-text">{{ form.name.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.contact_person.id_for_label }}" class="form-label">
|
|
{{ form.contact_person.label }}
|
|
</label>
|
|
{{ form.contact_person }}
|
|
{% if form.contact_person.errors %}
|
|
{% for error in form.contact_person.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.contact_person.help_text %}
|
|
<div class="form-text">{{ form.contact_person.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.phone.id_for_label }}" class="form-label">
|
|
{{ form.phone.label }}
|
|
</label>
|
|
{{ form.phone }}
|
|
{% if form.phone.errors %}
|
|
{% for error in form.phone.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.phone.help_text %}
|
|
<div class="form-text">{{ form.phone.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="mb-4">
|
|
<i class="fas fa-address-book section-icon"></i>
|
|
{% trans "Contact Information" %}
|
|
</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.email.id_for_label }}" class="form-label">
|
|
{{ form.email.label }}
|
|
</label>
|
|
{{ form.email }}
|
|
{% if form.email.errors %}
|
|
{% for error in form.email.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.email.help_text %}
|
|
<div class="form-text">{{ form.email.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.website.id_for_label }}" class="form-label">
|
|
{{ form.website.label }}
|
|
</label>
|
|
{{ form.website }}
|
|
{% if form.website.errors %}
|
|
{% for error in form.website.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.website.help_text %}
|
|
<div class="form-text">{{ form.website.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.address.id_for_label }}" class="form-label">
|
|
{{ form.address.label }}
|
|
</label>
|
|
{{ form.address }}
|
|
{% if form.address.errors %}
|
|
{% for error in form.address.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.address.help_text %}
|
|
<div class="form-text">{{ form.address.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Section -->
|
|
<div class="form-section">
|
|
<h5 class="mb-4">
|
|
<i class="fas fa-globe section-icon"></i>
|
|
{% trans "Location Information" %}
|
|
</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.country.id_for_label }}" class="form-label">
|
|
{{ form.country.label }}
|
|
</label>
|
|
{{ form.country }}
|
|
{% if form.country.errors %}
|
|
{% for error in form.country.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.country.help_text %}
|
|
<div class="form-text">{{ form.country.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.city.id_for_label }}" class="form-label">
|
|
{{ form.city.label }}
|
|
</label>
|
|
{{ form.city }}
|
|
{% if form.city.errors %}
|
|
{% for error in form.city.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.city.help_text %}
|
|
<div class="form-text">{{ form.city.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="mb-4">
|
|
<i class="fas fa-comment-dots section-icon"></i>
|
|
{% trans "Additional Information" %}
|
|
</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.description.id_for_label }}" class="form-label">
|
|
{{ form.description.label }}
|
|
</label>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
{% for error in form.description.errors %}
|
|
<div class="invalid-feedback">{{ error }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.description.help_text %}
|
|
<div class="form-text">{{ form.description.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between align-items-center mt-4">
|
|
<a href="{% url 'agency_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-times me-1"></i> {% trans "Cancel" %}
|
|
</a>
|
|
<div>
|
|
{% if agency %}
|
|
<button type="submit" class="btn btn-main-action">
|
|
<i class="fas fa-save me-1"></i> {{ button_text }}
|
|
</button>
|
|
{% else %}
|
|
<button type="submit" class="btn btn-main-action">
|
|
<i class="fas fa-plus me-1"></i> {{ button_text }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<div class="card kaauh-card mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title" style="color: var(--kaauh-teal-dark);">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
{% trans "Quick Tips" %}
|
|
</h5>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
{% trans "Provide accurate contact information for better communication" %}
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
{% trans "Include a valid website URL if available" %}
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
{% trans "Add a detailed description to help identify the agency" %}
|
|
</li>
|
|
<li class="mb-0">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
{% trans "All fields marked with * are required" %}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{% if agency %}
|
|
<div class="card kaauh-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title" style="color: var(--kaauh-teal-dark);">
|
|
<i class="fas fa-history me-2"></i>
|
|
{% trans "Agency Information" %}
|
|
</h5>
|
|
<p class="mb-2">
|
|
<strong>{% trans "Created:" %}</strong><br>
|
|
{{ agency.created_at|date:"F d, Y" }}
|
|
</p>
|
|
<p class="mb-2">
|
|
<strong>{% trans "Last Updated:" %}</strong><br>
|
|
{{ agency.updated_at|date:"F d, Y" }}
|
|
</p>
|
|
<p class="mb-0">
|
|
<strong>{% trans "Slug:" %}</strong><br>
|
|
<code>{{ agency.slug }}</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add Bootstrap classes to form fields
|
|
const formFields = document.querySelectorAll('input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select');
|
|
formFields.forEach(function(field) {
|
|
field.classList.add('form-control');
|
|
});
|
|
|
|
// Add error classes to fields with errors
|
|
const errorFields = document.querySelectorAll('.is-invalid');
|
|
errorFields.forEach(function(field) {
|
|
field.classList.add('is-invalid');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|