526 lines
23 KiB
HTML
526 lines
23 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n %}
|
|
{% block customCSS %}
|
|
<style>
|
|
/* -------------------------------------------------------------------------- */
|
|
/* KAAT-S Redesign CSS - Compacted and Reordered Layout */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-teal-light: #e0f7f9;
|
|
--kaauh-border: #e9ecef;
|
|
--kaauh-primary-text: #212529;
|
|
--kaauh-secondary-text: #6c757d;
|
|
--kaauh-gray-light: #f8f9fa;
|
|
--kaauh-success: #198754;
|
|
--kaauh-danger: #dc3545;
|
|
--kaauh-link: #007bff;
|
|
--kaauh-link-hover: #0056b3;
|
|
}
|
|
|
|
body {
|
|
background-color: #f0f2f5;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* ------------------ Card & Header Styles ------------------ */
|
|
|
|
.card {
|
|
border: none;
|
|
border-radius: 8px; /* Slightly smaller radius */
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.04); /* Lighter shadow */
|
|
margin-bottom: 1rem;
|
|
}
|
|
.card-body {
|
|
padding: 1rem 1.25rem; /* Reduced padding */
|
|
}
|
|
#comments-card .card-header {
|
|
background-color: white;
|
|
color: var(--kaauh-teal-dark);
|
|
padding: 0.75rem 1.25rem; /* Reduced header padding */
|
|
font-weight: 600;
|
|
border-radius: 8px 8px 0 0;
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
/* ------------------ Main Title & Status ------------------ */
|
|
.main-title-container {
|
|
padding: 0 0 1rem 0; /* Space below the main title */
|
|
}
|
|
.main-title-container h1 {
|
|
font-size: 1.75rem; /* Reduced size */
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 0.7rem; /* Smaller badge */
|
|
padding: 0.3em 0.7em;
|
|
border-radius: 12px;
|
|
}
|
|
.bg-scheduled { background-color: #00636e !important; color: white !important;}
|
|
.bg-completed { background-color: #198754 !important; color: white !important;}
|
|
.bg-waiting { background-color: #ffc107 !important; color: var(--kaauh-primary-text) !important;}
|
|
.bg-started { background-color: var(--kaauh-teal) !important; color: white !important;}
|
|
.bg-ended { background-color: var(--kaauh-danger) !important; color: white !important;}
|
|
|
|
/* ------------------ Detail Row & Content Styles (Made Smaller) ------------------ */
|
|
|
|
.detail-section h2, .card h2 {
|
|
color: var(--kaauh-teal-dark);
|
|
font-weight: 700;
|
|
font-size: 1.25rem; /* Reduced size */
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
.detail-row-simple {
|
|
display: flex;
|
|
padding: 0.4rem 0; /* Reduced vertical padding */
|
|
border-bottom: 1px dashed var(--kaauh-border);
|
|
font-size: 0.85rem; /* Smaller text */
|
|
}
|
|
.detail-label-simple {
|
|
font-weight: 600;
|
|
color: var(--kaauh-teal-dark);
|
|
flex-basis: 40%;
|
|
}
|
|
.detail-value-simple {
|
|
color: var(--kaauh-primary-text);
|
|
font-weight: 500;
|
|
flex-basis: 60%;
|
|
}
|
|
|
|
/* ------------------ Join Info & Copy Button ------------------ */
|
|
|
|
.btn-primary-teal {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
padding: 0.6rem 1.2rem;
|
|
font-size: 0.95rem; /* Slightly smaller button */
|
|
border-radius: 6px;
|
|
color: white; /* Ensure text color is white for teal primary */
|
|
}
|
|
.btn-primary-teal:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
}
|
|
|
|
/* Added Danger Button Style for main delete */
|
|
.btn-danger-red {
|
|
background-color: var(--kaauh-danger);
|
|
border-color: var(--kaauh-danger);
|
|
color: white;
|
|
padding: 0.6rem 1.2rem;
|
|
font-size: 0.95rem;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
}
|
|
.btn-danger-red:hover {
|
|
background-color: #c82333;
|
|
border-color: #bd2130;
|
|
}
|
|
.btn-secondary-back {
|
|
/* Subtle Back Button */
|
|
background-color: transparent;
|
|
border: none;
|
|
color: var(--kaauh-secondary-text);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
transition: color 0.2s;
|
|
}
|
|
.btn-secondary-back:hover {
|
|
color: var(--kaauh-teal);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.join-url-display {
|
|
background-color: white;
|
|
border: 1px solid var(--kaauh-border);
|
|
padding: 0.5rem; /* Reduced padding */
|
|
font-size: 0.85rem; /* Smaller text */
|
|
}
|
|
|
|
.btn-copy-simple {
|
|
padding: 0.5rem 0.75rem;
|
|
background-color: var(--kaauh-teal-dark);
|
|
border: none;
|
|
color: white;
|
|
border-radius: 4px;
|
|
}
|
|
.btn-copy-simple:hover {
|
|
background-color: var(--kaauh-teal);
|
|
}
|
|
|
|
/* ------------------ Simple Table Styles ------------------ */
|
|
.simple-table {
|
|
width: 100%;
|
|
margin-top: 0.5rem;
|
|
border-collapse: collapse;
|
|
}
|
|
.simple-table th {
|
|
background-color: var(--kaauh-teal-light);
|
|
color: var(--kaauh-teal-dark);
|
|
font-weight: 700;
|
|
padding: 8px 12px; /* Reduced padding */
|
|
border: 1px solid var(--kaauh-border);
|
|
font-size: 0.8rem; /* Smaller table header text */
|
|
}
|
|
.simple-table td {
|
|
padding: 8px 12px; /* Reduced padding */
|
|
border: 1px solid var(--kaauh-border);
|
|
background-color: white;
|
|
font-size: 0.85rem; /* Smaller table body text */
|
|
}
|
|
|
|
/* ------------------ Comment Specific Styles ------------------ */
|
|
.comment-item {
|
|
border: 1px solid var(--kaauh-border);
|
|
background-color: var(--kaauh-gray-light);
|
|
border-radius: 6px;
|
|
}
|
|
/* Style for in-page edit button */
|
|
.btn-edit-comment {
|
|
background-color: transparent;
|
|
border: 1px solid var(--kaauh-teal);
|
|
color: var(--kaauh-teal);
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
}
|
|
.btn-edit-comment:hover {
|
|
background-color: var(--kaauh-teal-light);
|
|
}
|
|
|
|
</style>
|
|
{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
|
|
{# --- TOP BAR / BACK BUTTON & ACTIONS (EDIT/DELETE) --- #}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
{# Back Button #}
|
|
<a href="{% url 'list_meetings' %}" class="btn btn-secondary-back">
|
|
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Meetings" %}
|
|
</a>
|
|
|
|
{# Edit and Delete Buttons #}
|
|
<div class="d-flex gap-2">
|
|
<a href="{% url 'update_meeting' meeting.slug %}" class="btn btn-primary-teal btn-sm">
|
|
<i class="fas fa-edit me-1"></i> {% trans "Edit Meeting" %}
|
|
</a>
|
|
{# DELETE MEETING FORM #}
|
|
<form method="post" action="{% url 'delete_meeting' meeting.slug %}" style="display: inline;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-danger-red btn-sm" onclick="return confirm('{% trans "Are you sure you want to delete this meeting? This action is permanent." %}')">
|
|
<i class="fas fa-trash-alt me-1"></i> {% trans "Delete Meeting" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{# ========================================================= #}
|
|
{# --- MAIN TITLE AT TOP --- #}
|
|
{# ========================================================= #}
|
|
<div class="main-title-container mb-4">
|
|
<h1 class="text-start" style="color: var(--kaauh-teal-dark);">
|
|
<i class="fas fa-video me-2" style="color: var(--kaauh-teal);"></i>
|
|
{{ meeting.topic|default:"[Meeting Topic N/A]" }}
|
|
<span class="status-badge bg-{{ meeting.status|lower|default:'bg-secondary' }} ms-3">
|
|
{{ meeting.status|title|default:'N/A' }}
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{# ========================================================= #}
|
|
{# --- SECTION 1: INTERVIEW & CONNECTION CARDS SIDE BY SIDE --- #}
|
|
{# ========================================================= #}
|
|
<div class="row g-4 mb-5 align-items-stretch">
|
|
|
|
{# --- LEFT HALF: INTERVIEW DETAIL CARD --- #}
|
|
<div class="col-lg-6">
|
|
<div class="p-3 bg-white rounded shadow-sm h-100 d-flex flex-column">
|
|
<h2 class="text-start"><i class="fas fa-briefcase me-2"></i> {% trans "Interview Detail" %}</h2>
|
|
<div class="detail-row-group flex-grow-1">
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Job Title" %}:</div><div class="detail-value-simple">{{ meeting.get_job.title|default:"N/A" }}</div></div>
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Candidate Name" %}:</div><div class="detail-value-simple"><a href="">{{ meeting.get_candidate.name|default:"N/A" }}</a></div></div>
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Candidate Email" %}:</div><div class="detail-value-simple"><a href="">{{ meeting.get_candidate.email|default:"N/A" }}</a></div></div>
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Job Type" %}:</div><div class="detail-value-simple">{{ meeting.get_job.job_type|default:"N/A" }}</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- RIGHT HALF: CONNECTION DETAILS CARD --- #}
|
|
<div class="col-lg-6">
|
|
<div class="p-3 bg-white rounded shadow-sm h-100 d-flex flex-column">
|
|
<h2 class="text-start"><i class="fas fa-info-circle me-2"></i> {% trans "Connection Details" %}</h2>
|
|
<div class="detail-row-group flex-grow-1">
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Date & Time" %}:</div><div class="detail-value-simple">{{ meeting.start_time|date:"M d, Y H:i"|default:"N/A" }}</div></div>
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Duration" %}:</div><div class="detail-value-simple">{{ meeting.duration|default:"N/A" }} {% trans "minutes" %}</div></div>
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Meeting ID" %}:</div><div class="detail-value-simple">{{ meeting.meeting_id|default:"N/A" }}</div></div>
|
|
<div class="detail-row-simple"><div class="detail-label-simple">{% trans "Host Email" %}:</div><div class="detail-value-simple">{{ meeting.host_email|default:"N/A" }}</div></div>
|
|
{% if meeting.join_url %}
|
|
<div class="join-url-container pt-3">
|
|
<div id="copy-message" class="text-white rounded px-2 py-1 small fw-bold mb-2 text-center" style="opacity: 0; transition: opacity 0.3s; position: absolute; right: 0; top: 5px; background-color: var(--kaauh-success); z-index: 10;">{% trans "Copied!" %}</div>
|
|
|
|
<div class="join-url-display d-flex justify-content-between align-items-center position-relative">
|
|
<div class="text-truncate me-2">
|
|
<strong>{% trans "Join URL" %}:</strong>
|
|
<span id="meeting-join-url">{{ meeting.join_url }}</span>
|
|
</div>
|
|
<button class="btn-copy-simple ms-2 flex-shrink-0" onclick="copyLink()" title="{% trans 'Copy URL' %}">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{# ========================================================= #}
|
|
{# --- SECTION 2: PERSONNEL TABLES --- #}
|
|
{# ========================================================= #}
|
|
<div class="row g-4 mt-1 mb-5">
|
|
|
|
|
|
{# --- PARTICIPANTS TABLE --- #}
|
|
<div class="col-lg-12">
|
|
<div class="p-3 bg-white rounded shadow-sm">
|
|
<h2 class="text-start"><i class="fas fa-users-cog me-2"></i> {% trans "Assigned Participants" %}</h2>
|
|
|
|
<table class="simple-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "Role/Designation" %}</th>
|
|
<th>{% trans "Email" %}</th>
|
|
<th>{% trans "Phone Number" %}</th>
|
|
<th>{% trans "Source Type" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for participant in meeting.get_participants %}
|
|
<tr>
|
|
<td>{{participant.name}}</td>
|
|
<td>{{participant.designation}}</td>
|
|
<td>{{participant.email}}</td>
|
|
<td>{{participant.phone}}</td>
|
|
<td>{% trans "External Participants" %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% for user in meeting.get_users %}
|
|
<tr>
|
|
<td>{{user.get_full_name}}</td>
|
|
<td>Admin</td>
|
|
<td>{{user.email}}</td>
|
|
<td>{{user.phone}}</td>
|
|
<td>{% trans "System User" %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ========================================================= #}
|
|
{# --- SECTION 3: COMMENTS (CORRECTED) --- #}
|
|
{# ========================================================= #}
|
|
<div class="row g-4 mt-1">
|
|
|
|
<div class="col-lg-12">
|
|
<div class="card" id="comments-card" style="height: 100%;">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0" style="color: var(--kaauh-teal-dark);">
|
|
<i class="fas fa-comments me-2"></i>
|
|
{% trans "Comments" %} ({% if meeting.comments %}{{ meeting.comments.count }}{% else %}0{% endif %})
|
|
</h5>
|
|
</div>
|
|
<div class="card-body overflow-auto">
|
|
|
|
{# 1. COMMENT DISPLAY & IN-PAGE EDIT FORMS #}
|
|
<div id="comment-section" class="mb-4">
|
|
{% if meeting.comments.all %}
|
|
{% for comment in meeting.comments.all|dictsortreversed:"created_at" %}
|
|
|
|
<div class="comment-item mb-3 p-3">
|
|
|
|
{# Read-Only Comment View #}
|
|
<div id="comment-view-{{ comment.pk }}">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<div class="comment-metadata" style="font-size: 0.9rem;">
|
|
<strong>{{ comment.author.get_full_name|default:comment.author.username }}</strong>
|
|
<span class="text-muted small ms-2">{{ comment.created_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
|
|
{% if comment.author == user or user.is_staff %}
|
|
<div class="comment-actions d-flex align-items-center gap-1">
|
|
{# Edit Button: Toggles the hidden form #}
|
|
<button type="button" class="btn btn-edit-comment py-0 px-1" onclick="toggleCommentEdit('{{ comment.pk }}')" id="edit-btn-{{ comment.pk }}" title="{% trans 'Edit Comment' %}">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
|
|
{# Delete Form: Submits a POST request #}
|
|
<form method="post" action="{% url 'delete_meeting_comment' meeting.slug comment.pk %}" style="display: inline;" id="delete-form-{{ comment.pk }}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-outline-danger py-0 px-1" title="{% trans 'Delete Comment' %}" onclick="return confirm('{% trans "Are you sure you want to delete this comment?" %}')">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<p class="mb-0 comment-content" style="font-size: 0.85rem; white-space: pre-wrap;">{{ comment.content|linebreaksbr }}</p>
|
|
</div>
|
|
|
|
{# Hidden Edit Form #}
|
|
<div id="comment-edit-form-{{ comment.pk }}" style="display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--kaauh-border);">
|
|
<form method="POST" action="{% url 'edit_meeting_comment' meeting.slug comment.pk %}" id="form-{{ comment.pk }}">
|
|
{% csrf_token %}
|
|
<div class="mb-2">
|
|
<label for="id_content_{{ comment.pk }}" class="form-label small">{% trans "Edit Comment" %}</label>
|
|
{# NOTE: The textarea name must match your Comment model field (usually 'content') #}
|
|
<textarea name="content" id="id_content_{{ comment.pk }}" rows="3" class="form-control" required>{{ comment.content }}</textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-sm btn-success me-2">
|
|
<i class="fas fa-save me-1"></i> {% trans "Save Changes" %}
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" onclick="toggleCommentEdit('{{ comment.pk }}')">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-muted">{% trans "No comments yet. Be the first to comment!" %}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
{# 2. NEW COMMENT SUBMISSION (Remains the same) #}
|
|
<h6 class="mb-3" style="color: var(--kaauh-teal-dark);">{% trans "Add a New Comment" %}</h6>
|
|
{% if user.is_authenticated %}
|
|
<form method="POST" action="{% url 'add_meeting_comment' meeting.slug %}">
|
|
{% csrf_token %}
|
|
{% if comment_form %}
|
|
{{ comment_form.as_p }}
|
|
{% else %}
|
|
<div class="mb-3">
|
|
<label for="id_content" class="form-label small">{% trans "Comment" %}</label>
|
|
<textarea name="content" id="id_content" rows="3" class="form-control" required></textarea>
|
|
</div>
|
|
{% endif %}
|
|
<button type="submit" class="btn btn-primary-teal btn-sm mt-2">
|
|
<i class="fas fa-paper-plane me-1"></i> {% trans "Submit Comment" %}
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<p class="text-muted small">{% trans "You must be logged in to add a comment." %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
{% block customJS %}
|
|
<script>
|
|
// --- COMMENT EDITING FUNCTION ---
|
|
function toggleCommentEdit(commentPk) {
|
|
const viewDiv = document.getElementById(`comment-view-${commentPk}`);
|
|
const editFormDiv = document.getElementById(`comment-edit-form-${commentPk}`);
|
|
const editButton = document.getElementById(`edit-btn-${commentPk}`);
|
|
const deleteForm = document.getElementById(`delete-form-${commentPk}`);
|
|
|
|
if (viewDiv.style.display !== 'none') {
|
|
// Switch to Edit Mode
|
|
viewDiv.style.display = 'none';
|
|
editFormDiv.style.display = 'block';
|
|
if (editButton) editButton.style.display = 'none'; // Hide edit button
|
|
if (deleteForm) deleteForm.style.display = 'none'; // Hide delete button
|
|
} else {
|
|
// Switch back to View Mode (Cancel)
|
|
viewDiv.style.display = 'block';
|
|
editFormDiv.style.display = 'none';
|
|
if (editButton) editButton.style.display = 'inline-block'; // Show edit button
|
|
if (deleteForm) deleteForm.style.display = 'inline'; // Show delete button
|
|
}
|
|
}
|
|
|
|
// --- COPY LINK FUNCTION ---
|
|
// CopyLink function implementation (slightly improved for message placement)
|
|
function copyLink() {
|
|
const urlElement = document.getElementById('meeting-join-url');
|
|
const displayContainer = urlElement.closest('.join-url-display');
|
|
const messageElement = document.getElementById('copy-message');
|
|
const textToCopy = urlElement.textContent || urlElement.innerText;
|
|
|
|
clearTimeout(window.copyMessageTimeout);
|
|
|
|
function showMessage(success) {
|
|
messageElement.textContent = success ? '{% trans "Copied!" %}' : '{% trans "Copy Failed." %}';
|
|
messageElement.style.backgroundColor = success ? 'var(--kaauh-success)' : 'var(--kaauh-danger)';
|
|
messageElement.style.opacity = '1';
|
|
|
|
// Position the message relative to the display container
|
|
const rect = displayContainer.getBoundingClientRect();
|
|
// Note: This positioning logic relies on the .join-url-container being position:relative or position:absolute
|
|
messageElement.style.left = (rect.width / 2) - (messageElement.offsetWidth / 2) + 'px';
|
|
messageElement.style.top = '-35px';
|
|
|
|
window.copyMessageTimeout = setTimeout(() => {
|
|
messageElement.style.opacity = '0';
|
|
}, 2000);
|
|
}
|
|
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
showMessage(true);
|
|
}).catch(err => {
|
|
console.error('Could not copy text: ', err);
|
|
fallbackCopyTextToClipboard(textToCopy, showMessage);
|
|
});
|
|
} else {
|
|
fallbackCopyTextToClipboard(textToCopy, showMessage);
|
|
}
|
|
}
|
|
|
|
function fallbackCopyTextToClipboard(text, callback) {
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = text;
|
|
|
|
textArea.style.top = "0";
|
|
textArea.style.left = "0";
|
|
textArea.style.position = "fixed";
|
|
|
|
document.body.appendChild(textArea);
|
|
textArea.focus();
|
|
textArea.select();
|
|
|
|
let success = false;
|
|
try {
|
|
success = document.execCommand('copy');
|
|
} catch (err) {
|
|
console.error('Fallback: Oops, unable to copy', err);
|
|
}
|
|
|
|
document.body.removeChild(textArea);
|
|
callback(success);
|
|
}
|
|
</script>
|
|
{% endblock %}
|