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

{% block js %}
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src="{% static "js/interaction.js" %}"></script>
    <script src="{% static "js/modal.js" %}"></script>
    <script>
    $('document').ready(function(){
        $('#asset-search-form').submit(function () {
         $('#searchButton').focus().click();
         return false;
        });
        $('#searchButton').click(function (e) {
             e.preventDefault();
             var url = "{% url 'asset_audit' None %}";
             var id = $("#{{form.query.id_for_label}}").val();
             url = url.replace('None', id);
             $.ajax({
                url: url,
                success: function(){
                    $link = $(this);
                    // Anti modal inception
                    if ($link.parents('#modal').length == 0) {
                        modaltarget = $link.data('target');
                        modalobject = "";
                        $('#modal').load(url, function (e) {
                            $('#modal').modal();
                        });
                    }
                },
                error:function(){
                    $("#error404").attr("hidden", false);
                }
             });
        });
    });
    function onAuditClick(assetID) {
         $('#' + assetID).remove();
    }
    </script>
{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="text-center">Asset Audit List</h1>
</div>

<div id="error404" class="alert alert-danger alert-dismissable" hidden=true>
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
	<span>Asset with that ID does not exist!</span>
</div>

<h3>Audit Asset:</h3>
<form id="asset-search-form" class="form-horizontal" method="POST">
  <div class="input-group input-group-lg" style="width=auto;">
    {% render_field form.query|add_class:'form-control' placeholder='Enter Asset ID' autofocus="true" %}
    <div class="input-group-append">
        <label for="query" class="sr-only">Asset ID:</label>
        <a id="searchButton" class="btn btn-primary" class="submit" type="submit">Search</a>
    </div>
  </div>
</form>

<h3>Assets Requiring Audit:</h3>
{% include 'partials/asset_list_table.html' with audit="true" %}

{% if is_paginated %}
<div class="text-center">
  {% paginator %}
</div>
{% endif %}
{% endblock %}