{% extends 'base_assets.html' %}
{% block title %}Asset List{% endblock %}
{% load paginator from filters %}
{% load widget_tweaks %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/bootstrap-select.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/ajax-bootstrap-select.css' %}"/>
{% endblock %}

{% block preload_js %}
    <script src="{% static 'js/bootstrap-select.js' %}"></script>
    <script src="{% static 'js/ajax-bootstrap-select.js' %}"></script>
{% endblock %}

{% block content %}
<h1>Asset List</h1>
<form id="asset-search-form" method="GET" class="form py-2">
  <div class="row my-2">
      <div class="input-group">
        {% render_field form.query|add_class:'form-control' placeholder='Search by Asset ID/Desc/Serial' style="width: 250px"%}
        <label for="query" class="sr-only">Asset ID/Description/Serial Number:</label>
        <span class="input-group-append"><button type="submit" class="btn btn-primary" id="id_search">Search</button></span>
      </div>
  </div>
  <div class="row justify-content-end">
      <div id="category-group" class="form-group px-2">
        <label for="category" class="sr-only">Category</label>
        {% render_field form.category|attr:'multiple'|add_class:'form-control custom-select selectpicker col-sm' data-none-selected-text="Categories" data-header="Categories" data-actions-box="true" %}
      </div>
      <div id="status-group" class="form-group px-2">
        <label for="status" class="sr-only">Status</label>
        {% render_field form.status|attr:'multiple'|add_class:'form-control custom-select selectpicker col-sm' data-none-selected-text="Statuses" data-header="Statuses" data-actions-box="true" %}
      </div>
      <button id="filter-submit" type="submit" class="btn btn-secondary">Filter</button>
  </div>
</form>

<div class="row">
    <div class="col px-0">
        <a href="{% url 'asset_create' %}" class="btn btn-success float-right my-3">New <span class="fas fa-plus"></span></a>
    </div>
    {% include 'partials/asset_list_table.html' %}
</div>
{% if is_paginated %}
<div class="text-center">
  {% paginator %}
</div>
{% endif %}

{% endblock %}