{% load i18n %}
<div class="p-3 d-flex justify-content-end">
  <a
    hx-get="{% url 'asset-tab' emp_id %}"
    hx-target="#asset_target"
    class="oh-btn oh-btn--secondary"
    style="text-decoration: none; color: #fff"
  >
    {% trans "View assets" %}
  </a>
</div>
<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">{% trans "Request User" %}</div>
        <div class="oh-sticky-table__th">{% trans "Asset Category" %}</div>
        <div class="oh-sticky-table__th">{% trans "Request Date" %}</div>
        <div class="oh-sticky-table__th">{% trans "Status" %}</div>
        <div class="oh-sticky-table__th"></div>
      </div>
    </div>
    <div class="oh-sticky-table__tbody">
      <div id="assetRequestAllocationTarget"></div>
      {% for asset_request in asset_requests %}
      <!-- asset request looping -->
      <div class="oh-sticky-table__tr" draggable="true">
        <div
          class="oh-sticky-table__sd"
          data-toggle="oh-modal-toggle"
          data-target="#requestStatus{{asset_request.id}}"
        >
          <div class="oh-profile oh-profile--md">
            <div class="oh-profile__avatar mr-1">
              <img
                src="{{asset_request.requested_employee_id.get_avatar}}"
                class="oh-profile__image"
                alt="Mary Magdalene"
              />
            </div>
            <span class="oh-profile__name oh-text--dark"
              >{{asset_request.requested_employee_id}}
            </span>
          </div>
        </div>
        <div class="oh-sticky-table__td">
          {{asset_request.asset_category_id}}
        </div>
        <div class="oh-sticky-table__td dateformat_changer">
          {{ asset_request.asset_request_date }}
        </div>
        <div class="oh-sticky-table__td">
          <div class="d-flex align-items-center">
            <span
              class="oh-dot oh-dot--small me-1 oh-dot--color {% if asset_request.asset_request_status == 'Approved' %} oh-dot--success {% elif asset_request.asset_request_status == 'Rejected' %} oh-dot--danger {% elif asset_request.asset_request_status == 'Requested' %} oh-dot--info {% endif %}"
            ></span
            ><span
              class="{% if asset_request.asset_request_status == 'Approved' %} link-success {% elif asset_request.asset_request_status == 'Rejected' %} link-danger {% elif asset_request.asset_request_status == 'Requested' %} link-info {% endif %}"
              >{% trans asset_request.asset_request_status %}</span
            >
          </div>
        </div>
        {% if perms.asset.add_assetassignment %}
          {% if asset_request.asset_request_status == 'Requested' %}
            <div class="oh-sticky-table__td">
              <div class="oh-btn-group">
                <a
                  class="oh-btn oh-btn--success"
                  role="button"
                  data-toggle="oh-modal-toggle"
                  data-target="#objectCreateModal"
                  hx-get="{%url 'asset-request-approve' req_id=asset_request.id %}"
                  hx-target="#objectCreateModalTarget"
                >
                  <ion-icon name="checkmark-outline"></ion-icon>
                  {% trans "Approve" %}
                </a>
                <form action="{% url 'asset-request-reject' req_id=asset_request.id %}" method="post"
                      onclick="event.stopPropagation(); return confirm('{% trans "Do you want to reject this request?" %}')">
                      {% csrf_token %}
                <button class="oh-btn oh-btn--danger">
                  <ion-icon name="close-outline"></ion-icon>{% trans "Reject" %}
                </button>
              </div>
            </div>
          {% endif %}
        {% endif %}
      </div>

      <!-- Asset request Status -->
      <div
        class="oh-modal"
        id="requestStatus{{asset_request.id}}"
        role="dialog"
        aria-labelledby="tableTimeOffModal"
        aria-hidden="true"
      >
        <div
          class="oh-modal__dialog oh-modal__dialog--timeoff oh-timeoff-modal"
        >
          <div class="oh-modal__dialog-header">
            <button class="oh-modal__close" aria-label="Close">
              <ion-icon name="close-outline"></ion-icon>
            </button>
          </div>
          <div class="oh-modal__dialog-body oh-timeoff-modal__body pb-2">
            <div class="oh-timeoff-modal__profile-content">
              <div class="oh-timeoff-modal__profile-info">
                <span class="oh-timeoff-modal__user fw-bold"
                  >{{asset_request.requested_employee_id}}</span
                >
              </div>
            </div>

            <div class="oh-timeoff-modal__stats-container">
              <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-title"
                  >{% trans "Requested Date" %}</span
                >
                <span class="oh-timeoff-modal__stat-count dateformat_changer"
                  >{{asset_request.asset_request_date}}</span
                >
              </div>
              <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-title"
                  >{% trans "Category" %}</span
                >
                <span class="oh-timeoff-modal__stat-count"
                  >{{asset_request.asset_category_id}}</span
                >
              </div>
            </div>

            <div class="oh-timeoff-modal__stats mt-3 w-100">
              <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-title"
                  >{% trans "Request Description" %}</span
                >
                <div class="oh-timeoff-modal__stat-description">
                  {{asset_request.description}}
                </div>
              </div>
            </div>
          </div>

          <div class="oh-modal__dialog-footer">
            {% if perms.asset.add_assetassignment %}
              {% if asset_request.asset_request_status == 'Requested' %}
                <a
                  class="oh-btn oh-btn--success"
                  role="button"
                  data-toggle="oh-modal-toggle"
                  data-target="#objectCreateModal"
                  hx-get="{%url 'asset-request-approve' req_id=asset_request.id %}"
                  hx-target="#objectCreateModalTarget"
                  title="{% trans 'Approve' %}"
                >
                  <ion-icon name="checkmark-outline"></ion-icon>
                </a>
                <form action="{% url 'asset-request-reject' req_id=asset_request.id %}" method="post" class=""
                  onsubmit="event.stopPropagation(); return confirm('{% trans "Do you want to reject this request?" %}')">
                  {% csrf_token %}
                <button
                  class="oh-btn oh-btn--danger"
                  title="{% trans 'Reject' %}"
                  onclick="event.stopPropagation();"
                >
                  <ion-icon name="close-outline"></ion-icon>
                </button>
              {% endif %}
            {% endif %}
          </div>
        </div>
      </div>
      <!-- End asset return status -->
      {% endfor %}
    </div>
  </div>
</div>