{% 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">Add a new 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">Some additional info for this screen about validity of
                                    the ads, etc. Pellentesque habitant morbi tristique senectus et netus et malesuada
                                    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
                                    tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
                                    ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                                    ullamcorper pharetra. </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="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 id="tags" 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_already_exists %}
                                                selected {% endif %}>{{ tag.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <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 class="col-lg-6 form-group">
                                <label for="type">Type</label>
                                <select id="type" name="type" placeholder="Choose job type"
                                        class="form-control select2">
                                    <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>
                        <div class="row">
                            <div class="col-lg-6 form-group">
                                <label for="category">Category</label>
                                <select id="category" name="category" class="form-control select2">
                                    <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_if_none:"" }}">
                            </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 %}
