{% load i18n %}
{% load basefilters pmsfilters %}
{% load mathfilters %}
{% load static %}
{% if messages %}
    <ul class="messages">
        {% for message in messages %}
        <div class="oh-wrapper">
          <div class="oh-alert-container">
            <div class="oh-alert oh-alert--animated {{message.tags}}">
              {{message}}
            </div>
          </div>
        </div>

        {% endfor %}
    </ul>
{% endif %}
<style>
  .oh-feedback-container {
    display: flex;
    align-items: center;
}

</style>

{% include 'filter_tags.html' %}
<div class="d-flex flex-row-reverse mb-2">
  <span class="me-3" onclick="$('[name=status]').val('At Risk');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
    {% trans "At Risk" %}
  </span>
  <span class="me-3" onclick="$('[name=status]').val('Not Started');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:grey"></span>
    {% trans "Not Started" %}
  </span>
  <span class="me-3 " onclick="$('[name=status]').val('Behind');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:orange"></span>
    {% trans "Behind" %}
  </span>
  <span class="me-3" onclick="$('[name=status]').val('Closed');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:rgb(103, 171, 238)"></span>
    {% trans "Closed" %}
  </span>
  <span class="me-3 " onclick="$('[name=status]').val('On Track');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
    {% trans "On Track" %}
  </span>
</div>

<div class="oh-tabs">
<ul class="oh-tabs__tablist">
  <li class="oh-tabs__tab oh-tabs__tab" data-target="#tab_1">
    {% trans "Self Feedback" %}
    <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="" data-category-id="1" title="{{self_feedback|length}} feedback" onclick="event.stopPropagation()">{{self_feedback|length}}</span>
  </li>
  <li class="oh-tabs__tab" data-target="#tab_2">
    {% trans "Requested Feedback" %}
    <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="" data-category-id="1" title="{{requested_feedback|length}} feedback" onclick="event.stopPropagation()">{{requested_feedback|length}}</span>
  </li>
  <!-- normal user can't view all objective  -->
  {% if perms.pms.view_feedback or request.user|filtersubordinates %}
  <li class="oh-tabs__tab" data-target="#tab_3">
    {% trans "Feedbacks to review" %}
    <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="" data-category-id="1" title="{{all_feedbacks|length}} feedback" onclick="event.stopPropagation()">{{all_feedbacks|length}}</span>
  </li>
  {% endif %}
  <li class="oh-tabs__tab" data-target="#tab_4">
    {% trans "Anonymous Feedback" %}
    <div class="oh-feedback-container">
        {% comment %} <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="" data-category-id="1" title="{{requested_feedback|length}}" onclick="event.stopPropagation()">{{requested_feedback|length}}</span> {% endcomment %}
        <button class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2" data-toggle="oh-modal-toggle" title="{% trans 'Add' %}" hx-get = '{% url "add-anonymous-feedback" %}' data-target="#anonymousFeedbackModal" hx-target="#anonymousFeedbackFormModal">
            <ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
        </button>
    </div>
  </li>
