{% load i18n %}
<div class="oh-main__titlebar-button-container">
  <div class="oh-dropdown" x-data="{open: false}">
    <button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
      <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
    </button>
    <div
      class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
      x-show="open"
      @click.outside="open = false"
    >
      <div class="oh-dropdown__filter-body">
        <div class="oh-accordion">
          <div class="oh-accordion-header">{% trans "Reimbursement" %}</div>
          <div class="oh-accordion-body">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label">{% trans "Employee" %}</label>
                  {{f.form.employee_id}}
                </div>
                <div class="oh-input-group">
                  <label class="oh-label">{% trans "Status" %}</label>
                  {{f.form.status}}
                </div>
                <div class="oh-input-group">
                  <label class="oh-label">{% trans "Reporting manager" %}</label>
                  {{f.form.employee_id__employee_work_info__reporting_manager_id}}
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label">{% trans "Department" %}</label>
                  {{f.form.employee_id__employee_work_info__department_id}}
                </div>
                <div class="oh-input-group">
                  <label class="oh-label">{% trans "Type" %}</label>
                  {{f.form.type}}
                </div>
                <div class="oh-input-group">
                  <label class="oh-label">{% trans "Job position" %}</label>
                  {{f.form.employee_id__employee_work_info__job_position_id}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="oh-dropdown__filter-footer">
        <button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton">Filter</button>
      </div>
    </div>
  </div>

</div>
