{% extends 'base.html' %}
{% load static %}
{% block content %}

    <div class="hero-wrap js-fullheight" style="background-image: url('{% static 'images/bg_2.jpg' %}');" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
          <div class="col-xl-10 ftco-animate mb-5 pb-5" data-scrollax=" properties: { translateY: '70%' }">
						<div class="ftco-search">
							<div class="row">
		            <div class="col-md-12 nav-link-wrap">
			            <div class="nav nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
			              <a class="nav-link active mr-md-1" id="v-pills-1-tab" data-toggle="pill" href="#v-pills-1" role="tab" aria-controls="v-pills-1" aria-selected="true">Find a Job</a>

			            </div>
			          </div>
			          <div class="col-md-12 tab-wrap">

			            <div class="tab-content p-4" id="v-pills-tabContent">

			              <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab">
			              	<form action="{% url 'jobs:search' %}" class="search-job" method="get">
			              		<div class="row">
			              			<div class="col-md">
			              				<div class="form-group">
				              				<div class="form-field">
				              					<div class="icon"><span class="icon-briefcase"></span></div>
								                <input type="text" name="job_title" class="form-control" placeholder="eg. Garphic. Web Developer">
								              </div>
							              </div>
			              			</div>
			              			<div class="col-md">
			              				<div class="form-group">
			              					<div class="form-field">
				              					<div class="select-wrap">
						                      <div class="icon"><span class="ion-ios-arrow-down"></span></div>
						                      <select name="job_type" id="" class="form-control">
						                      	<option value="full_time">Full Time</option>
						                        <option value="part_time">Part Time</option>
						                        <option value="freelance">Freelance</option>
						                        <option value="internship">Internship</option>
						                        <option value="temporary">Temporary</option>
						                      </select>
						                    </div>
								              </div>
							              </div>
			              			</div>
			              			<div class="col-md">
			              				<div class="form-group">
			              					<div class="form-field">
				              					<div class="icon"><span class="icon-map-marker"></span></div>
								                <input type="text" name="job_location" class="form-control" placeholder="Location">
								              </div>
							              </div>
			              			</div>
			              			<div class="col-md">
			              				<div class="form-group">
			              					<div class="form-field">
								                <input type="submit" value="Search" class="form-control btn btn-primary">
								              </div>
							              </div>
			              			</div>
			              		</div>
			              	</form>
			              </div>

			              <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-performance-tab">
			              	<form action="#" class="search-job">
			              		<div class="row">
			              			<div class="col-md">
			              				<div class="form-group">
				              				<div class="form-field">
				              					<div class="icon"><span class="icon-user"></span></div>
								                <input type="text" class="form-control" placeholder="eg. Adam Scott">
								              </div>
							              </div>
			              			</div>
			              			<div class="col-md">
			              				<div class="form-group">
			              					<div class="form-field">
				              					<div class="select-wrap">
						                      <div class="icon"><span class="ion-ios-arrow-down"></span></div>
						                      <select name="" id="" class="form-control">
						                      	<option value="">Category</option>
						                      	<option value="">Full Time</option>
						                        <option value="">Part Time</option>
						                        <option value="">Freelance</option>
						                        <option value="">Internship</option>
						                        <option value="">Temporary</option>
						                      </select>
						                    </div>
								              </div>
							              </div>
			              			</div>
			              			<div class="col-md">
			              				<div class="form-group">
			              					<div class="form-field">
				              					<div class="icon"><span class="icon-map-marker"></span></div>
								                <input type="text" class="form-control" placeholder="Location">
								              </div>
							              </div>
			              			</div>
			              			<div class="col-md">
			              				<div class="form-group">
			              					<div class="form-field">
								                <input type="submit" value="Search" class="form-control btn btn-primary">
								              </div>
							              </div>
			              			</div>
			              		</div>
			              	</form>
			              </div>
			            </div>
			          </div>
			        </div>
		        </div>
          </div>
        </div>
      </div>
    </div>

		<section class="ftco-section bg-light">
			<div class="container">
				<div class="row justify-content-center mb-5 pb-3">
                    {% if user.is_employee %}
                      <div class="col-md-7 heading-section text-center ftco-animate">
                          <h2 class="mb-4"><span>Recent</span> messages</h2>
                        <span class="subheading">You have {{ paginator.count }} messages</span>
                      </div>
                </div>
				<div class="row">
                    {% for job in jobs %}
                    <div class="col-md-12 ftco-animate">
						<div class="job-post-item bg-white p-4 d-block d-md-flex align-items-center">
						  <div class="mb-4 mb-md-0 mr-5">
						   <div class="job-post-item-header d-flex align-items-center">
                           {% if job.id in user.unread_messages %}
						     <h2 class="mr-3 text-black h4" style="color:red">{{ job.title }}</h2>
                           {% else %}
                             <h2 class="mr-3 text-black h4">{{ job.title }}</h2>
                           {% endif %}
						     <div class="badge-wrap">
                                 {% if job.job_type == 'full_time' %}
						            <span class="bg-warning text-white badge py-2 px-3">Full Time</span>
                                 {% elif job.job_type == 'part_time'%}
                                 	<span class="bg-info text-white badge py-2 px-3">Part Time</span>
                                 {% elif job.job_type == 'freelance'%}
                                 	<span class="bg-primary text-white badge py-2 px-3">Freelance</span>
                                 {% elif job.job_type == 'internship'%}
                                 	<span class="bg-secondary text-white badge py-2 px-3">Internship</span>
                                 {% elif job.job_type == 'temporary'%}
                                 	<span class="bg-danger text-white badge py-2 px-3">Temporary</span>
                                 {% endif %}
						     </div>
						   </div>
						   <div class="job-post-item-body d-block d-md-flex">
						     <div class="mr-3"><span class="icon-layers"></span> <a href="#">{{ job.company }}</a></div>
						     <div><span class="icon-my_location"></span> <span>{{ job.location }}</span></div>
						   </div>
						  </div>

						  <div class="ml-auto d-flex">
						  	<a href="{% url 'users:employer_display_messages' pk=job.invites.all.first.id %}" class="btn btn-primary py-2 mr-1">Read message</a>
                          </div>
						</div>
                    </div> <!-- end -->
                    {% endfor %}
            </div>
				<div class="row mt-5">
                    {% if is_paginated %}
                      <div class="col text-center">
                        <div class="block-27">
                          <ul>
                              {% if page_obj.has_previous %}
                                <li><a href="?page={{ page_obj.previous_page_number }}"><</a></li>
                              {% else %}
                                <li class="disabled"><span>&lt;</span></li>
                              {% endif %}
                              {% for i in paginator.page_range %}
                                  {% if page_obj.number == i %}
                                    <li class="active"><span>{{ i }}</span></li>
                                  {% else %}
                                    <li><a href="?page={{ i }}">{{ i }}</a></li>
                                  {% endif %}
                              {% endfor %}
                              {% if page_obj.has_next %}
                                <li><a href="?page={{ page_obj.next_page_number }}">&gt;</a></li>
                              {% else %}
                                <li class="disabled"><span>&gt;</span></li>
                              {% endif %}
                          </ul>
                        </div>
                      </div>
                {% endif %}
                </div>
            {% else %}
                <div class="row justify-content-center mb-5 pb-3">
                    <div class="col-md-7 heading-section text-center ftco-animate">
                        <h4>You are not an employee.</h4>
                    </div>
                </div>
            {% endif %}
			</div>
		</section>
{% endblock %}