{% load i18n %}
<div id="initializeDepartment">
  {% if departments %}
  <div class="oh-main__titlebar oh-main__titlebar--left">
    <div class="mb-2 mt-2">
      <div class="oh-filter-tag-container">
        {% for instance in departments %}
        <span class="oh-filter-tag">
          <span
            hx-get="{% url 'initialize-department-edit' instance.id %}"
            hx-target="#initializeDepartment"
            hx-swap="outerHTML"
            >{{instance}}</span
          >
          <form
            hx-confirm="{% trans 'Are you sure you want to delete this department?' %}"
            hx-get="{% url 'initialize-department-delete' instance.id %}"
            hx-target="#initializeDepartment"
            hx-swap="outerHTML"
            >
            <button class="oh-filter-tag__close" style="color: red;" title={% trans "Delete" %}>
              <ion-icon name="trash-outline"></ion-icon>
            </button>
          </form>
        </span>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}
  <form
    class="oh-profile-section"
    {% if department %}
      hx-post="{% url 'initialize-department-edit' department.id %}"
    {% else %}
      hx-post="{% url 'initialize-database-department' %}"
    {% endif %}
    hx-target="#initializeDepartment"
    hx-swap="outerHTML"
  >
    {% csrf_token %} {{form.non_field_errors}}
    <div class="row">
      <div class="col-12 col-sm-12 col-md-6 col-lg-10">
        <div class="row">
          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <div class="oh-input-group mb-2">
              <label for="{{form.department.id_for_label}}" class="mb-1"
                >{% trans "Department" %}</label
              >
              {{form.department}} {{form.department.errors}}
            </div>
          </div>
          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <div class="oh-input-group mb-2">
              <label for="{{form.company_id.id_for_label}}" class="mb-1"
                >{% trans "Company" %}</label
              >
              {{form.company_id}} {{form.company_id.errors}}
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-2">
        <button
          type="submit"
          title="{% trans 'Save' %}"
          class="oh-btn oh-btn--secondary mr-1 mt-4 w-100"
          style="height: 43px"
        >
          <ion-icon name="save"></ion-icon>
        </button>
      </div>
      {% if departments %}
      <div class="oh-modal__dialog-footer p-0 mt-3">
        <button
          hx-get="{% url 'initialize-database-job-position' %}"
          hx-target="#ohAuthCard"
          hx-swap="innerHTML"
          class="oh-btn oh-btn--secondary-outline m-2"
          role="button"
          >
          {% trans "Next Step" %}
          <ion-icon class="ms-2" name="arrow-forward-outline"></ion-icon>
        </button>
      </div>
      {% endif %}
    </div>
  </form>
</div>