{% extends 'base.html' %}
{% load static %}

{% block title %}Application Details - ICTAZ Jobs Portal{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row">
        <!-- Application Details -->
        <div class="col-lg-8">
            <div class="card slide-up">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-file-alt me-2"></i>Application Details
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Job Information -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">Job Position</h6>
                        <div class="p-3 bg-light rounded">
                            <h5 class="mb-2">{{ application.job.title }}</h5>
                            <div class="job-meta text-muted">
                                <span class="me-3">
                                    <i class="fas fa-building me-1"></i>{{ application.job.posted_by.organization|default:"ICTAZ Partner" }}
                                </span>
                                <span class="me-3">
                                    <i class="fas fa-map-marker-alt me-1"></i>{{ application.job.location }}
                                </span>
                                <span>
                                    <i class="fas fa-calendar-alt me-1"></i>{{ application.job.application_deadline|date:"M d, Y" }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Applicant Information -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">Applicant Information</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">Full Name</label>
                                <div class="fw-bold">{{ application.applicant_name }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">Email Address</label>
                                <div>{{ application.applicant_email }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">Phone Number</label>
                                <div>{{ application.applicant_phone }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">ICTAZ Membership</label>
                                <div>
                                    <span class="badge bg-success">
                                        <i class="fas fa-star me-1"></i>Member: {{ application.membership_number }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Cover Letter -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">Cover Letter</h6>
                        <div class="p-3 border rounded bg-light">
                            {{ application.cover_letter|linebreaks }}
                        </div>
                    </div>

                    <!-- Documents -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">Documents</h6>
                        <div class="row">
                            {% if application.resume %}
                                <div class="col-md-6 mb-3">
                                    <div class="p-3 border rounded text-center">
                                        <i class="fas fa-file-pdf fa-2x text-danger mb-2"></i>
                                        <div class="fw-bold">Resume</div>
                                        <a href="{% url 'jobs:download_resume' application.pk %}" class="btn btn-outline-primary btn-sm mt-2">
                                            <i class="fas fa-download me-1"></i>Download
                                        </a>
                                    </div>
                                </div>
                            {% endif %}
                            {% if application.additional_documents %}
                                <div class="col-md-6 mb-3">
                                    <div class="p-3 border rounded text-center">
                                        <i class="fas fa-paperclip fa-2x text-info mb-2"></i>
                                        <div class="fw-bold">Additional Documents</div>
                                        <a href="{% url 'jobs:download_documents' application.pk %}" class="btn btn-outline-primary btn-sm mt-2">
                                            <i class="fas fa-download me-1"></i>Download
                                        </a>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Admin Notes -->
                    {% if user.is_admin or user.is_stakeholder and application.job.posted_by == user %}
                        {% if application.admin_notes %}
                            <div class="mb-4">
                                <h6 class="text-primary mb-3">Admin Notes</h6>
                                <div class="p-3 border rounded bg-warning bg-opacity-10">
                                    {{ application.admin_notes|linebreaks }}
                                </div>
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Status Sidebar -->
        <div class="col-lg-4">
            <div class="card slide-up">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Application Status
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="badge bg-primary fs-6 p-3">
                            <i class="fas fa-paper-plane me-2"></i>Application Received
                        </div>
                    </div>

                    <div class="small text-muted text-center">
                        <div class="mb-2">
                            <i class="fas fa-calendar-plus me-1"></i>
                            Submitted: {{ application.submitted_at|date:"M d, Y H:i" }}
                        </div>
                    </div>

                    <!-- Notes Form (Admin/Stakeholder only) -->
                    {% if user.is_admin or user.is_stakeholder and application.job.posted_by == user %}
                        <hr>
                        <form method="post" action="{% url 'jobs:application_detail' application.pk %}">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label class="form-label">Admin Notes</label>
                                <textarea name="admin_notes" class="form-control" rows="3" placeholder="Add notes about this application...">{{ application.admin_notes }}</textarea>
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm w-100">
                                <i class="fas fa-save me-2"></i>Update Notes
                            </button>
                        </form>
                    {% endif %}
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mt-4 slide-up">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-tools me-2"></i>Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'jobs:job_detail' application.job.pk %}" class="btn btn-outline-primary">
                            <i class="fas fa-eye me-1"></i>View Job Posting
                        </a>
                        {% if user.is_admin %}
                        <a href="#" class="btn btn-success">
                            <i class="fas fa-envelope me-1"></i>Contact Applicant
                        </a>
                        {% endif %}
                        {% if user.is_admin or user.is_stakeholder and application.job.posted_by == user %}
                            <a href="{% url 'jobs:job_applications' application.job.pk %}" class="btn btn-outline-info btn-sm">
                                <i class="fas fa-list me-2"></i>All Applications
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Back Button -->
    <div class="row mt-4">
        <div class="col-12">
            {% if user.is_admin or user.is_stakeholder %}
                <a href="{% url 'jobs:job_applications' application.job.pk %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Applications
                </a>
            {% else %}
                <a href="{% url 'jobs:my_applications' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to My Applications
                </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}