kaauh_ats/templates/recruitment/agency_assignment_form.html

252 lines
11 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;
}
.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;
}
.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);
}
.form-control:focus, .form-select:focus {
border-color: var(--kaauh-teal);
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
}
.form-label {
font-weight: 600;
color: var(--kaauh-primary-text);
}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-8 mx-auto">
<!-- Header -->
<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-tasks me-2"></i>
{{ title }}
</h1>
<p class="text-muted mb-0">
{% trans "Assign a job to an external hiring agency" %}
</p>
</div>
<a href="{% url 'agency_assignment_list' %}" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Assignments" %}
</a>
</div>
<!-- Form Card -->
<div class="kaauh-card">
<form method="post" novalidate>
{% csrf_token %}
<!-- Agency and Job Selection -->
{{ form.agency }}
<div class="row g-3 mb-4">
{% comment %} <div class="col-md-6">
<label for="{{ form.agency.id_for_label }}" class="form-label">
{{ form.agency.label }} <span class="text-danger">*</span>
</label>
{{ form.agency }}
{% if form.agency.errors %}
<div class="text-danger small mt-1">
{% for error in form.agency.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
</div> {% endcomment %}
<div class="col-md-6">
<label for="{{ form.job.id_for_label }}" class="form-label">
{{ form.job.label }} <span class="text-danger">*</span>
</label>
{{ form.job }}
{% if form.job.errors %}
<div class="text-danger small mt-1">
{% for error in form.job.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
</div>
</div>
<!-- Assignment Details -->
<div class="row g-3 mb-4">
<div class="col-md-6">
<label for="{{ form.max_candidates.id_for_label }}" class="form-label">
{{ form.max_candidates.label }} <span class="text-danger">*</span>
</label>
{{ form.max_candidates }}
{% if form.max_candidates.errors %}
<div class="text-danger small mt-1">
{% for error in form.max_candidates.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
<small class="form-text text-muted">
{% trans "Maximum number of candidates the agency can submit" %}
</small>
</div>
<div class="col-md-6">
<label for="{{ form.deadline_date.id_for_label }}" class="form-label">
{{ form.deadline_date.label }} <span class="text-danger">*</span>
</label>
{{ form.deadline_date }}
{% if form.deadline_date.errors %}
<div class="text-danger small mt-1">
{% for error in form.deadline_date.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
<small class="form-text text-muted">
{% trans "Date and time when submission period ends" %}
</small>
</div>
</div>
<!-- Status and Settings -->
{% comment %} <div class="row g-3 mb-4">
<div class="col-md-6">
<label for="{{ form.is_active.id_for_label }}" class="form-label">
{{ form.is_active.label }}
</label>
<div class="form-check form-switch">
{{ form.is_active }}
<label class="form-check-label" for="{{ form.is_active.id_for_label }}">
{% trans "Enable this assignment" %}
</label>
</div>
{% if form.is_active.errors %}
<div class="text-danger small mt-1">
{% for error in form.is_active.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.status.id_for_label }}" class="form-label">
{{ form.status.label }}
</label>
{{ form.status }}
{% if form.status.errors %}
<div class="text-danger small mt-1">
{% for error in form.status.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
<small class="form-text text-muted">
{% trans "Current status of this assignment" %}
</small>
</div>
</div> {% endcomment %}
<!-- Admin Notes -->
<div class="mb-4">
<label for="{{ form.admin_notes.id_for_label }}" class="form-label">
{{ form.admin_notes.label }}
</label>
{{ form.admin_notes }}
{% if form.admin_notes.errors %}
<div class="text-danger small mt-1">
{% for error in form.admin_notes.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
<small class="form-text text-muted">
{% trans "Internal notes about this assignment (not visible to agency)" %}
</small>
</div>
<!-- Form Actions -->
<div class="d-flex justify-content-between align-items-center pt-3 border-top">
<a href="{% url 'agency_assignment_list' %}" class="btn btn-outline-secondary">
<i class="fas fa-times me-1"></i> {% trans "Cancel" %}
</a>
<button type="submit" class="btn btn-main-action">
<i class="fas fa-save me-1"></i> {{ button_text }}
</button>
</div>
</form>
</div>
<!-- Help Information -->
{% comment %} <div class="kaauh-card mt-4">
<h5 class="mb-3" style="color: var(--kaauh-teal-dark);">
<i class="fas fa-info-circle me-2"></i>
{% trans "Assignment Information" %}
</h5>
<div class="row">
<div class="col-md-6">
<h6 class="fw-bold text-primary">{% trans "Active Status" %}</h6>
<p class="text-muted small">
{% trans "Only active assignments allow agencies to submit candidates. Expired or cancelled assignments cannot receive new submissions." %}
</p>
</div>
<div class="col-md-6">
<h6 class="fw-bold text-primary">{% trans "Access Links" %}</h6>
<p class="text-muted small">
{% trans "After creating an assignment, you can generate access links for agencies to submit candidates through their portal." %}
</p>
</div>
</div>
</div> {% endcomment %}
</div>
</div>
</div>
{% endblock %}
{% block customJS %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Auto-populate agency field when job is selected
const jobSelect = document.getElementById('{{ form.job.id_for_label }}');
const agencySelect = document.getElementById('{{ form.agency.id_for_label }}');
if (jobSelect && agencySelect) {
jobSelect.addEventListener('change', function() {
// You could add logic here to filter agencies based on job requirements
// For now, just log the selection
console.log('Job selected:', this.value);
});
}
// Set minimum datetime for deadline to current time
const deadlineInput = document.getElementById('{{ form.deadline_date.id_for_label }}');
if (deadlineInput) {
const now = new Date();
const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000)
.toISOString()
.slice(0, 16);
deadlineInput.min = localDateTime;
}
});
</script>
{% endblock %}