{% 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-end justify-content-start" data-scrollax-parent="true">
          <div class="col-md-8 ftco-animate text-center text-md-left mb-5" data-scrollax=" properties: { translateY: '70%' }">
          	<p class="breadcrumbs" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><span class="mr-3"><a href="index.html">Home <i class="ion-ios-arrow-forward"></i></a></span> <span>Post a job</span></p>
            <h1 class="mb-3 bread" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Post a job</h1>
          </div>
        </div>
      </div>
    </div>

    <div class="ftco-section bg-light">
      <div class="container">
        <div class="row">

          <div class="col-md-12 col-lg-8 mb-5">
            {% if user.is_employer %}
			     <form action="#" class="p-5 bg-white" method="post">
                    {% csrf_token %}
                    {% if form.errors %}
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <div id="form_errors">
                            {% for key, value in form.errors.items %}
                            <span class="fieldWrapper">
                                {{ key }}: {{ value }}
                            </span>
                            {% endfor %}
                        </div>
                        <button type="button" class="close" data-dismiss="alert" aria_hidden="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {% endif %}
                     {% for field in form.visible_fields|slice:"3" %}
                         <div class="row form-group">
                            <div class="col-md-12 mb-3 mb-md-0">
                              <label class="font-weight-bold" for="fullname">{{ field.label }}</label>
                              <input type="{{ field.field.widget.input_type }}" id="fullname" class="form-control" placeholder="{{ field.label }}" name="{{ field.html_name }}">
                            </div>
                         </div>
                     {% endfor %}

                 <div class="row form-group">
                    <div class="col-md-12">
                      <label class="font-weight-bold" for="fullname">Job type</label>
                    </div>
                    <div class="col-md-12 mb-3 mb-md-0">
                      <label for="option-job-type-1">
                         {{ form.job_type }}
                      </label>
                    </div>
                 </div>

                 <div class="row form-group">
                    <div class="col-md-12">
                      <label class="font-weight-bold" for="fullname">Category</label>
                    </div>
                    <div class="col-md-12 mb-3 mb-md-0">
                      <label for="option-job-type-1">
                         {{ form.category }}
                      </label>
                    </div>
                 </div>

                 <div class="row form-group">
                    <div class="col-md-12">
                      <label class="font-weight-bold" for="fullname">Description</label>
                    </div>
                     {{ form.media }}
                     {{ form.description }}

                 </div>

                 <div class="row form-group">
                    <div class="col-md-12">
                        <input type="submit" value="Post" class="btn btn-primary  py-2 px-5">
                    </div>
                 </div>

                 </form>
            {% else  %}
                <div class="row form-group">
                    <div class="col-md-12 mb-3 mb-md-0">
                      <label for="option-job-type-1">
                         You are not an employer.
                      </label>
                    </div>
                 </div>
            {% endif %}
          </div>

        </div>
      </div>
    </div>

  {% endblock %}