kaauh_ats/templates/recruitment/interview_detail.html

<!-- templates/recruitment/interview_detail.html -->
{% extends "base.html" %}
{% load static %}

{% block extra_css %}
<style>
    :root {
        --calendar-color: #00636e;
    }

    .detail-header {
        background-color: var(--calendar-color);
        color: white;
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1rem;
    }

    .detail-card {
        border-left: 4px solid var(--calendar-color);
    }

    .status-badge {
        font-size: 0.875rem;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
    }

    .status-scheduled {
        background-color: #e3f2fd;
        color: #0d47a1;
    }

    .status-confirmed {
        background-color: #e8f5e9;
        color: #1b5e20;
    }

    .status-cancelled {
        background-color: #ffebee;
        color: #b71c1c;
    }

    .status-completed {
        background-color: #f5f5f5;
        color: #424242;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="detail-header">
        <div class="d-flex justify-content-between align-items-center">
            <h1 class="h3 mb-0">Interview Details</h1>
            <div>
                <span class="h5">{{ job.title }}</span>
            </div>
        </div>
    </div>

    <div class="card detail-card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h5>Candidate Information</h5>
                    <table class="table table-borderless">
                        <tr>
                            <td><strong>Name:</strong></td>
                            <td>{{ interview.candidate.name }}</td>
                        </tr>
                        <tr>
                            <td><strong>Email:</strong></td>
                            <td>{{ interview.candidate.email }}</td>
                        </tr>
                        <tr>
                            <td><strong>Phone:</strong></td>
                            <td>{{ interview.candidate.phone|default:"Not provided" }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h5>Interview Details</h5>
                    <table class="table table-borderless">
                        <tr>
                            <td><strong>Date:</strong></td>
                            <td>{{ interview.interview_date|date:"l, F j, Y" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Time:</strong></td>
                            <td>{{ interview.interview_time|time:"g:i A" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Status:</strong></td>
                            <td>
                                <span class="status-badge status-{{ interview.status }}">
                                    {{ interview.status|title }}
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            {% if interview.zoom_meeting %}
            <div class="mt-4">
                <h5>Meeting Information</h5>
                <table class="table table-borderless">
                    <tr>
                        <td><strong>Meeting ID:</strong></td>
                        <td>{{ interview.zoom_meeting.meeting_id }}</td>
                    </tr>
                    <tr>
                        <td><strong>Topic:</strong></td>
                        <td>{{ interview.zoom_meeting.topic }}</td>
                    </tr>
                    <tr>
                        <td><strong>Duration:</strong></td>
                        <td>{{ interview.zoom_meeting.duration }} minutes</td>
                    </tr>
                    <tr>
                        <td><strong>Join URL:</strong></td>
                        <td><a href="{{ interview.zoom_meeting.join_url }}" target="_blank">{{ interview.zoom_meeting.join_url }}</a></td>
                    </tr>
                </table>
            </div>
            {% endif %}

            <div class="mt-4">
                <div class="d-flex gap-2">
                    <a href="{% url 'interview_calendar' slug=job.slug %}" class="btn btn-secondary">
                        <i class="fas fa-calendar"></i> Back to Calendar
                    </a>
                    {% if interview.status == 'scheduled' %}
                    <button class="btn btn-success">
                        <i class="fas fa-check"></i> Confirm Interview
                    </button>
                    {% endif %}
                    {% if interview.status != 'cancelled' and interview.status != 'completed' %}
                    <button class="btn btn-danger">
                        <i class="fas fa-times"></i> Cancel Interview
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}