{% load i18n offboarding_filter %}
<section class="oh-wrapper oh-main__topbar" style="padding-bottom: 1rem;">
  <div class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small">
    <h1 class="oh-main__titlebar-title fw-bold">{% trans 'Offboarding' %}</h1>
  </div>
  {% if perms.offboarding.change_offboardingstage or request.user.employee_get|any_manager or request.user.employee_get|is_in_offboarding:offboarding.offboarding %}
    <form onsubmit="event.preventDefault()" hx-target="#offboardingContainer" hx-get="{% url 'offboarding-pipeline-filter' %}"  class="oh-main__titlebar oh-main__titlebar--right oh-d-flex-column--resp oh-mb-3--small" >
      {% if offboardings %}
        <div class="oh-input-group oh-input__search-group mr-4">
          <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated"  role="img" aria-label="search outline"></ion-icon>
          <input name="search" onkeyup="$('#hiddenSubmit').click()" id="pipelineSearch" type="text" placeholder="Search"  style="margin-right:10px" class="oh-input oh-input__icon mr-3" autocomplete="false" aria-label="Search Input" />
        </div>
        <input type="submit" id="hiddenSubmit" hidden>
        {% include 'offboarding/pipeline/filter.html' %}
      {% endif %}
      {% if perms.offboarding.add_offboarding %}
        <div class="oh-main__titlebar-button-container">
          <div class="oh-main__titlebar-button-container">
            <a hx-get="{% url 'create-offboarding' %}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="oh-btn oh-btn--secondary">
              <ion-icon name="add-outline"></ion-icon>
              {% trans 'Create' %}
            </a>
          </div>
        </div>
      {% endif %}
    </form>
  {% endif %}
</section>

<div class="oh-modal" id="offboardingModal" role="dialog" aria-hidden="true">
  <div class="oh-modal__dialog" style="max-width: 550px">
    <div class="oh-modal__dialog-header">
      <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
    </div>

    <div class="oh-modal__dialog-body" id="offboardingModalBody"></div>
  </div>
</div>
<div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000">

  <div class="oh-activity-sidebar__body" id="noteContainer">
  </div>
</div>
