{% load i18n %}
{% include "generic/components.html" %}
<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 'Policies' %}</h1>
  </div>

  <div class="oh-main__titlebar oh-main__titlebar--right oh-d-flex-column--resp oh-mb-3--small">
    <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 hx-get="{% url 'search-policies' %}" name="search" hx-trigger="keyup changed delay:.2s" hx-target="#policyContainer" type="text" placeholder="Search" style="margin-right:10px" class="oh-input oh-input__icon mr-3" autocomplete="false" aria-label="Search Input" />
    </div>
    {% include 'policies/filter.html' %}
    {% if perms.employee.add_policy %}
      <div class="oh-main__titlebar-button-container">
        <div class="oh-main__titlebar-button-container">
          <a hx-get="{% url 'create-policy' %}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" class="oh-btn oh-btn--secondary">
            <ion-icon name="add-outline"></ion-icon>
            {% trans 'Create' %}
          </a>
        </div>
      </div>
    {% endif %}
  </div>
</section>