full-page-search.hbs

{{#d-section pageClass="search" class="search-container"}}
  {{scroll-tracker name="full-page-search" tag=searchTerm class="hidden"}}

  <div class="search-advanced">
    {{#unless site.mobileView}}
      <div class="search-bar">
        {{search-text-field value=searchTerm class="full-page-search search no-blur search-query" aria-label=(i18n "search.full_page_title") enter=(action "search") hasAutofocus=hasAutofocus}}
        {{d-button action=(action "search") icon="search" class="btn-primary search-cta" ariaLabel="search.search_button" disabled=searchButtonDisabled}}
      </div>
    {{/unless}}

    <div class="search-notice">
      {{#if invalidSearch}}
        <div class="fps-invalid">
          {{i18n "search.too_short"}}
        </div>
      {{/if}}
    </div>

    {{!-- context is only provided when searching from mobile view --}}
    <div class="search-context">
      {{#if context}}
        <div class="fps-search-context">
          <label>
            {{input type="checkbox" name="searchContext" checked=searchContextEnabled}} {{searchContextDescription}}
          </label>
        </div>
      {{/if}}
    </div>

    {{#if hasResults}}
      <div class="search-title">
        {{#if hasResults}}
          {{create-topic-button canCreateTopic=canCreateTopic action=(action "createTopic" searchTerm)}}
        {{/if}}

        {{#if canBulkSelect}}
          {{d-button icon="list" class="btn-default bulk-select" title="topics.bulk.toggle" action=(action "toggleBulkSelect")}}
          {{bulk-select-button selected=selected category=category action=(action "search")}}
        {{/if}}

        {{#if bulkSelectEnabled}}
          <div class="fps-select">
            {{d-button icon="check-square" class="btn-default" action=(action "selectAll") label="search.select_all"~}}
            {{d-button icon="far-square" class="btn-default" action=(action "clearAll") label="search.clear_all"}}
          </div>
        {{/if}}
      </div>

      <div class="search-info">
        <div class="result-count">
          {{html-safe resultCountLabel}}
        </div>
        <div class="sort-by">
          <span class="desc">
            {{i18n "search.sort_by"}}
          </span>
          {{combo-box
            value=sortOrder
            content=sortOrders
            castInteger=true
            onChange=(action (mut sortOrder))
          }}
        </div>
      </div>
    {{/if}}

    {{plugin-outlet name="full-page-search-below-search-info" args=(hash search=searchTerm)}}

    {{#if searching}}
      {{loading-spinner size="medium"}}
    {{else}}
      <div class="search-results">
        {{#load-more selector=".fps-result" action=(action "loadMore")}}
          {{#each model.posts as |result|}}
            <div class="fps-result">
              <div class="author">
                <a href={{result.userPath}} data-user-card={{result.username}}>
                  {{avatar result imageSize="large"}}
                </a>
              </div>

              <div class="fps-topic">
                <div class="topic">
                  {{#if bulkSelectEnabled}}
                    {{track-selected selectedList=selected selectedId=result.topic class="bulk-select"}}
                  {{/if}}

                  <a href={{result.url}} {{action "logClick" result.topic_id}} class="search-link">
                    {{raw "topic-status" topic=result.topic showPrivateMessageIcon=true}}
                    <span class="topic-title">
                      {{#if result.useTopicTitleHeadline}}
                        {{html-safe result.topicTitleHeadline}}
                      {{else}}
                        {{#highlight-search highlight=q}}
                          {{html-safe result.topic.fancyTitle}}
                        {{/highlight-search}}
                      {{/if}}
                    </span>
                  </a>

                  <div class="search-category">
                    {{#if result.topic.category.parentCategory}}
                      {{category-link result.topic.category.parentCategory}}
                    {{/if}}
                    {{category-link result.topic.category hideParent=true}}
                    {{#if result.topic}}
                      {{discourse-tags result.topic}}
                    {{/if}}
                    {{plugin-outlet name="full-page-search-category" args=(hash result=result)}}
                  </div>
                </div>

                <div class="blurb container">
                  <span class="date">
                    {{format-date result.created_at format="tiny"}}
                    {{#if result.blurb}}
                      -
                    {{/if}}
                  </span>

                  {{#if result.blurb}}
                    {{#if siteSettings.use_pg_headlines_for_excerpt}}
                      {{html-safe result.blurb}}
                    {{else}}
                      {{#highlight-search highlight=highlightQuery}}
                        {{html-safe result.blurb}}
                      {{/highlight-search}}
                    {{/if}}
                  {{/if}}
                </div>

                {{#if showLikeCount}}
                  {{#if result.like_count}}
                    <span class="like-count">
                      {{result.like_count}} {{d-icon "heart"}}
                    </span>
                  {{/if}}
                {{/if}}
              </div>
            </div>
          {{/each}}

          {{#conditional-loading-spinner condition=loading }}
            {{#unless hasResults}}
              {{#if searchActive}}
                <h3>{{i18n "search.no_results"}}</h3>

                {{#if model.grouped_search_result.error}}
                  <div class="warning">
                    {{model.grouped_search_result.error}}
                  </div>
                {{/if}}

                {{#if showSuggestion}}
                  <div class="no-results-suggestion">
                    {{i18n "search.cant_find"}}
                    {{#if canCreateTopic}}
                      <a href {{action "createTopic" searchTerm}}>{{i18n "search.start_new_topic"}}</a>
                      {{#unless siteSettings.login_required}}
                        {{i18n "search.or_search_google"}}
                      {{/unless}}
                    {{else}}
                      {{i18n "search.search_google"}}
                    {{/if}}
                  </div>

                  {{google-search searchTerm=searchTerm}}
                {{/if}}
              {{/if}}
            {{/unless}}

            {{#if hasResults}}
              {{#unless loading}}
                <h3 class="search-footer">
                  {{#if model.grouped_search_result.more_full_page_results}}
                    {{#if isLastPage }}
                      {{i18n "search.more_results"}}
                    {{/if}}
                  {{else}}
                    {{i18n "search.no_more_results"}}
                  {{/if}}
                </h3>
              {{/unless}}
            {{/if}}
          {{/conditional-loading-spinner}}
        {{/load-more}}
      </div>
    {{/if}}
  </div>

  <div class="search-advanced-sidebar">
    {{#if site.mobileView}}
      <div class="search-bar">
        {{search-text-field value=searchTerm class="full-page-search search no-blur search-query" enter=(action "search") hasAutofocus=hasAutofocus}}
        {{d-button action=(action "search") icon="search" class="btn-primary search-cta" ariaLabel="search.search_button" disabled=searchButtonDisabled}}
      </div>
    {{/if}}

    {{#if site.mobileView}}
      <div role="button" class="search-advanced-title" {{on "click" (action "toggleAdvancedSearch")}}>
        {{d-icon (if expanded "caret-down" "caret-right")}}
        <span>{{i18n "search.advanced.title"}}</span>
      </div>
    {{else}}
      <h1 class="search-advanced-title">
        {{i18n "search.advanced.title"}}
      </h1>
    {{/if}}

    {{#if site.mobileView}}
      {{#if expanded}}
        <div class="search-advanced-filters">
          {{search-advanced-options
            searchTerm=(readonly searchTerm)
            onChangeSearchTerm=(action (mut searchTerm))
          }}
        </div>
      {{/if}}
    {{else}}
      <div class="search-advanced-filters">
        {{search-advanced-options
          searchTerm=(readonly searchTerm)
          onChangeSearchTerm=(action (mut searchTerm))
          onChangeCategory=(action (mut category))
        }}

        {{d-button
          label="submit"
          action=(action "search")
          icon="search"
          class="btn-primary search-cta"
          disabled=searchButtonDisabled}}
      </div>
    {{/if}}
  </div>
{{/d-section}}