</ul>
<div >
<div class="oh-tabs__contents">
  <div class="oh-tabs__content oh-tabs__content" id="tab_1">
    {% if self_feedback.object_list %}
    <!-- Sticky Table for self feedback -->
    <div class="oh-sticky-table">
      <div class="oh-sticky-table__table ">
        <div class="oh-sticky-table__thead">
          <div class="oh-sticky-table__tr">
            <div class="oh-sticky-table__th" style="width:10px;">
              <div class="centered-div">
                <input
                  type="checkbox"
                  class="self-feedbacks oh-input oh-input__checkbox"
                  id = "selfFeedback"
                  title='{% trans "Select All" %}'
                />
              </div>
            </div>
            <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
            <div class="oh-sticky-table__th">{% trans "Title" %}</div>
            <div class="oh-sticky-table__th">{% trans "Status" %}</div>
            <div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
            <div class="oh-sticky-table__th">{% trans "Due On" %}</div>
            <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
          </div>
        </div>
        <div class="oh-sticky-table__tbody">

          {% for feedback in self_feedback.object_list %}
          <div class="oh-sticky-table__tr" draggable="true"
            {% if perms.pms.view_feedback or feedback|is_feedback_manager_or_owner:request.user %}
              onclick="window.location.href='{% url 'feedback-detailed-view' feedback.id %}'"
            {% endif %}
          >
            <div class="oh-sticky-table__sd {% if feedback.status == 'Closed' %}row-status--blue
              {% elif feedback.status == 'On Track' %}row-status--yellow {% elif feedback.status == 'Not Started' %}row-status--gray
              {% elif feedback.status == 'Behind' %}row-status--orange {% elif feedback.status == 'At Risk' %}row-status--red{% endif %}"
              onclick="event.stopPropagation()"
            >
                <div class="centered-div">
                  <input
                    type="checkbox"
                    id="{{feedback.id}}"
                    value="{{feedback.id}}"
                    class="oh-input feedback-checkbox oh-input__checkbox self-feedback-row"
                  />
                </div>
            </div>
            <div class="oh-sticky-table__td">
              <div class="oh-profile oh-profile--md">
                <div class="oh-profile__avatar mr-1">
                  <img src="{{feedback.employee_id.get_avatar}}" class="oh-profile__image"/>
                </div>
                <span class="oh-profile__name oh-text--dark">{{feedback.employee_id}}</span>
              </div>
            </div>
            <div class="oh-sticky-table__td">{{feedback.review_cycle | title}}</div>
            <div class="oh-sticky-table__td">
              <span class="oh-dot oh-dot--small  me-1 oh-dot--color{{ feedback.status }}"></span>
              <span>{% trans feedback.status %}</span>
            </div>
            <div class="oh-sticky-table__td">
              {{feedback.start_date}}
            </div>
            <div class="oh-sticky-table__td">
              {{feedback.end_date}}
              <span title = 'due {% if feedback.end_date == current_date %} {{current_date}} {% else %}in {{feedback.end_date|sub:current_date}}{% endif %}'>
                  <ion-icon
                      class="text-{% if feedback.end_date < current_date %}danger {% elif feedback.end_date == current_date %}warning {% else %}success{% endif %}"
                      name="time-sharp"
                  >
                  </ion-icon>
              </span>
            </div>
            <div class="oh-sticky-table__td"
              onclick="event.stopPropagation()"
            >
              <div class="oh-btn-group">
                  <a class="oh-btn w-100" style="height:10px" href="{% url 'feedback-answer-get' id=feedback.id %}" title="{% trans 'Answer' %}"><img width="25px" height="25px" src="{% static 'images/ui/writing.png' %}"></a>
                  <a class="oh-btn w-100"  href="{% url 'feedback-answer-view' id=feedback.id %}" title="{% trans 'Answer view' %}"><ion-icon name="eye"></ion-icon></ion-icon></a>
                  {% if perms.pms.delete_feedback or request.user|is_reportingmanager %}
                    <form action="{% url 'feedback-archive' id=feedback.id %}" method="post"  style="display: contents">
                      {% if feedback.archive == True %}
                        <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Un-archive' %}" >
                      {% else %}
                        <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Archive' %}" >
                      {% endif %}
                      {% csrf_token %}
                      <ion-icon name="archive-sharp" type="submit"></ion-icon>
                      </button>
                    </form>
                    {% if not feedback.feedback_answer.all %}
                      <form action="{% url 'feedback-delete' id=feedback.id %}" method="post" onsubmit="return confirm('{% trans "Do you want Delete this Feedback ?" %}')" style="display: contents">
                        {% csrf_token %}
                        <button  class="oh-btn oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}" >
                            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
                        </button>
                      </form>
                    {% else %}
                      <button  class="oh-btn oh-btn--danger-outline  w-100" disabled title="{% trans "Can't delete the feedback it's already answered." %}">
                        <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
                      </button>
                    {% endif %}
                  {%endif%}
              </div>
            </div>
          </div>
          {% endfor%}
        </div>
      </div>
    </div>
    <!-- End of Sticky Table -->

    <!-- pagination start -->
    <div class="oh-pagination">
      <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal"></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="{{self_feedback.number }}" min="1"
            hx-get="{% url 'feedback-list-search' %}?{{pg}}" hx-target="#feedback_list">
          <span class="oh-pagination__label">{% trans "of" %} {{ self_feedback.paginator.num_pages }}</span>
        </div>

        <ul class="oh-pagination__items">

          {% if self_feedback.has_previous %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page=1" class='oh-pagination__link'
              hx-target="#feedback_list">{% trans "First" %}</a>

          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ self_feedback.previous_page_number }}"
              class='oh-pagination__link' hx-target="#feedback_list">{% trans "Previous" %}</a>
          </li>
          {%endif %}
          {% if self_feedback.has_next %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ self_feedback.next_page_number }}"
              class='btn btn-outline-secondary' hx-target="#feedback_list">{% trans "Next" %}</a>
          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ self_feedback.paginator.num_pages }}"
              hx-target="#feedback_list" class="oh-pagination__link">{% trans "Last" %}</a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    <!-- end of pagination -->

    {% else %}
    <div class="d-flex justify-content-center align-items-center" style="height:60vh">
        <h5 class="oh-404__subtitle">{% trans "There are no Feedbacks available." %}</h5>
    </div>
    {% endif %}
  </div>


  <div class="oh-tabs__content" id="tab_2">

    <!-- Sticky Table for requested feedback -->
    {% if requested_feedback.object_list %}
    <div class="oh-sticky-table">
      <div class="oh-sticky-table__table">
        <div class="oh-sticky-table__thead">
          <div class="oh-sticky-table__tr">
            <div class="oh-sticky-table__th" style="width:10px;">
              <div class="centered-div">
                <input
                  type="checkbox"
                  class="requested-feedbacks oh-input oh-input__checkbox"
                  id = "requestedFeedback"
                  title='{% trans "Select All" %}'
                />
              </div>
            </div>
            <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
            <div class="oh-sticky-table__th">{% trans "Title" %}</div>
            <div class="oh-sticky-table__th">{% trans "Status" %}</div>
            <div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
            <div class="oh-sticky-table__th">{% trans "Due On" %}</div>
            <div class="oh-sticky-table__th">{% trans "Actions" %}</div>

          </div>
        </div>
        <div class="oh-sticky-table__tbody">

          {% for feedback in requested_feedback.object_list %}
          <div class="oh-sticky-table__tr" draggable="true">
            <div class="oh-sticky-table__sd {% if feedback.status == 'Closed' %}row-status--blue
              {% elif feedback.status == 'On Track' %}row-status--yellow {% elif feedback.status == 'Not Started' %}row-status--gray
              {% elif feedback.status == 'Behind' %}row-status--orange {% elif feedback.status == 'At Risk' %}row-status--red{% endif %}"
              onclick="event.stopPropagation()"
            >
              <div class="centered-div">
                <input
                  type="checkbox"
                  id="{{feedback.id}}"
                  value="{{feedback.id}}"
                  class="oh-input feedback-checkbox oh-input__checkbox requested-feedback-row"
                />
              </div>
            </div>
            <div class="oh-sticky-table__td">
              <div class="oh-profile oh-profile--md">
                <div class="oh-profile__avatar mr-1">
                  <img src="{{feedback.employee_id.get_avatar}}" class="oh-profile__image"/>
                </div>
                <span class="oh-profile__name oh-text--dark">{{feedback.employee_id}}</span>
              </div>
            </div>
            <div class="oh-sticky-table__td">{{feedback.review_cycle | title}}</div>
            <div class="oh-sticky-table__td">
              <span class="oh-dot oh-dot--small  me-1 oh-dot--color{{ feedback.status }}"></span>
              <span>{% trans feedback.status %}</span>
            </div>
            <div class="oh-sticky-table__td">
              {{feedback.start_date}}
            </div>
            <div class="oh-sticky-table__td">
              {{feedback.end_date}}
              <span title = 'due {% if feedback.end_date == current_date %} {{current_date}} {% else %}in {{feedback.end_date|sub:current_date}}{% endif %}'>
                  <ion-icon
                      class="text-{% if feedback.end_date < current_date %}danger {% elif feedback.end_date == current_date %}warning {% else %}success{% endif %}"
                      name="time-sharp"
                  >
                  </ion-icon>
              </span>
            </div>
            <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
              <div class="oh-btn-group">
                <a class="oh-btn w-100" style="height:10px" href="{% url 'feedback-answer-get' id=feedback.id %}" title="{% trans 'Answer' %}"><img width="25px" height="25px" src="{% static 'images/ui/writing.png' %}"></a>
                <a class="oh-btn w-100"  href="{% url 'feedback-answer-view' id=feedback.id %}" title="{% trans 'Answer view' %}"><ion-icon name="eye"></ion-icon></ion-icon></a>
            </div>
            </div>
          </div>
          {% endfor%}
        </div>
      </div>
    </div>


    <!-- pagination start -->
    <div class="oh-pagination">
      <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal"></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="{{requested_feedback.number }}" min="1"
            hx-get="{% url 'feedback-list-search' %}?{{pg}}" hx-target="#feedback_list">
          <span class="oh-pagination__label">{% trans "of" %} {{ requested_feedback.paginator.num_pages }}</span>
        </div>

        <ul class="oh-pagination__items">

          {% if requested_feedback.has_previous %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page=1" class='oh-pagination__link'
              hx-target="#feedback_list">{% trans "First" %}</a>

          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ requested_feedback.previous_page_number }}"
              class='oh-pagination__link' hx-target="#feedback_list">{% trans "Previous" %}</a>
          </li>
          {%endif %}
          {% if requested_feedback.has_next %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ requested_feedback.next_page_number }}"
              class='btn btn-outline-secondary' hx-target="#feedback_list">{% trans "Next" %}</a>
          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ requested_feedback.paginator.num_pages }}"
              hx-target="#feedback_list" class="oh-pagination__link">{% trans "Last" %}</a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    <!-- end of pagination -->

    {% else %}
    <div class="d-flex justify-content-center align-items-center" style="height:60vh">
        <h5 class="oh-404__subtitle">{% trans "There are no Feedback requests available." %}</h5>
    </div>
    {% endif %}

  </div>


  <div class="oh-tabs__content" id="tab_3">


    {% if all_feedbacks.object_list %}
    <!-- Sticky Table for all feedbacks feedback -->
    <div class="oh-sticky-table">
      <div class="oh-sticky-table__table ">
        <div class="oh-sticky-table__thead">
          <div class="oh-sticky-table__tr">
            <div class="oh-sticky-table__th" style="width:10px;">
              <div class="centered-div">
                <input
                  type="checkbox"
                  class="all-feedbacks oh-input oh-input__checkbox"
                  id = "allFeedback"
                  title='{% trans "Select All" %}'
                />
              </div>
            </div>
            <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
            <div class="oh-sticky-table__th">{% trans "Title" %}</div>
            <div class="oh-sticky-table__th">{% trans "Status" %}</div>
            <div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
            <div class="oh-sticky-table__th">{% trans "Due On" %}</div>
            {% if perms.pms.delete_feedback or request.user|is_reportingmanager %}
            <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
            {% endif %}
          </div>
        </div>
        <div class="oh-sticky-table__tbody">

          {% for feedback in all_feedbacks.object_list %}
          <div class="oh-sticky-table__tr" draggable="true"
            onclick="window.location.href='{% url 'feedback-detailed-view' feedback.id %}'"
          >
            <div class="oh-sticky-table__sd {% if feedback.status == 'Closed' %}row-status--blue
                {% elif feedback.status == 'On Track' %}row-status--yellow {% elif feedback.status == 'Not Started' %}row-status--gray
                {% elif feedback.status == 'Behind' %}row-status--orange {% elif feedback.status == 'At Risk' %}row-status--red{% endif %}"
                onclick="event.stopPropagation()"
            >
              <div class="centered-div">
                <input
                  type="checkbox"
                  id="{{feedback.id}}"
                  value="{{feedback.id}}"
                  class="oh-input feedback-checkbox oh-input__checkbox all-feedback-row"
                />
              </div>
            </div>
            <div class="oh-sticky-table__td">
              <div class="oh-profile oh-profile--md">
                <div class="oh-profile__avatar mr-1">
                  <img src="{{feedback.employee_id.get_avatar}}" class="oh-profile__image"/>
                </div>
                <span class="oh-profile__name oh-text--dark">{{feedback.employee_id}}</span>
              </div>
            </div>
            <div class="oh-sticky-table__td">{{feedback.review_cycle | title}}</div>
            <div class="oh-sticky-table__td">
              <span class="oh-dot oh-dot--small  me-1 oh-dot--color{{ feedback.status }}"></span>
              <span>{% trans feedback.status %}</span>
            </div>
            <div class="oh-sticky-table__td">
              {{feedback.start_date}}
            </div>
            <div class="oh-sticky-table__td">
              {{feedback.end_date}}
              <span title = 'due {% if feedback.end_date == current_date %} {{current_date}} {% else %} in {{feedback.end_date|sub:current_date}}{% endif %}'>
                  <ion-icon
                      class="text-{% if feedback.end_date < current_date %}danger {% elif feedback.end_date == current_date %}warning {% else %}success{% endif %}"
                      name="time-sharp"
                  >
                  </ion-icon>
              </span>
            </div>
            {% if perms.pms.delete_feedback or request.user|is_reportingmanager %}
              <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                <div class="oh-btn-group">
                  <form action="{% url 'feedback-archive' id=feedback.id %}" method="post"  style="display: contents">
                      {% if feedback.archive == True %}
                        <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Un-archive' %}" >
                      {% else %}
                        <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Archive' %}" >
                      {% endif %}
                      {% csrf_token %}
                      <ion-icon name="archive-sharp" type="submit"></ion-icon>
                      </button>
                  </form>
                  {% if not feedback.feedback_answer.all %}
                    <form action="{% url 'feedback-delete' id=feedback.id %}" method="post" onsubmit="return confirm('{% trans "Do you want Delete this Feedback ?" %}')" style="display: contents">
                      {% csrf_token %}
                      <button  class="oh-btn oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}" >
                          <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
                      </button>
                    </form>
                  {% else %}
                    <button  class="oh-btn oh-btn--danger-outline  w-100" disabled title="{% trans "Can't delete the feedback it's already answered." %}">
                      <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
                    </button>
                  {% endif %}
                </div>
              </div>
            {% endif %}
          </div>
          {% endfor%}
        </div>
      </div>
    </div>

    <!-- End of Sticky Table -->


    <!-- pagination start -->
    <div class="oh-pagination">
      <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal"></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="{{all_feedbacks.number }}" min="1"
            hx-get="{% url 'feedback-list-search' %}?{{pg}}" hx-target="#feedback_list">
          <span class="oh-pagination__label">{% trans "of" %} {{ all_feedbacks.paginator.num_pages }}</span>
        </div>

        <ul class="oh-pagination__items">

          {% if all_feedbacks.has_previous %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page=1" class='oh-pagination__link'
              hx-target="#feedback_list">{% trans "First" %}</a>

          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ all_feedbacks.previous_page_number }}"
              class='oh-pagination__link' hx-target="#feedback_list">{% trans "Previous" %}</a>
          </li>
          {%endif %}
          {% if all_feedbacks.has_next %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ all_feedbacks.next_page_number }}"
              class='btn btn-outline-secondary' hx-target="#feedback_list">{% trans "Next" %}</a>
          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-get="{% url 'feedback-list-search' %}?{{pg}}&page={{ all_feedbacks.paginator.num_pages }}"
              hx-target="#feedback_list" class="oh-pagination__link">{% trans "Last" %}</a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    <!-- end of pagination -->

    {% else %}
    <div class="d-flex justify-content-center align-items-center" style="height:60vh">
        <h5 class="oh-404__subtitle">{% trans "There are no Feedbacks available." %}</h5>
    </div>
    {% endif %}

  </div>
  <div class="oh-tabs__content" id="tab_4">
    {% if anonymous_feedback %}
    <div class="oh-sticky-table">
      <div class="oh-sticky-table__table">
        <div class="oh-sticky-table__thead">
          <div class="oh-sticky-table__tr">
            <div class="oh-sticky-table__th" style="width:10px;">
              <div class="centered-div">
                <input
                  type="checkbox"
                  class="anonymous-feedbacks oh-input oh-input__checkbox"
                  id = "anonymousFeedback"
                  title='{% trans "Select All" %}'
                />
              </div>
            </div>
            <div class="oh-sticky-table__th">{% trans "Subject" %}</div>
            <div class="oh-sticky-table__th">{% trans "Based on" %}</div>
            <div class="oh-sticky-table__th">{% trans "Create At" %}</div>
            <div class="oh-sticky-table__th">{% trans "Actions" %}</div>

          </div>
        </div>
        <div class="oh-sticky-table__tbody">
          {% for feedback in anonymous_feedback %}
            <div class="oh-sticky-table__tr"
            {% if request.user|is_anonymous_feedback_owner:feedback %}style="background: lightgreen;"{% endif %}
              draggable="true" data-toggle="oh-modal-toggle" data-target ="#FeedbackModal" hx-get="{% url 'single-anonymous-feedback-view' feedback.id %}" hx-target = "#OneFeedbackTarget">
              <div class="oh-sticky-table__sd">

                  <div class="centered-div">
                    <input
                      type="checkbox"
                      id="{{feedback.id}}"
                      value="{{feedback.id}}"
                      data-anounymous = "true"
                      onclick = "event.stopPropagation()"
                      class="oh-input feedback-checkbox oh-input__checkbox anonymous-feedback-row"
                    />
                  </div>
              </div>
              <div class="oh-sticky-table__td" >
                {{feedback.feedback_subject}}
              </div>
              <div class="oh-sticky-table__td">
                {% trans "Based on" %} :
                    {% if feedback.based_on == "employee" %}
                      {{feedback.employee_id}}
                    {% elif feedback.based_on == "department" %}
                      {{feedback.department_id}}
                    {% elif feedback.based_on == "job_position" %}
                      {{feedback.job_position_id}}
                    {% else %}
                      {{feedback.get_based_on_display}}
                    {% endif %}
              </div>
              <div class="oh-sticky-table__td">
                {{feedback.created_at}}
              </div>
              <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
                <div class="oh-btn-group">
                  {% if perms.pms.change_anonymousfeedback or request.user|is_anonymous_feedback_owner:feedback %}
                  <a class="oh-btn w-100" data-toggle="oh-modal-toggle" data-target="#anonymousFeedbackModal"
                      hx-get="{% url 'edit-anonymous-feedback' feedback.id %}"
                      title="{% trans 'Edit' %}" hx-target="#anonymousFeedbackFormModal"
                  ><ion-icon name="create-outline"></ion-icon>
                  </a>
                  <form action="{% url 'archive-anonymous-feedback' obj_id=feedback.id %}" method="post"  style="display: contents">
                    {% if feedback.archive == True %}
                      <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Un-archive' %}" >
                    {% else %}
                      <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Archive' %}" >
                    {% endif %}
                     {% csrf_token %}
                    <ion-icon name="archive-sharp" type="submit"></ion-icon>
                  </button>
                  </form>
                  {% else %}
                    <button class="oh-btn w-100" disabled>
                    <ion-icon name="create-outline"></ion-icon>
                    </button>
                    <button class="oh-btn oh-btn--danger-outline w-100" disabled >
                      <ion-icon name="archive-sharp" type="submit"></ion-icon>
                    </button>
                  {% endif %}
                  {% if perms.pms.delete_feedback %}
                    <form action="{% url 'delete-anonymous-feedback' obj_id=feedback.id %}" method="post" onsubmit="return confirm('{% trans "Do you want Delete this Feedback ?" %}')" style="display: contents">
                      {% csrf_token %}
                      <button  class="oh-btn oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}" >
                          <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
                      </button>
                    </form>
                  {% endif %}

                </div>
              </div>
            </div>
          {% endfor%}
        </div>
      </div>
    </div>
    {% else %}
    <div class="d-flex justify-content-center align-items-center" style="height:60vh">
      <h5 class="oh-404__subtitle">{% trans "There are no anonymous feedbacks available." %}</h5>
  </div>
    {% endif %}
  </div>
