{% extends 'base.html' %}
{% load static %}
{% load tag_exists %}
{% block title %}
    {{ title }}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{% static 'vendor/bootstrap-select/css/bootstrap-select.min.css' %}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{% static 'css/select2-bootstrap.css' %}"/>
    <style>
        .bootstrap-select .dropdown-menu a {
            color: #000000;
        }
    </style>
{% endblock %}

{% block content %}

    <section class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h1 class="heading">Update position</h1>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    {% if form.errors %}
                        {% for field in form %}
                            {% for error in field.errors %}
                                <div class="alert alert-danger alert-dismissable">
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                    <strong>{{ field.label }}: {{ error|escape }}</strong>
                                </div>
                            {% endfor %}
                        {% endfor %}
                    {% endif %}
                    <form id="job-main-form" method="post" action="" class="job-add-form">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-lg-12">
                                <h4>Job details</h4>
                                <p class="text-muted text-small">Here should be posted information about the job you open.
                                    All information posted on the site must be true. The vacancy located by you will be checked by our moderators.
                                    Jobs that violate community rules will be removed without explanation and your account will be blocked. </p>
                                <hr>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 form-group">
                                <label for="title">Job Title</label>
                                <input id="title" name="title" type="text" class="form-control" value="{{ form.title.value|default_if_none:"" }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 form-group">
                                <label for="description">Job Description</label>
                                <textarea id="description" name="description" rows="5" style="min-height: 200px" class="form-control">{{ form.description.value|default_if_none:"" }}</textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 form-group">
                                <label for="salary">Salary(Leave empty if it's negotiable)</label>
                                <input id="salary" name="salary" type="number" min="1000" class="form-control" value="{{ form.salary.value|default_if_none:"" }}">
                            </div>
                            <div class="col-lg-6 form-group">
                                <label for="tags">Required skills</label>
                                <select class="js-select2 form-control" name="tags" style="border-radius: 0" multiple="multiple" data-placeholder="Select Tags">
                                    {% for tag in tags %}
                                        {% tag_exists tag.id form.tags.value as tag_already_exists %}
                                        <option value="{{ tag.id }}" {% if tag in job.tags.all or tag_already_exists %} selected {% endif %}>{{ tag.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 form-group">
                                <label for="type">Type</label>
                                <select id="type" name="type" placeholder="Choose job type" class="form-control">
                                    <option value="1" {% if form.type.value == "1" %} selected {% endif %}>Full time</option>
                                    <option value="2" {% if form.type.value == "2" %} selected {% endif %}>Part time</option>
                                    <option value="3" {% if form.type.value == "3" %} selected {% endif %}>Internship</option>
                                </select>
                            </div>
                            <div class="col-lg-6 form-group">
                                <label for="location">Location</label>
                                <input id="location" name="location" type="text" placeholder="e.g. Dhaka, Bangladesh"
                                       class="form-control" value="{{ form.location.value|default_if_none:"" }}">
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-lg-6 form-group">
                                <label for="category">Category</label>
                                <select id="category" name="category" class="form-control">
                                    <option value="web-design" {% if form.category.value == "web-design" %} selected {% endif %}>Web design</option>
                                    <option value="graphic-design" {% if form.category.value == "graphic-design" %} selected {% endif %}>Graphic design</option>
                                    <option value="web-development" {% if form.category.value == "web-development" %} selected {% endif %}>Web development</option>
                                    <option value="human-resource" {% if form.category.value == "human-resource" %} selected {% endif %}>Human Resources</option>
                                    <option value="support" {% if form.category.value == "support" %} selected {% endif %}>Support</option>
                                    <option value="android" {% if form.category.value == "android" %} selected {% endif %}>Android</option>
                                </select>
                            </div>
                            <div class="col-lg-6 form-group">
                                <label for="vacancy">Vacancy: </label>
                                <input id="vacancy" name="vacancy" type="number" min="1" class="form-control"
                                        value="{{ form.vacancy.value | default_if_none:"" }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-6 form-group">
                                <label for="apply_url">Apply URL <span
                                        class="note">(users will apply on your website)</span></label>
                                <input id="apply_url" type="url" class="form-control">
                            </div>
                            <div class="col-xl-6 form-group">
                                <label for="validity">Validity of the post</label>
                                <input id="validity" name="last_date" type="date" class="form-control" value="{{ form.last_date.value|default:job.last_date|date:"Y-m-d" }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <hr class="margin-bottom--big">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <h4>Company details</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 form-group">
                                <label for="company_name">Company name</label>
                                <input id="company_name" name="company_name" type="text" class="form-control" value="{{ form.company_name.value|default_if_none:"" }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 form-group">
                                {#<p class="text-danger">{{ form.company_description.errors }}</p>#}
                                <label for="company_description">Company Description</label>
                                <textarea id="company_description" name="company_description" rows="3"
                                          class="form-control">{{ form.company_description.value|default_if_none:"" }}</textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 form-group">
                                <label for="company_website">Website</label>
                                <input id="company_website" name="website" type="url" class="form-control" value="{{ form.website.value|default_if_none:"" }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 text-center">
                                <hr>
                                <button type="submit" class="btn btn-outline-white-primary"><i class="fa fa-magic"></i>
                                    Save and publish
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.2.0/tinymce.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>

    <script>
        $(document).ready(function () {
            $('.js-select2').select2();

            tinymce.init({
                selector: 'textarea',
                toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
            });
        });
    </script>

{% endblock %}