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

<!-- HOME -->
<section class="section-hero overlay inner-page bg-image"
  style="background-image: url('{% static 'images/hero_1.jpg' %}');" id="home-section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-white font-weight-bold">Employee/Sign Up</h1>
        <div class="custom-breadcrumbs">
          <a href="{% url 'jobapp:home' %}">Home</a> <span class="mx-2 slash">/</span>
          <span class="text-white"><strong>Sign Up</strong></span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="site-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mb-5">
        <h2 class="mb-4 text-center">Sign Up To JobBoard</h2>
        {% include 'messages.html' %}


        {% 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|capfirst }} {{ error|escape }}</strong>
        </div>
        {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
        <div class="alert alert-danger alert-dismissable">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>{{ error|escape }}</strong>
        </div>
        {% endfor %}
        {% endif %}
        <form method="POST" action="" class="p-4 border rounded">
          {% csrf_token %}
          {% for field in form %}
          {% if field.name == 'gender' %}
          <div class="row form-group mb-4">
            <div class="col-md-12 mb-3 mb-md-0">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="male gender" value="M">
                <label class="form-check-label" for="male">Male</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="female" value="F">
                <label class="form-check-label" for="female">Female</label>
              </div>
            </div>
          </div>

          {% else %}

          <div class="row form-group">
            <div class="col-md-12 mb-3 mb-md-0">
              <label class="text-black" for="id_{{ field.name }}">{{ field.label }}</label>
              <input type="{{ field.field.widget.input_type }}" class="form-control" name="{{ field.name }}"
                id="id_{{ field.name }}" placeholder="{{ field.field.widget.attrs.placeholder }}">
            </div>
          </div>

          {% endif %}
          {% endfor %}
          <div class="row form-group">
            <div class="col-md-12">
              <input type="submit" value="Sign Up" class="btn px-4 btn-primary text-white">
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</section>

{% endblock %}