ObserveJS.bind 'Posts.Filter.Tags', class

loaded: =>
  @on 'tags:index', @show
  @on 'click', @action
  @when 'tags:filter:list:selected', @select
  @element().appendChild(@template('svg.placeholder'))

show: (e) =>
  e.HTML.querySelector('ul')?.setAttribute('as', 'Tags.Filter.List')
  document.body.appendChild(e.HTML)

select: (e) =>
  el = e.detail
  input = @element().querySelector('input[type=hidden]')
  span = @template('span.tag')
  span.textContent = el.dataset.name
  input.value = el.getAttribute('oid')

  @element().querySelector('svg.placeholder')?.remove()
  @element().appendChild(@template('svg.clear'))
  @element().appendChild(span)
  @element().classList.add 'tagged'

  document.querySelector("[as='Overlay']").instance.remove()

  @changed(input)

action: (e) =>
  clear = @element().querySelector('svg.clear')
  if clear? && clear.contains(e.target)
    clear.remove()
    @element().querySelector('span')?.remove()
    @element().appendChild(@template('svg.placeholder'))
    @element().classList.remove 'tagged'
    input = @element().querySelector('input[type=hidden]')
    input.value = null
    @changed(input)
  else
    xhr = new ObserveJS.XHR(@element())
    xhr.send()

changed: (el) =>
  event = new Event('input')
  el.dispatchEvent(event)