</div>
</div>
</div>

<script src="{% static 'src/feedback/action.js' %}"></script>
<script>

  $(document).ready(function () {
    var activeTab = localStorage.getItem('activeTabFeedback')
    if (activeTab != null) {
      var tab = $(`[data-target="${activeTab}"]`)
      var tabContent = $(activeTab)
      $(tab).attr('class', 'oh-tabs__tab oh-tabs__tab--active');
      $(tabContent).attr('class', 'oh-tabs__content oh-tabs__content--active');
    }
    else {
      $('[data-target="#tab_1"]').attr('class', 'oh-tabs__tab oh-tabs__tab--active');
      $('#tab_1').attr('class', 'oh-tabs__content oh-tabs__content--active');
    }
    $('.oh-tabs__tab').click(function (e) {
      var activeTab = $(this).attr('data-target');
      $(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
      $(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
      $(`[data-target="${activeTab}"]`).toggleClass("oh-tabs__tab--active");
      $(activeTab).toggleClass("oh-tabs__content--active");
      localStorage.setItem('activeTabFeedback', activeTab)

    });

    $("#allFeedback").click(function (e) {
      var is_checked = $(this).is(":checked");
      if (is_checked) {
        $(".all-feedback-row").prop("checked", true);
      } else {
        $(".own-feedback-row").prop("checked", false);
      }
    });

    $("#requestedFeedback").click(function (e) {
      var is_checked = $(this).is(":checked");
      if (is_checked) {
        $(".requested-feedback-row").prop("checked", true);
      } else {
        $(".requested-feedback-row").prop("checked", false);
      }
    });

    $("#anonymousFeedback").click(function (e) {
      var is_checked = $(this).is(":checked");
      if (is_checked) {
        $(".anonymous-feedback-row").prop("checked", true);
      } else {
        $(".anonymous-feedback-row").prop("checked", false);
      }
    });

    $("#selfFeedback").click(function (e) {
      var is_checked = $(this).is(":checked");
      if (is_checked) {
        $(".self-feedback-row").prop("checked", true);
      } else {
        $(".self-feedback-row").prop("checked", false);
      }
    });

  });
</script>