{% extends "base.html" %}

{% block content %}
<form method="post" id="jobForm" class="mb-5">
    {% csrf_token %}

    <!-- Basic Information Section -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-info-circle"></i> Basic Information</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="mb-3">
                        <label for="{{ form.title.id_for_label }}" class="form-label">Job Title <span class="text-danger">*</span></label>
                        {{ form.title }}
                        {% if form.title.errors %}
                            <div class="text-danger mt-1">{{ form.title.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="{{ form.job_type.id_for_label }}" class="form-label">Job Type <span class="text-danger">*</span></label>
                        {{ form.job_type }}
                        {% if form.job_type.errors %}
                            <div class="text-danger mt-1">{{ form.job_type.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.department.id_for_label }}" class="form-label">Department</label>
                        {{ form.department }}
                        {% if form.department.errors %}
                            <div class="text-danger mt-1">{{ form.department.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.position_number.id_for_label }}" class="form-label">Position Number</label>
                        {{ form.position_number }}
                        {% if form.position_number.errors %}
                            <div class="text-danger mt-1">{{ form.position_number.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.workplace_type.id_for_label }}" class="form-label">Workplace Type <span class="text-danger">*</span></label>
                        {{ form.workplace_type }}
                        {% if form.workplace_type.errors %}
                            <div class="text-danger mt-1">{{ form.workplace_type.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.created_by.id_for_label }}" class="form-label">Created By</label>
                        {{ form.created_by }}
                        {% if form.created_by.errors %}
                            <div class="text-danger mt-1">{{ form.created_by.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Location Section -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-map-marker-alt"></i> Location</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="{{ form.location_city.id_for_label }}" class="form-label">City</label>
                        {{ form.location_city }}
                        {% if form.location_city.errors %}
                            <div class="text-danger mt-1">{{ form.location_city.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="{{ form.location_state.id_for_label }}" class="form-label">State/Province</label>
                        {{ form.location_state }}
                        {% if form.location_state.errors %}
                            <div class="text-danger mt-1">{{ form.location_state.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="{{ form.location_country.id_for_label }}" class="form-label">Country</label>
                        {{ form.location_country }}
                        {% if form.location_country.errors %}
                            <div class="text-danger mt-1">{{ form.location_country.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Job Details Section -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-file-alt"></i> Job Details</h5>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label for="{{ form.description.id_for_label }}" class="form-label">Job Description <span class="text-danger">*</span></label>
                {{ form.description }}
                {% if form.description.errors %}
                    <div class="text-danger mt-1">{{ form.description.errors }}</div>
                {% endif %}
            </div>

            <div class="mb-3">
                <label for="{{ form.qualifications.id_for_label }}" class="form-label">Qualifications and Requirements</label>
                {{ form.qualifications }}
                {% if form.qualifications.errors %}
                    <div class="text-danger mt-1">{{ form.qualifications.errors }}</div>
                {% endif %}
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.salary_range.id_for_label }}" class="form-label">Salary Range</label>
                        {{ form.salary_range }}
                        {% if form.salary_range.errors %}
                            <div class="text-danger mt-1">{{ form.salary_range.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.benefits.id_for_label }}" class="form-label">Benefits</label>
                        {{ form.benefits }}
                        {% if form.benefits.errors %}
                            <div class="text-danger mt-1">{{ form.benefits.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Application Information Section -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-file-signature"></i> Application Information</h5>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label for="{{ form.application_url.id_for_label }}" class="form-label">Application URL <span class="text-danger">*</span></label>
                {{ form.application_url }}
                {% if form.application_url.errors %}
                    <div class="text-danger mt-1">{{ form.application_url.errors }}</div>
                {% endif %}
                <div class="form-text">Full URL where candidates will apply</div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.application_deadline.id_for_label }}" class="form-label">Application Deadline</label>
                        {{ form.application_deadline }}
                        {% if form.application_deadline.errors %}
                            <div class="text-danger mt-1">{{ form.application_deadline.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.start_date.id_for_label }}" class="form-label">Desired Start Date</label>
                        {{ form.start_date }}
                        {% if form.start_date.errors %}
                            <div class="text-danger mt-1">{{ form.start_date.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label for="{{ form.application_instructions.id_for_label }}" class="form-label">Application Instructions</label>
                {{ form.application_instructions }}
                {% if form.application_instructions.errors %}
                    <div class="text-danger mt-1">{{ form.application_instructions.errors }}</div>
                {% endif %}
            </div>
        </div>
    </div>
     <!-- Post Reach -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-star"></i>Post Reach Field</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="{{ form.reporting_to.id_for_label }}" class="form-label">Hashtags</label>
                        {{ form.hash_tags }}
                        {% if form.hash_tags.errors %}
                            <div class="text-danger mt-1">{{ form.hash_tags.errors }}</div>
                        {% endif %}
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Internal Information Section -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-building"></i> Internal Information</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.reporting_to.id_for_label }}" class="form-label">Reports To</label>
                        {{ form.reporting_to }}
                        {% if form.reporting_to.errors %}
                            <div class="text-danger mt-1">{{ form.reporting_to.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="{{ form.open_positions.id_for_label }}" class="form-label">Open Positions</label>
                        {{ form.open_positions }}
                        {% if form.open_positions.errors %}
                            <div class="text-danger mt-1">{{ form.open_positions.errors }}</div>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Form Actions -->
    <div class="d-flex justify-content-between">
        <a href="{% url 'job_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Cancel
        </a>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Create Job
        </button>
    </div>
</form>

{% endblock %}