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

{% block title %}{{ job.title }} - ICTAZ Jobs Portal{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row">
        <!-- Job Details -->
        <div class="col-lg-8">
            <div class="card slide-up">
                <div class="card-body">
                    <!-- Job Header -->
                    <div class="d-flex justify-content-between align-items-start mb-4">
                        <div>
                            <h1 class="h2 mb-2">{{ job.title }}</h1>
                            <div class="job-meta text-muted">
                                <div class="mb-1">
                                    <i class="fas fa-building me-2"></i>{{ job.posted_by.organization|default:"ICTAZ Partner" }}
                                </div>
                                <div class="mb-1">
                                    <i class="fas fa-map-marker-alt me-2"></i>{{ job.location }}
                                </div>
                                <div class="mb-1">
                                    <i class="fas fa-calendar-alt me-2"></i>Posted {{ job.created_at|timesince }} ago
                                </div>
                            </div>
                        </div>
                        <div class="text-end">
                            {% if job.is_active %}
                                <span class="badge bg-success fs-6">
                                    <i class="fas fa-check-circle me-1"></i>Active
                                </span>
                            {% else %}
                                <span class="badge bg-danger fs-6">
                                    <i class="fas fa-times-circle me-1"></i>Closed
                                </span>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Job Details Grid -->
                    <div class="row mb-4">
                        <div class="col-md-3 mb-3">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">Employment Type</small>
                                <strong>{{ job.get_employment_type_display }}</strong>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">Experience Level</small>
                                <strong>{{ job.get_experience_level_display }}</strong>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">Deadline</small>
                                <strong>{{ job.application_deadline|date:"M d, Y" }}</strong>
                            </div>
                        </div>
                        {% if job.salary_range %}
                        <div class="col-md-3 mb-3">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">Salary Range</small>
                                <strong>{{ job.salary_range }}</strong>
                            </div>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Job Description -->
                    <div class="mb-4">
                        <h3 class="h4 mb-3">
                            <i class="fas fa-info-circle me-2 text-primary"></i>Job Description
                        </h3>
                        <div class="job-description">
                            {{ job.description|linebreaks }}
                        </div>
                    </div>

                    <!-- Job Requirements -->
                    <div class="mb-4">
                        <h3 class="h4 mb-3">
                            <i class="fas fa-list-check me-2 text-primary"></i>Requirements
                        </h3>
                        <div class="job-requirements">
                            {{ job.requirements|linebreaks }}
                        </div>
                    </div>

                    <!-- Application Stats -->
                    <div class="alert alert-info">
                        <i class="fas fa-users me-2"></i>
                        <strong>{{ job.application_count }}</strong> application{{ job.application_count|pluralize }} received so far
                    </div>
                </div>
            </div>
        </div>

        <!-- Application Sidebar -->
        <div class="col-lg-4">
            <div class="card slide-up">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-paper-plane me-2"></i>Apply for this Position
                    </h5>
                </div>
                <div class="card-body">
                    {% if user.is_authenticated %}
                        {% if already_applied %}
                            <div class="alert alert-info">
                                <i class="fas fa-check-circle"></i>
                                You have already applied for this position.
                            </div>
                        {% elif can_apply %}
                            <a href="{% url 'jobs:apply' job.pk %}" class="btn btn-primary btn-lg w-100 mb-3">
                                <i class="fas fa-paper-plane"></i> Apply Now
                            </a>
                        {% else %}
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                                This position is no longer accepting applications.
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="alert alert-info">
                            <i class="fas fa-sign-in-alt"></i>
                            Please <a href="{% url 'accounts:login' %}?next={{ request.path }}" class="alert-link">login</a> 
                            or <a href="{% url 'accounts:register' %}" class="alert-link">register</a> to apply for this position.
                        </div>
                    {% endif %}

                    <!-- Share Job -->
                    <hr>
                    <div class="text-center">
                        <h6 class="mb-3">Share this job</h6>
                        <div class="btn-group" role="group">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}" 
                               target="_blank" class="btn btn-outline-primary btn-sm">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri }}&text={{ job.title }}" 
                               target="_blank" class="btn btn-outline-info btn-sm">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri }}" 
                               target="_blank" class="btn btn-outline-primary btn-sm">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard()">
                                <i class="fas fa-link"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Similar Jobs -->
            <div class="card mt-4 slide-up">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-briefcase me-2"></i>Similar Opportunities
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center text-muted">
                        <i class="fas fa-search fa-2x mb-2"></i>
                        <p class="small">More opportunities coming soon!</p>
                        <a href="{% url 'jobs:job_list' %}" class="btn btn-outline-primary btn-sm">
                            Browse All Jobs
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Back to Jobs -->
    <div class="row mt-4">
        <div class="col-12">
            <a href="{% url 'jobs:job_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Job Listings
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function copyToClipboard() {
        navigator.clipboard.writeText(window.location.href).then(function() {
            // Show success message
            const btn = event.target.closest('button');
            const originalHTML = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check"></i>';
            btn.classList.add('btn-success');
            btn.classList.remove('btn-outline-secondary');
            
            setTimeout(() => {
                btn.innerHTML = originalHTML;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-secondary');
            }, 2000);
        });
    }
</script>
{% endblock %}