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

{% block content %}
<div class="container-fluid p-4">
    <div class="card shadow-sm border-0" style="border-radius: 12px;">
        <div class="card-header bg-white border-0" style="border-radius: 12px 12px 0 0;">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="fw-bold" style="color: #0e2e63;">
                        <i class="fas {% if job %}fa-edit{% else %}fa-plus-circle{% endif %} me-2"></i>
                        {% if job %}Edit{% else %}Post New{% endif %} Job
                    </h3>
                    <p class="text-muted small">{% if job %}Update job details{% else %}Create a new job posting{% endif %}</p>
                </div>
                <a href="{% url 'job_admin' %}" class="btn btn-light">
                    <i class="fas fa-arrow-left me-1"></i> Back
                </a>
            </div>
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Job Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ job.title|default:'' }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Slug</label>
                        <input type="text" name="slug" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ job.slug|default:'' }}" placeholder="Leave blank to auto-generate">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Category</label>
                        <select name="category" class="form-select" style="border-radius: 8px; padding: 10px;">
                            <option value="">Select Category</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" {% if job.category.id == category.id %}selected{% endif %}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Job Type <span class="text-danger">*</span></label>
                        <select name="job_type" class="form-select" style="border-radius: 8px; padding: 10px;" required>
                            <option value="full_time" {% if job.job_type == 'full_time' %}selected{% endif %}>Full Time</option>
                            <option value="part_time" {% if job.job_type == 'part_time' %}selected{% endif %}>Part Time</option>
                            <option value="contract" {% if job.job_type == 'contract' %}selected{% endif %}>Contract</option>
                            <option value="internship" {% if job.job_type == 'internship' %}selected{% endif %}>Internship</option>
                            <option value="remote" {% if job.job_type == 'remote' %}selected{% endif %}>Remote</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Location <span class="text-danger">*</span></label>
                        <input type="text" name="location" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ job.location|default:'' }}" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Experience</label>
                        <input type="text" name="experience" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ job.experience|default:'' }}" placeholder="e.g., 2-3 years">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Salary Range</label>
                        <input type="text" name="salary" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ job.salary|default:'' }}" placeholder="e.g., $50,000 - $70,000">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Description <span class="text-danger">*</span></label>
                    <textarea name="description" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 120px;" required>{{ job.description|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Requirements <span class="text-danger">*</span></label>
                    <textarea name="requirements" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 120px;" required>{{ job.requirements|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Responsibilities</label>
                    <textarea name="responsibilities" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 100px;">{{ job.responsibilities|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Benefits</label>
                    <textarea name="benefits" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 100px;">{{ job.benefits|default:'' }}</textarea>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Status <span class="text-danger">*</span></label>
                        <select name="status" class="form-select" style="border-radius: 8px; padding: 10px;" required>
                            <option value="draft" {% if job.status == 'draft' %}selected{% endif %}>Draft</option>
                            <option value="published" {% if job.status == 'published' %}selected{% endif %}>Published</option>
                            <option value="closed" {% if job.status == 'closed' %}selected{% endif %}>Closed</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Closing Date</label>
                        <input type="date" name="closing_date" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ job.closing_date|date:'Y-m-d'|default:'' }}">
                    </div>
                </div>

                <div class="mt-4 pt-3 border-top">
                    <button type="submit" class="btn" style="background: #0e2e63; color: #fff; padding: 10px 40px; border-radius: 8px;">
                        <i class="fas {% if job %}fa-save{% else %}fa-plus{% endif %} me-2"></i>
                        {% if job %}Update Job{% else %}Create Job{% endif %}
                    </button>
                    <a href="{% url 'job_admin' %}" class="btn btn-light" style="padding: 10px 30px; border-radius: 8px;">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}