{% load widget_tweaks %}
{% load i18n %}

<div class="oh-general__tab-target oh-profile-section" id="personal">
  <div class="oh-payslip__header">
    <div class="oh-payslip__header-left">
      <div class="oh-payroll__component-title">
          {{ form.verbose_name }}
      </div>
    </div>
    <div class="oh-payslip__header-right">
          {{ form.contract_status }}
    </div>
  </div>
  <div class="oh-profile-section__card">
    <div class="row">
      <div class="col-12">
        {{form.non_field_errors}}
      </div>

      {% for field in form.visible_fields %}

        {% if field.name != 'contract_status' %}

          {% if field.name == 'note' %}
            <div class="col-12 col-md-12">
              <div class="oh-label__info" for="id_{{ field.name }}">
                <label class="oh-label {% if field.field.required %} required-star{% endif %}" for="id_{{ field.name }}">{% trans field.label %}</label>
                {% if field.help_text != "" %}
                <span class="oh-info mr-2" title = "{{ field.help_text|safe }}">
                </span>
                {% endif %}
              </div>
              {% if field.field.widget.input_type == "checkbox" %} {{ field.errors }}
              <div class="oh-switch" style="width: 30px">
                {{ field|add_class:"oh-switch__checkbox" }}
              </div>
              {% else %} {{ field|add_class:"form-control" }} {% endif %}
              {{field.errors}}
            </div>
          {% else %}
            <div class="col-12 col-md-6">
              <div class="oh-label__info" for="id_{{ field.name }}">
                <label class="oh-label {% if field.field.required %} required-star{% endif %}" for="id_{{ field.name }}">{% trans field.label %}</label>
                {% if field.help_text != "" %}
                <span class="oh-info mr-2" title = "{{ field.help_text|safe }}">
                </span>
                {% endif %}
              </div>
              {% if field.field.widget.input_type == "checkbox" %} {{ field.errors }}
              <div class="oh-switch" style="width: 30px">
                {{ field|add_class:"oh-switch__checkbox" }}
              </div>
              {% else %} {{ field|add_class:"form-control" }} {% endif %}
              {{field.errors}}
            </div>
          {% endif %}

        {% endif %}
      {% endfor %}
    </div>

    <div class="d-flex flex-row-reverse">
      <button
        type="submit"
        class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp"
      >
        {% trans "Save" %}
      </button>
    </div>
  </div>
</div>