{% extends 'base.html' %}
{% load static %}
{% load is_favorited %}
{% block title %}
    All jobs
{% endblock %}

{% block content %}

    <section class="job-form-section job-form-section--compressed">
        <div class="container">
            <h4 class="heading">Find a <span class="accent">job </span> you will <span class="accent">love</span></h4>
            <form id="job-main-form" method="get" class="job-main-form">
                <div class="controls">
                    <div class="row align-items-end">
                        <div class="col-sm-1 col-lg-2"></div>
                        <div class="col-sm-5 col-lg-4 form-group">
                            <label for="profession">Profession</label>
                            <input type="text" id="profession" name="profession"
                                   placeholder="Profession you are looking for" class="form-control">
                        </div>
                        <div class="col-sm-5 col-lg-4 form-group">
                            <label for="location">Location</label>
                            <input type="text" id="location" name="location" placeholder="Any particular location?"
                                   value="" class="form-control">
                        </div>
                        <div class="col-sm-1 col-lg-2 form-group">
                            <button type="submit" class="btn btn-outline-white-primary job-main-form__button">
                                <i class="fa fa-search"></i> Search
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <section>
        <div class="container">
            <h3 class="heading">We have found <span class="accent">{{ total_jobs }}</span> jobs</h3>
            {% for job in jobs %}
                <div class="job-listing  ">
                    <div class="row">
                        <div class="col-md-12 col-lg-6">
                            <div class="row">
                                <div class="col-2">
                                    <img src="{% static 'img/company-1.png' %}"
                                         alt="company image " class="img-fluid">
                                </div>
                                <div class="col-10">
                                    <h4 class="job__title"><a
                                            href="{% url 'jobs:jobs-detail' job.id %}">{{ job.title }}</a></h4>
                                    <p class="job__company">
                                        {{ job.company_name }}
                                    </p>
                                    {% for tag in job.tags.all %}
                                        <span style="color: #ffffff;" class="badge featured-badge badge-secondary">{{ tag.name }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="col-10 col-md-3 col-lg-2 ml-auto">
                            <i class="fa fa-map-marker job__location"></i>
                            {{ job.location }}
                        </div>
                        <div class="col-10 col-md-3 col-lg-3 ml-auto">
                            <p>Posted {{ job.created_at|timesince }}</p>
                        </div>
                        {% if user.is_authenticated and request.user.role == 'employee' %}
                            <div class="col-sm-12 col-md-2 col-lg-1">
                                <div class="job__star">
                                    {% is_favorited job as is_already_favorited %}
                                    {% if is_already_favorited %}
                                        <a href="javascript:void(0)" data-toggle="tooltip" data-id="{{ job.id }}"
                                           data-placement="top" title="Saved to favourites"
                                           class="job__star__link favorite">
                                            <i class="fa fa-star"></i>
                                        </a>
                                    {% else %}
                                        <a href="javascript:void(0)" data-toggle="tooltip" data-id="{{ job.id }}"
                                           data-placement="top" title="Save to favourites" class="job__star__link">
                                            <i class="fa fa-star"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
            {% if is_paginated %}
                <div class="row">
                    <div class="col-md-12">
                        <nav aria-label="Page navigation example" class="d-flex justify-content-center mt-4 mb-4">
                            <ul class="pagination">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a href="?page={{ page_obj.previous_page_number }}"
                                           class="page-link">&laquo;</a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <a class="page-link">&laquo;</a>
                                    </li>
                                {% endif %}
                                {% for i in page_obj.paginator.page_range %}
                                    {% if page_obj.number == i %}
                                        <li class="page-item active">
                                            <a class="page-link">{{ i }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page-item">
                                            <a href="?page={{ i }}" class="page-link">{{ i }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a href="?page={{ page_obj.next_page_number }}" class="page-link">&raquo;</a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <a class="page-link">&raquo;</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            {% endif %}
        </div>
    </section>

{% endblock %}

{% block javascripts %}

    <script>
        let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

        $('.job__star__link').on('click', function () {
            let job_id = $(this).data('id');
            let that = $(this);
            $.ajax({
                type: "POST",
                url: "{% url 'jobs:favorite' %}",
                data: {job_id},
                success: function (res, textStatus, xhr) {
                    if (res.status === "added") {
                        that.addClass('favorite');
                        toastr.success(res.message);
                    } else if (res.status === "removed") {
                        document.activeElement.blur();
                        that.removeClass('favorite');
                        toastr.warning(res.message);
                    }
                },
                error: function (err, textStatus, xhr) {
                    if (xhr === "Unauthorized") {
                        toastr.error("Unauthorized");
                    } else {
                        toastr.error("Something wrong");
                    }
                }
            })
        });
    </script>

{% endblock %}