{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static "admin/plugins/datatables/dataTables.bootstrap.css" %}">
{% if cl.formset or action_form %}
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{% endif %}
{{ media.css }}
{% if not actions_on_top and not actions_on_bottom %}
<style>
    #changelist table thead th:first-child {width: inherit}
</style>
{% endif %}
{% endblock %}

{% block extrahead %}
{{ block.super }}
{{ media.js }}
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
{% block breadcrumbs %}
<ol class="breadcrumb">
    <li><a href="{% url 'admin:index' %}"><i class="fa fa-dashboard"></i> {% trans 'Home' %}</a></li>
    <li><a href="javascript:void(0)">{{ cl.opts.app_config.verbose_name }}</a></li>
    <li class="active">{{ cl.opts.verbose_name_plural|capfirst }}</li>
</ol>
{% endblock %}
{% endif %}

{% block content_title %} {{ cl.opts.verbose_name_plural|capfirst }} {% endblock %}

{% block coltype %}flex{% endblock %}

{% block content %}


<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h4 class="box-title">
                    {{title}}{% block pretitle %}{% endblock %}
                </h4>
            </div>

            <div class="box-body">
                <div id="content-main">
                    {% if cl.formset and cl.formset.errors %}
                    <p class="errornote">
                        {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
                    </p>
                    {{ cl.formset.non_form_errors }}
                    {% endif %}
                    <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
                        <div class="row" style="margin-bottom: 15px;">
                            {% block search %}
                            <div class="col-md-10 col-sm-12 col-xs-12" id="toolbar">
                                {% search_form cl %}
                            </div>
                            {% endblock %}

                            {% block object-tools %}
                            <div {% if cl.has_filters or cl.search_fields %}class="col-md-2 col-sm-12 col-xs-12 text-right"{% else %}class="col-md-12 text-right"{% endif %}>
                                {% block object-tools-items %}
                                {% change_list_object_tools %}
                                {% endblock %}
                            </div>
                            {% endblock %}
                        </div>

                        <div class="row">
                            {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
                        </div>

                        <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
                            {% if cl.formset %}
                            <div>{{ cl.formset.management_form }}</div>
                            {% endif %}

                            {% block result_list %}
                            {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
                            {% result_list cl %}
                            {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
                            {% endblock %}
                            {% block pagination %}{% pagination cl %}{% endblock %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <br class="clear" />
    </div>
</div>


{% endblock %}

{% block extrajs %}
<script src="{% static "admin/plugins/datatables/jquery.dataTables.min.js" %}"></script>
<script src="{% static "admin/plugins/datatables/dataTables.bootstrap.min.js" %}"></script>
<!-- for service_runner -->
<script src="{% static "admin/js/axios.min.js" %}"></script>
<script src="{% static "admin/js/qs.min.js" %}"></script>
<script src="{% static "admin/js/vue.min.js" %}"></script>

<script>
    // var selectors = document.querySelector('#changelist-search').querySelectorAll('select');

    $.fn.search_filters = function () {
        $(this).change(function () {
            var $field = $(this);
            var $option = $field.find('option:selected');
            var select_name = $option.data('name');
            if (select_name) {
                $field.attr('name', select_name);
            } else {
                $field.removeAttr('name');
            }
            // Handle additional values for date filters
            // var additional = $option.data('additional');
            // if (additional) {
            //     var hidden_id = $field.data('name') + '_add';
            //     var $hidden = $('#' + hidden_id);
            //     if (!$hidden.length) {
            //         $hidden = $('<input/>').attr('type', 'hidden').attr('id', hidden_id);
            //         $field.after($hidden);
            //     }
            //     additional = additional.split('=');
            //     $hidden.attr('name', additional[0]).val(additional[1])
            // }
        });
        $(this).trigger('change');
    };

    $('.search-filter').search_filters();

</script>

<script>
  new Vue({
    delimiters: ['$[', ']'],
    el: '#changelist-form',
    data: {
      hostUptime: {},
      hostInfo: {}
    },
    methods: {
      getHostUptime(host_id) {
        let self = this
        axios.get('/admin/asset/host/getHostUptime/?host_id=' + host_id)
          .then(function(response) {
            // use Vue.set update object
            Vue.set(self.hostUptime, 'host_' + host_id.toString(), response.data.data)
          })
          .catch(function(error) {
            console.log(error)
          })
      },
      getHostInfo(host_id) {
        let self = this
        axios.get('/admin/asset/host/getHostInfo/?host_id=' + host_id)
          .then(function(response) {
            Vue.set(self.hostInfo, 'host_' + host_id.toString(), response.data.data)
          })
      }
    },
    mounted () {
      for (let ref_index in this.$refs) {
        this.getHostUptime(this.$refs[ref_index].dataset.hostId)
      }
    }
  })
</script>

{% endblock %}