{% load i18n %}{% load static %}
{% if policies %}
<div class="oh-faq-cards">
  {% for policy in policies %}
    <div class="oh-faq-card">
      <div>
        <h3 class="oh-faq-card__title d-flex justify-content-between mb-4">
          <span>
            {% if policy.is_visible_to_all %}
            <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
            {% else %}
            <span class="oh-dot oh-dot--small me-1" style="background-color:gray"></span>
            {% endif %}
            {{ policy.title }}</span>
          <div>
            {% if perms.employee.change_policiy %}
              <a hx-get="{% url 'create-policy' %}?instance_id={{ policy.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title="Edit" style="cursor: pointer;"><ion-icon name="create-outline" role="img" class="md hydrated" aria-label="copy outline"></ion-icon></a>
            {% endif %}
            {% if perms.employee.delete_policy %}
              <a href="{% url "delete-policies" %}?ids={{policy.id}}" class="text-danger" style="cursor: pointer;" onclick="return confirm('Do you want to delete this policy?')" title="Delete"><ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon></a>
            {% endif %}
          </div>
        </h3>
        <div style="max-height: 350px;overflow: hidden;min-height:100px; overflow-y:auto;" class="truncated-text">{{ policy.body|safe }}</div>
      </div>

      <a hx-get="{% url 'view-policy' %}?instance_id={{ policy.id }}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="oh-btn oh-btn--secondary oh-btn--block">{% trans 'View policy' %}</a>

    </div>
  {% endfor %}
</div>
<div class="oh-wrapper w-100">
  <div class="oh-pagination">
    <span class="oh-pagination__page" data-toggle="modal" data-target="#policyContainer">{% trans 'Page' %} {{ policies.number }} {% trans 'of' %} {{ policies.paginator.num_pages }}.</span>

    <nav class="oh-pagination__nav">
      <div class="oh-pagination__input-container me-3">
        <span class="oh-pagination__label me-1">{% trans 'Page' %}</span>

        <input type="number" name="page" class="oh-pagination__input" value="{{ policies.number }}" hx-get="{% url 'search-policies' %}?{{ pd }}" hx-target="#policyContainer" min="1" />
        <span class="oh-pagination__label">{% trans 'of' %} {{ policies.paginator.num_pages }}</span>
      </div>

      <ul class="oh-pagination__items">
        {% if policies.has_previous %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target="#policyContainer" hx-get="{% url 'search-policies' %}?{{ pd }}&page=1" class="oh-pagination__link">{% trans 'First' %}</a>
          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target="#policyContainer" hx-get="{% url 'search-policies' %}?{{ pd }}&page={{ policies.previous_page_number }}" class="oh-pagination__link">{% trans 'Previous' %}</a>
          </li>
        {% endif %}
        {% if policies.has_next %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target="#policyContainer" hx-get="{% url 'search-policies' %}?{{ pd }}&page={{ policies.next_page_number }}" class="oh-pagination__link">{% trans 'Next' %}</a>
          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target="#policyContainer" hx-get="{% url 'search-policies' %}?{{ pd }}&page={{ policies.paginator.num_pages }}" class="oh-pagination__link">{% trans 'Last' %}</a>
          </li>
        {% endif %}
      </ul>
    </nav>
  </div>
</div>
{% else %}
  <!-- start of empty page -->
  <div class="oh-404">
    <img
      style="width: 150px; height: 150px"
      src="{% static 'images/ui/no-results.png' %}"
      class="oh-404__image mb-4"
    />
    <h5 class="oh-404__subtitle">
      {% trans "No search result found!" %}
    </h5>
  </div>
  <!-- end of empty page -->
{% endif %}

<script>
  function submitForm(elem) {
      $(elem).siblings('.add_more_submit').click()
  }

  function enlargeImage(src) {
      var enlargeImageContainer = $('#enlargeImageContainer')
      enlargeImageContainer.empty()
      style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
      var enlargedImage = $('<iframe>').attr({ src: src, style: style })
      var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
      enlargeImageContainer.append(enlargedImage)
      enlargeImageContainer.append(name)
      setTimeout(function () {
          enlargeImageContainer.show()

          const iframe = document.querySelector('iframe').contentWindow
          var iframe_document = iframe.document
          iframe_image = iframe_document.getElementsByTagName('img')[0]
          $(iframe_image).attr('style', 'width:100%; height:100%;')
      }, 100)
  }

  function hideEnlargeImage() {
      var enlargeImageContainer = $('#enlargeImageContainer')
      enlargeImageContainer.empty()
  }

  $(document).on('click', function (event) {
      if (!$(event.target).closest('#enlargeImageContainer').length) {
          hideEnlargeImage()
      }
  })
</script>