182 lines
9.5 KiB
HTML
182 lines
9.5 KiB
HTML
{% load i18n %}
|
|
|
|
{% if questions %}
|
|
{% for question in questions %}
|
|
<div class="ai-question-item bg-white border border-gray-200 rounded-xl p-5 mb-4 shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="ai-question-header flex flex-wrap items-start gap-2 mb-3">
|
|
<div class="ai-question-badges flex flex-wrap gap-2">
|
|
<span class="ai-question-badge inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold
|
|
{% if question.type == 'Technical' %} bg-temple-red/10 text-temple-red
|
|
{% elif question.type == 'Behavioral' %} bg-blue-100 text-blue-700
|
|
{% elif question.type == 'Situational' %} bg-amber-100 text-amber-700
|
|
{% else %} bg-gray-100 text-gray-700
|
|
{% endif %}">
|
|
{% if question.type == 'Technical' %}
|
|
<i data-lucide="code" class="w-3.5 h-3.5"></i>
|
|
{% elif question.type == 'Behavioral' %}
|
|
<i data-lucide="users" class="w-3.5 h-3.5"></i>
|
|
{% elif question.type == 'Situational' %}
|
|
<i data-lucide="lightbulb" class="w-3.5 h-3.5"></i>
|
|
{% endif %}
|
|
{{ question.type }}
|
|
</span>
|
|
<span class="ai-question-badge inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold
|
|
{% if question.difficulty == 'Easy' %} bg-green-100 text-green-700
|
|
{% elif question.difficulty == 'Medium' %} bg-yellow-100 text-yellow-700
|
|
{% elif question.difficulty == 'Hard' %} bg-red-100 text-red-700
|
|
{% else %} bg-gray-100 text-gray-700
|
|
{% endif %}">
|
|
{% if question.difficulty == 'Easy' %}
|
|
<i data-lucide="smile" class="w-3.5 h-3.5"></i>
|
|
{% elif question.difficulty == 'Medium' %}
|
|
<i data-lucide="meh" class="w-3.5 h-3.5"></i>
|
|
{% elif question.difficulty == 'Hard' %}
|
|
<i data-lucide="frown" class="w-3.5 h-3.5"></i>
|
|
{% endif %}
|
|
{{ question.difficulty }}
|
|
</span>
|
|
{% if question.category %}
|
|
<span class="ai-question-badge inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-temple-dark/10 text-temple-dark">
|
|
<i data-lucide="tag" class="w-3.5 h-3.5"></i>
|
|
{{ question.category }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ai-question-text text-gray-800 text-base leading-relaxed mb-4" id="questionText_{{ question.id }}">
|
|
{{ question.text|linebreaksbr }}
|
|
</div>
|
|
|
|
<div class="ai-question-meta flex items-center justify-between pt-3 border-t border-gray-200">
|
|
<div class="ai-question-category flex items-center gap-2 text-sm text-gray-500">
|
|
<i data-lucide="clock" class="w-4 h-4"></i>
|
|
<span>{% trans "Generated" %}: {{ question.created_at|date:"d M Y, H:i" }}</span>
|
|
</div>
|
|
<div class="ai-question-actions flex gap-2">
|
|
<button type="button"
|
|
class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-temple-red transition-all duration-200"
|
|
onclick="copyQuestionText('{{ question.id }}')"
|
|
title="{% trans 'Copy question' %}">
|
|
<i data-lucide="copy" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans 'Copy' %}</span>
|
|
</button>
|
|
<button type="button"
|
|
class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-temple-red transition-all duration-200"
|
|
onclick="toggleQuestionNotes('{{ question.id }}')"
|
|
title="{% trans 'Add notes' %}">
|
|
<i data-lucide="sticky-note" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans 'Notes' %}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden notes section -->
|
|
<div id="questionNotes_{{ question.id }}" class="mt-4" style="display: none;">
|
|
<div class="bg-temple-cream/50 rounded-lg p-4">
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans 'Add your notes for this question...' %}
|
|
</label>
|
|
<textarea 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-none"
|
|
rows="3"
|
|
placeholder="{% trans 'Type your notes here...' %}"></textarea>
|
|
<div class="mt-3 flex justify-end">
|
|
<button type="button"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-temple-red hover:bg-[#7a1a29] text-white transition-all duration-200"
|
|
onclick="saveQuestionNotes('{{ question.id }}')">
|
|
<i data-lucide="save" class="w-4 h-4"></i> {% trans "Save Notes" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="ai-questions-empty text-center py-12 px-6 bg-white border border-gray-200 rounded-xl">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-temple-red/10 rounded-full mb-4">
|
|
<i data-lucide="brain" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
<h5 class="text-xl font-bold text-gray-900 mb-3">{% trans "No AI Questions Available" %}</h5>
|
|
<p class="text-gray-600 max-w-lg mx-auto">{% trans "Click 'Generate Questions' to create personalized interview questions based on candidate's profile and job requirements." %}</p>
|
|
</div>
|
|
{% endif }
|
|
|
|
<script>
|
|
// Copy question text to clipboard
|
|
function copyQuestionText(questionId) {
|
|
const questionText = document.getElementById(`questionText_${questionId}`);
|
|
if (questionText) {
|
|
navigator.clipboard.writeText(questionText.textContent).then(() => {
|
|
// Show success feedback
|
|
showNotification('{% trans "Question copied to clipboard!" %}', 'success');
|
|
}).catch(err => {
|
|
console.error('Failed to copy text: ', err);
|
|
showNotification('{% trans "Failed to copy question" %}', 'error');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Toggle question notes visibility
|
|
function toggleQuestionNotes(questionId) {
|
|
const notesSection = document.getElementById(`questionNotes_${questionId}`);
|
|
if (notesSection) {
|
|
notesSection.style.display = notesSection.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
// Save question notes (placeholder function)
|
|
function saveQuestionNotes(questionId) {
|
|
const notesTextarea = document.querySelector(`#questionNotes_${questionId} textarea`);
|
|
if (notesTextarea) {
|
|
// Here you would typically save to backend
|
|
const notes = notesTextarea.value;
|
|
console.log(`Saving notes for question ${questionId}:`, notes);
|
|
showNotification('{% trans "Notes saved successfully!" %}', 'success');
|
|
|
|
// Hide notes section after saving
|
|
setTimeout(() => {
|
|
toggleQuestionNotes(questionId);
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
// Show notification (helper function)
|
|
function showNotification(message, type = 'info') {
|
|
// Create notification element
|
|
const notification = document.createElement('div');
|
|
notification.className = `fixed top-4 right-4 z-50 min-w-[300px] p-4 rounded-xl shadow-lg flex items-start gap-3 animate-slide-in
|
|
${type === 'success' ? 'bg-green-50 border border-green-200 text-green-800' :
|
|
type === 'error' ? 'bg-red-50 border border-red-200 text-red-800' :
|
|
'bg-blue-50 border border-blue-200 text-blue-800'}`;
|
|
notification.innerHTML = `
|
|
<i data-lucide="${type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info'}" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
<p class="text-sm font-medium flex-1">${message}</p>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 transition-colors" onclick="this.parentElement.remove()">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
lucide.createIcons();
|
|
|
|
// Auto-remove after 3 seconds
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.style.opacity = '0';
|
|
notification.style.transform = 'translateX(100%)';
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.remove();
|
|
}
|
|
}, 300);
|
|
}
|
|
}, 3000);
|
|
}
|
|
|
|
// Initialize Lucide icons
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
});
|
|
</script> |