{% load i18n %}
<!-- Sticky Table  for own objective-->

<div class="p-3 d-flex justify-content-end">
	{% if requests %}
	<button
		href="#"
		class="oh-btn oh-btn--secondary"
		hx-get="{% url 'asset-request-tab' employee %}"
		hx-target="#asset_target"
		>
		{% trans "View requests" %}
	</button>
	{% endif %}
</div>
{% if assets %}
<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 "Asset" %}</div>
				<div class="oh-sticky-table__th">{% trans "Status" %}</div>
				<div class="oh-sticky-table__th">{% trans "Assigned Date" %}</div>
				{% if perms.asset.change_assetassignment %}
					<div class="oh-sticky-table__th">{% trans "Actions" %}</div>
				{% endif %}
			</div>
		</div>
		<div class="oh-sticky-table__tbody">
			{% for asset in assets %} {% if asset.asset_id.asset_status == "In use" %}
			<!-- asset request looping -->
            <div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" hx-get="{% url 'own-asset-individual-view' asset.id %}?assets_ids={{assets_ids}}" hx-target="#objectDetailsModalTarget">
				<div class="oh-sticky-table__td">
					<div class="oh-profile oh-profile--md">
						<div class="oh-profile__avatar mr-1">
							<img
								src="https://ui-avatars.com/api/?name={{asset.asset_id.asset_name}}&background=random"
								class="oh-profile__image"
								alt=""
							/>
						</div>
						<span class="oh-profile__name oh-text--dark"
							>{{asset.asset_id.asset_name}}
						</span>
					</div>
				</div>
				<div class="oh-sticky-table__td">
					<span
						class="oh-dot oh-dot--small me-1 oh-dot--color oh-dot--warning"
					></span>
					<span class="link-warning"> {{asset.asset_id.asset_status}} </span>
				</div>
				<div class="oh-sticky-table__td">
					<span
						class="oh-dot oh-dot--small me-1 oh-dot--color oh-dot--success"
					></span>
					<span class="link-success dateformat_changer"> {{asset.assigned_date}} </span>
				</div>
				{% if perms.asset.change_assetassignment %}
					<div class="oh-sticky-table__td">
            			<button
            			    href="#"
            			    class="oh-btn oh-btn--secondary w-50"
            			    role="button"
            			    data-toggle="oh-modal-toggle"
            			    data-target="#objectCreateModal"
            			    hx-get="{%url 'asset-allocate-return'  asset_id=asset.asset_id.id %}"
            			    hx-target="#objectCreateModalTarget"
							onclick="event.stopPropagation();"
            			  >
            			    <ion-icon name="return-down-back-sharp"></ion-icon>{% trans	"Return" %}
            			</button>
					</div>
				{% endif %}
			</div>
			{% endif %} {% endfor %}
		</div>
	</div>
</div>
<div
      class="oh-modal"
      id="asset-return-allocation-modal"
      role="dialog"
      aria-labelledby="AssetRequestModal"
      aria-hidden="true"
      >
      <div class="oh-modal__dialog" style="max-width: 550px">
        <div class="oh-modal__dialog-header">
          <button type="button" class="oh-modal__close--custom" aria-label="Close" onclick="$('#asset-return-allocation-modal').toggleClass('oh-modal--show')">
            <ion-icon name="close-outline"></ion-icon>
          </button>
        </div>

        <!-- htmx form -->
        <div
          class="oh-modal__dialog-body"
          id="asset-return-allocation-modal-target"
        ></div>
      </div>
    </div>
{% else %}
<div
	class="d-flex justify-content-center align-items-center"
	style="height: 40vh"
>
	<h5 class="oh-404__subtitle">{% trans "No assets have been allocated." %}</h5>
</div>
{% endif %}
<!-- End of Sticky Table -->