#queries
  #header
    .pull-right{:style => "line-height: 34px;"}
      - if blazer_user
        = link_to "All", root_path, class: !params[:filter] ? "active" : nil, style: "margin-right: 40px;"
        - if Blazer.audit
          = link_to "Viewed", root_path(filter: "viewed"), class: params[:filter] == "viewed" ? "active" : nil, style: "margin-right: 40px;"
        = link_to "Mine", root_path(filter: "mine"), class: params[:filter] == "mine" ? "active" : nil, style: "margin-right: 40px;"
      .btn-group
        = link_to "New Query", new_query_path, class: "btn btn-info"
        %button.btn.btn-info.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
          %span.caret
          %span.sr-only Toggle Dropdown
        %ul.dropdown-menu
          %li= link_to "Checks", checks_path
          - if Blazer.uploads?
            %li= link_to "Uploads", uploads_path
          %li.divider{:role => "separator"}
          %li= link_to "New Dashboard", new_dashboard_path
          %li= link_to "New Check", new_check_path
    %input.search.form-control{:placeholder => "Start typing a query, dashboard, or person", :style => "width: 300px; display: inline-block;", :type => "text", "v-focus" => "", "v-model" => "searchTerm"}/
  %table.table#branded-table
    %thead
      %tr
        %th Name
        - if Blazer.user_class
          %th{:style => "text-align: right;"} Mastermind
    %tbody.list{"v-cloak" => ""}
      %tr{"v-for" => "query in visibleItems"}
        %td
          %a{":class" => "{ dashboard: query.dashboard }", ":href" => "itemPath(query)"} {{ query.name }}
          %span.vars {{ query.vars }}
        - if Blazer.user_class
          %td.creator {{ query.creator }}
  %p.text-muted{"v-if" => "more"} Loading...
:javascript
  #{blazer_js_var "dashboards", @dashboards}
  #{blazer_js_var "queries", @queries}
  #{blazer_js_var "more", @more}

  var prepareSearch = function (list) {
    var i, q, searchStr
    for (i = 0; i < list.length; i++) {
      q = list[i]
      searchStr = q.name + q.creator
      if (q.creator === "You") {
        searchStr += "mine me"
      }
      q.searchStr = prepareQuery(searchStr)
    }
  }

  var prepareQuery = function (str) {
    return str.toLowerCase()
  }

  var app = new Vue({
    el: "#queries",
    data: {
      searchTerm: "",
      more: more,
      updateCounter: 0
    },
    created: function() {
      this.listItems = dashboards.concat(queries)

      prepareSearch(this.listItems)

      this.queryIds = {}
      for (i = 0; i < queries.length; i++) {
        this.queryIds[queries[i].id] = true
      }

      if (this.more) {
        var _this = this

        $.getJSON(Routes.queries_path(), function (data) {
          var i, j, newValues, val, size = 500;

          var newValues = []
          for (j = 0; j < data.length; j++) {
            val = data[j]
            if (val && !_this.queryIds[val.id]) {
              newValues.push(val)
            }
          }

          prepareSearch(newValues)

          _this.listItems = _this.listItems.concat(newValues)
          _this.more = false
          // hack to get to update
          _this.updateCounter++
        })
      }
    },
    computed: {
      visibleItems: function () {
        // hack to get to update
        this.updateCounter

        var pageSize = 200
        var q, i

        if (this.searchTerm.length > 0) {
          var term = prepareQuery(this.searchTerm)
          var items = []
          var fuzzyItems = []
          for (i = 0; i < this.listItems.length; i++) {
            q = this.listItems[i]
            if (q.searchStr.indexOf(term) !== -1) {
              items.push(q)
              if (items.length == pageSize) {
                break
              }
            } else if (fuzzysearch(term, q.searchStr)) {
              fuzzyItems.push(q)
            }
          }
          return items.concat(fuzzyItems).slice(0, pageSize)
        } else {
          return this.listItems.slice(0, pageSize)
        }
      }
    },
    methods: {
      itemPath: function (item) {
        if (item.dashboard) {
          return Routes.dashboard_path(item.to_param)
        } else {
          return Routes.query_path(item.to_param)
        }
      }
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    }
  })