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

{% block content %}

    <section class="job-form-section job-form-section--image">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="job-form-box">
                        <h2 class="heading">Find a <span class="accent">job</span> you will
                            <span class="accent">love</span>.
                        </h2>
                        <form id="job-main-form" method="get" action="{% url 'jobs:search' %}" class="job-main-form">
                            <div class="controls">
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label for="profession">{% trans 'Position' %}</label>
                                            <input type="text" id="profession" name="position"
                                                   placeholder="Position you are looking for" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label for="location">Location</label>
                                            <input type="text" id="location" name="location"
                                                   placeholder="Any particular location?" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit"
                                                class="btn btn-outline-white-primary job-main-form__button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-light-gray">
        <div class="container">
            <h3 class="heading">Featured jobs</h3>
            <div class="row featured align-items-stretch">
                {% for job in jobs %}
                    <div class="col-lg-4 mb-5 mb-lg-0">
                        <div class="box-image-text bg-visible full-height">
                            <div class="top">
                                <a href="#">
                                    <div class="image">
                                        <img src="{% static 'img/featured1.jpg' %}" alt="" class="img-fluid">
                                    </div>
                                    <div class="bg"></div>
                                    <div class="logo">
                                        <img src="{% static 'img/company-1.png' %}" alt="" style="max-width: 80px;">
                                    </div>
                                </a>
                            </div>
                            <div class="content">
                                <h5><a href="{% url 'jobs:jobs-detail' job.id %}">{{ job.title }}</a></h5>
                                <p class="featured__details"><i class="fa fa-map-marker job__location"></i>
                                    {{ job.location }}
                                    {% if job.type == '1' %}
                                        <span class="badge featured-badge badge-success">Full time</span>
                                    {% elif job.type == '2' %}
                                        <span class="badge featured-badge badge-primary">Part time</span>
                                    {% else %}
                                        <span style="color: #ffffff;" class="badge featured-badge badge-warning">Internship</span>
                                    {% endif %}
                                </p>
                                {% for tag in job.tags.all %}
                                    <span style="color: #ffffff;"
                                          class="badge featured-badge badge-secondary">{{ tag.name }}</span>
                                {% endfor %}
                                <p>{{ job.description | truncatewords_html:30 | safe }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% if trendings %}
        <section>
            <div class="container">
                <h4 class="heading">Trending this month</h4>
                {% for trending in trendings %}
                    <div class="job-listing  job-listing--last">
                        <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="ShareBoardd " class="img-fluid">
                                    </div>
                                    <div class="col-10">
                                        <h4 class="job__title">
                                            <a href="{% url 'jobs:jobs-detail' trending.id %}">{{ trending.title }}</a>
                                        </h4>
                                        <p class="job__company">
                                            {{ trending.company_name }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-10 col-md-3 col-lg-2 ml-auto"><i class="fa fa-map-marker job__location"></i>
                                {{ trending.location }}
                            </div>
                            <div class="col-10 col-md-3 col-lg-3 ml-auto">
                                <p>Posted {{ trending.created_at|timesince }}</p>
                            </div>
                            <div class="col-sm-12 col-md-2 col-lg-1">
                                <div class="job__star">
                                    <a href="#" data-toggle="tooltip" data-placement="top"
                                       title="Save to favourites" class="job__star__link">
                                        <i class="fa fa-star"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </section>
    {% endif %}
    <section class="section-divider">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Start searching for your new job now! </p>
                    <p><a href="{% url 'jobs:jobs' %}" class="btn btn-outline-light">See our job offers </a></p>
                </div>
            </div>
        </div>
    </section>

{% endblock %}