{% comment %} {% extends 'index.html' %}
{% load static i18n %}
{% block content %}

<!-- start of messages -->
{% if messages %}
<div class="oh-wrapper">
    {% for message in messages %}
    <div class="oh-alert-container">
        <div class="oh-alert oh-alert--animated {{message.tags}}">
        {{ message }}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
<!-- end of messages -->

<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
    <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
        <div class="oh-main__titlebar oh-main__titlebar--left">
            <h1 class="oh-main__titlebar-title fw-bold">{% trans "Assets" %}</h1>

            <a class="oh-main__titlebar-search-toggle" role="button" aria-label="Toggle Search"
                @click="searchShow = !searchShow">
                <ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
            </a>
        </div>

        <div class="oh-main__titlebar oh-main__titlebar--right">
            <div class="oh-input-group oh-input__search-group"
                :class="searchShow ? 'oh-input__search-group--show' : ''">
                <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left"></ion-icon>
                <input name="search" hx-get=""
                    hx-target="#assetCategoryList" hx-trigger='keyup delay:500ms' type="text"
                    class="oh-input oh-input__icon" aria-label="Search Input" placeholder="Search" />
            </div>
            <div class="oh-main__titlebar-button-container">



                <div class="oh-dropdown" x-data="{open: false}">
                    <button class="oh-btn ml-2" @click="open = !open">
                        <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
                    </button>
                    <div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open"
                        @click.outside="open = false" style="display: none;">


                            <div class="oh-dropdown__filter-body">


                                <div class="oh-accordion">
                                    <div class="oh-accordion-header">{% trans "Asset" %} </div>
                                    <div class="oh-accordion-body">
                                        <form hx-get="{%url 'asset-list' cat_id=0 %}?asset_list='asset'" name="asset_list" hx-target="#assetCategoryList" hx-swap="innerHTML">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <div class="oh-input-group">
                                                    <label class="oh-label">{% trans "Asset Name" %}</label>
                                                    {{asset_filter_form.asset_name}}
                                                </div>
                                                <div class="oh-input-group">
                                                    <label class="oh-label">{% trans "Tracking Id" %}</label>
                                                    {{asset_filter_form.asset_tracking_id}}
                                                </div>

                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <div class="oh-input-group">
                                                    <label class="oh-label">{% trans "Purchase Date" %}</label>
                                                    {{asset_filter_form.asset_purchase_date}}
                                                </div>
                                                <div class="oh-input-group">
                                                    <label class="oh-label">{% trans "Purchase Cost" %}</label>
                                                    {{asset_filter_form.asset_purchase_cost}}
                                                </div>

                                            </div>

                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <div class="oh-input-group">
                                                    <label class="oh-label">{% trans "Asset Lot Number" %}</label>
                                                    {{asset_filter_form.asset_lot_number_id}}
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <div class="oh-input-group">
                                                    <label class="oh-label">{% trans "Category" %}</label>
                                                    {{asset_filter_form.asset_category_id}}
                                                </div>

                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-12">
                                                <div class="oh-input-group">
                                                    <label class="oh-label">{% trans "Status" %}</label>
                                                    {{asset_filter_form.asset_status}}
                                                </div>
                                            </div>

                                        </div>
                                        <div class="oh-dropdown__filter-footer">
                                            <button class="oh-btn oh-btn--secondary oh-btn--small ">{% trans "Filter" %}</button>
                                        </div>
                                        </form>
                                    </div>
                                </div>

                            </div>

                    </div>
                </div>

                <div class="oh-btn-group ml-2">
                    <div>
                        <a href="#" class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
                            data-target="#AssetCategoryModal" hx-get=""
                            hx-target="#AssetModal"> <ion-icon class="me-2" name="add-outline"></ion-icon>{% trans "Create" %} </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
<div class="oh-wrapper">
    <div id="assetCategoryList">
<!-- list -->

<div class="oh-sticky-table__table" data-count="{{total_count}}">
  <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 "Tracking Id" %}</div>
      <div class="oh-sticky-table__th">{% trans "Batch No" %}</div>
      <div class="oh-sticky-table__th"></div>

    </div>
  </div>

  <div class="oh-sticky-table__tbody" id="assetPaginatorTarget">
    {% for asset in assets %}

    <div class="oh-sticky-table__tr oh-multiple-table-sort__movable"  id="assetDelete{{asset.id}}">
      <div class="oh-sticky-table__sd" data-toggle="oh-modal-toggle" data-target="#assetInfoModal"
        hx-get="{%url 'asset-information' asset_id=asset.id %}" hx-target="#assetInfomation">
        <div class="oh-profile oh-profile--md">
          <div class="oh-profile__avatar mr-1">
            <img src="https://ui-avatars.com/api/?name={{asset.asset_name}}&background=random" class="oh-profile__image"
              alt="Mary Magdalene" />
          </div>
          <span class="oh-profile__name oh-text--dark">{{asset.asset_name}}</span>
        </div>
      </div>
      <div class="oh-sticky-table__td">{{asset.asset_status}}</div>
      <div class="oh-sticky-table__td">{{asset.asset_tracking_id}}</div>
      <div class="oh-sticky-table__td">{{asset.asset_lot_number_id}}</div>
      <div class="oh-sticky-table__td">
        <div class="oh-btn-group">


            <a class="oh-btn oh-btn--light-bkg w-100 " data-toggle="oh-modal-toggle" data-target="#AssetCategoryModal"
              hx-get="{% url 'asset-update'  asset_id=asset.id %}" title="{% trans 'Update' %}" hx-target="#AssetModal" id="oh-btn-asset-update-modal"> <ion-icon
                name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon></a>
            <a hx-post="{%url 'asset-delete' asset_id=asset.id %}" hx-target="#assetList{{asset.asset_category_id.id}}"
                hx-confirm="Do you want to delete this asset?"
                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100 asset-delete" title="{% trans 'Remove' %}" data-category-id="{{asset.asset_category_id.id}}"> <ion-icon name="trash-outline"
                  role="img" class="md hydrated" aria-label="trash outline"></ion-icon></a>


        </div>
      </div>
    </div>
    {% endfor %}
  </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="{{assets.number }}" min="1"
          hx-get="" hx-target="">
        <span class="oh-pagination__label">{% trans "of" %} {{ assets.paginator.num_pages }}</span>
      </div>

      <ul class="oh-pagination__items">

        {% if assets.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-get="" class='oh-pagination__link'
            hx-target="">{% trans "First" %}</a>

        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-get=""
            class='oh-pagination__link' hx-target="">{% trans "Previous" %}</a>
        </li>
        {%endif %}
        {% if assets.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-get=""
            class='btn btn-outline-secondary' hx-target="">{% trans "Next" %}</a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-get=""
            hx-target="" class="oh-pagination__link">{% trans "Last" %}</a>
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>

</div>
</div>
</main>


{% endblock %} {% endcomment %}