<!DOCTYPE html>
<th:block
        th:insert="~{common/layout :: layout (title = ${theme.config.page_config.search.search_title} + ' - ' + ${site.title}, canonical = @{/search}, content = ~{::content}, isPost = true)}"
        th:with="isJournals = true, enableShare = false, baseEnableComment = false"
        xmlns:th="https://www.thymeleaf.org">
    <th:block th:fragment="content">
        <div class="card card-content search">
            <div class="card-tab">
                <div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div>
            </div>
            <div class="search-box">
                <script th:inline="javascript">
                  $(function () {
                    var searchForm = document.getElementById('dream-search-form')
                    var target = [[${theme.config.page_config.search.search_target}]]
                    var searchInput = document.getElementById('halo-search-form-text-input')
                    var searchResult = $('#dream-search-result')
                    var searchResultEmpty = $('#dream-search-result-empty')
                    searchForm.addEventListener('submit', function (event) {
                      event.preventDefault()
                      findResult(searchInput.value)
                    })
                    document.addEventListener('keydown', function (event) {
                      if (event.key === 'Enter') {
                        if (searchForm.contains(document.activeElement)) {
                          event.preventDefault()
                          findResult(searchInput.value)
                        }
                      }
                    })
                    // 监听输入事件
                    searchInput.addEventListener('input', function (event) {
                      findResult(event.target.value)
                    })

                    function removeHTMLTags(str) {
                      const regex = /<(?!\/?mark\b)[^>]*>/g
                      return str.replace(regex, '')
                    }

                    function findResult(keyword) {
                      if (!keyword) {
                        searchResult.empty()
                        searchResultEmpty.show()
                        return
                      }
                      Utils.request({
                        url: '/apis/api.halo.run/v1alpha1/indices/post',
                        contentType: 'application/json;charset=UTF-8',
                        returnRaw: true,
                        data: {
                          keyword,
                          limit: $('#halo-search-form-limit').val(),
                          highlightPreTag: '<mark>',
                          highlightPostTag: '</mark>'
                        },
                        noErrorTip: true
                      })
                        .then((_res) => {
                          if (_res.hits.length > 0) {
                            searchResultEmpty.hide()
                            searchResult.empty()
                            for (var i = 0; i < _res.hits.length; i++) {
                              try {
                                var hit = _res.hits[i]
                                var title = removeHTMLTags(hit.title)
                                var description = hit.content ? removeHTMLTags(hit.content) : ''

                                searchResult.append('<div class="widget card search">\n' +
                                  '<div class="card-content main">\n' +
                                  '<a href="' + hit.permalink + '" ' + ' target="' + target + '">\n' +
                                  '<h2 class="title">' + title + '</h2>\n' +
                                  '</a>\n' +
                                  (description ?
                                    ('<div class="main-content not-toc description">\n' + description +
                                      '\n</div>\n') : '') +
                                  '<hr/>\n' +
                                  '<div class="meta">\n' +
                                  '<div></div>\n' +
                                  '<em>' + '最后更新于 ' + Utils.formatDate(hit.updateTimestamp, 'yyyy年MM月dd日') + '</em>\n' +
                                  '</div>\n' +
                                  '</div>\n')
                                // eslint-disable-next-line no-empty
                              } catch (e) {
                              }
                            }
                          } else {
                            searchResultEmpty.show()
                            searchResult.empty()
                          }
                        })
                        .catch((err) => {
                          searchResultEmpty.hide()
                          searchResult.empty()
                        })
                    }

                    function getParameterByName(name, url = window.location.href) {
                      name = name.replace(/[\[\]]/g, '\\$&')
                      var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                        results = regex.exec(url)
                      if (!results) return null
                      if (!results[2]) return ''
                      return decodeURIComponent(results[2].replace(/\+/g, ' '))
                    }

                    var keyword = getParameterByName('keyword')
                    if (keyword) {
                      var event = new Event('input', {bubbles: true})
                      searchInput.dispatchEvent(event)
                    }
                  })
                </script>
                <form id="dream-search-form" class="search-form-inner" method="get" action="/search" role="search">
                    <input id="halo-search-form-limit" type="hidden" name="limit"
                           th:value="${theme.config.page_config.search.search_limit}">
                    <input
                            id="halo-search-form-text-input"
                            class="text-input"
                            type="search"
                            name="keyword"
                            th:title="${theme.config.page_config.search.search_placeholder}"
                            th:placeholder="${theme.config.page_config.search.search_placeholder}"
                            th:value="${searchResult.keyword}"
                    />
                    <button class="search-form-btn" th:title="${theme.config.page_config.search.search_btn_title}"
                            type="submit">
                        <i class="ri-search-line"></i>
                    </button>
                </form>
            </div>
        </div>
        <div id="dream-search-result">
        </div>
        <div id="dream-search-result-empty" class="widget card search">
            <div class="result-empty">
                <div class="result-empty-tips" th:utext="${theme.config.page_config.search.search_empty_tips}"></div>
            </div>
        </div>
    </th:block>
</th:block>