<%
const notebook = theme.notebooks.tree[page.notebook]
if (item.filter == null) {
  item.filter = 'auto'
}
if (item.placeholder == null && item.filter == 'auto') {
  if (theme.wiki.tree[page.wiki]?.name) {
    item.placeholder = __('search.search_in', theme.wiki.tree[page.wiki]?.name) 
  } else if (notebook) {
    item.placeholder = __('search.search_in', notebook.name || __('btn.notebook'))
    item.filter = notebook.base_dir
  }
}
function layoutDiv() {
  var el = ''
  if (page.search == false) {
    return el
  }
  el += `<div class="search-wrapper" id="search-wrapper">`
  el += `<div class="search-form" role="search">`
  var filter = ''
  if (item.filter == 'auto') {
    if (page.wiki) {
      let matches = page.path.match(/(.*?)\/(.*?)\//i)
      if (matches?.length > 0) {
        filter = matches[0]
      }
    }
  } else {
    if (item.filter?.length > 0) {
      filter = item.filter
    }
  }
  if (filter.length > 0 && !filter.startsWith('/')) {
    filter = '/' + filter
  }
  var placeholder = item.placeholder || (filter.length > 0 ? __('search.search_in', filter) : __('search.search'))
  var escapedPlaceholder = escape_html(placeholder)
  el += `<label class="search-button" for="search-input" aria-hidden="true">`
  el += icon('default:search', '', true)
  el += `</label>`
  el += `<input type="search" class="search-input" id="search-input" aria-label="${escapedPlaceholder}"`
  if (filter.length > 0) {
    el += ` data-filter="${escape_html(filter)}"`
  }
  el += ` placeholder="${escapedPlaceholder}">`
  el += `</div>`
  el += `<div id="search-result"></div>`
  el += `<div class="search-no-result">${__('search.no_results')}</div>`
  el += `</div>`
  return el
}
%>
<%- layoutDiv() %>
