{% extends 'index.twig' %}

{% block content %}
<div class="row g-5">
  <div class="col-md-8">
    <h2 class="mb-4 border-bottom">{{ pageHeader }}</h2>

    {% if isTagSearch == false %}
    <div class="jumbotron justify-content-center col-12 border rounded p-2 mb-2 bg-light-subtle" id="searchBox">
      <form action="{{ formActionUrl }}" method="get">
        <input type="hidden" name="action" value="search" />

        <div class="row">
          <div class="col-6">
            <label class="sr-only" for="searchfield">{{ msgSearch }}</label>
            <input id="searchfield" type="search" name="search" maxlength="255" value="{{ searchString }}"
                   class="form-control form-control-lg mb-2" placeholder="{{ msgSearch }}">
          </div>

          <div class="col-4">
            <label class="sr-only" for="pmf-search-category">{{ selectCategories }}</label>
            <select class="form-select form-select-lg mb-2" name="pmf-search-category" id="pmf-search-category"
                    data-placeholder="This is a placeholder">
              <option value="%" selected>{{ allCategories }}</option>
              {% for cat in categories %}
                {% set indent = '...' | repeat(cat.indent) %}
                <option value="{{ cat.id }}" {% if cat.id in categories %}selected{% endif %}>
                  {{ indent }} {{ cat.name }}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="col-2">
            <button type="submit" class="btn btn-lg btn-primary mt-4 mb-2" aria-label="{{ msgSearch }}">
              <i class="bi bi-search"></i>
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <input class="form-check-input" type="checkbox" name="pmf-all-languages" id="pmf-all-languages" value="all"
              {{ checkedAllLanguages }}>
            <label class="form-check-label" for="pmf-all-languages"> {{ searchOnAllLanguages }} </label>
          </div>
        </div>
      </form>
    </div>
    {% endif %}

    <section>
      {% if numberOfSearchResults > 0 %}
        <h4 class="my-4">{{ msgSearchResults }}</h4>

        {% if totalPages > 1 %}
          <p>
            <strong>{{ msgPage }}{{ currentPage }} {{ from }} {{ msgSearchResults }}</strong>
          </p>
        {% endif %}

        <ul class="phpmyfaq-search-results list-unstyled">
        {% for result in searchResults %}
          <li class="my-2">
            {% if result.renderedScore > 0 %}
            {{ result.renderedScore | raw }}
            {% endif %}
            <strong>{{ result.path }}</strong><br>
            <i class="bi bi-question-circle-o"></i>
            <a title="Test" href="{{ result.url }}">{{ result.question | raw }}</a>
            <br>
            <small class="small"><i class="bi bi-chat-dots"></i> {{ result.answerPreview | raw }}...</small>
          </li>
        {% endfor %}
        </ul>

        {% if totalPages > 1 %}
          {{ pagination | raw }}
        {% endif %}

      {% else %}
        <p class="text-muted mt-5">
          {{ 'help_search' | translate }}
        </p>
      {% endif %}
    </section>



  </div>

  <div class="col-md-4">
    <div class="position-sticky" style="top: 2rem">
      {% if isTagSearch %}
      <div class="p-4 mb-3 bg-light-subtle border rounded">
        <h4 class="fst-italic">{{ msgCurrentTags }}</h4>
        <div class="pmf-tag-cloud">{{ searchTags | raw }}</div>
      </div>
      {% endif %}

      {% if searchTerm != '' %}
      <div class="p-4 mb-3 bg-light-subtle border rounded">
        <h4 class="fst-italic">{{ msgTags }}</h4>
        <div class="clearfix">
          {% for tagId, tagFrequency in tagList %}
            <a class="btn btn-outline-primary m-1" href="?action=search&tagging_id={{ tagId }}">
              {{ tagId | tagName }} <span class="badge bg-info">{{ tagFrequency }}</span>
            </a>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {% if isTagSearch %}
      <div class="p-4 mb-3 bg-light-subtle border rounded">
        <h4 class="fst-italic">{{ relatedTagsHeader }}</h4>
        <div class="pmf-tag-cloud">{{ relatedTags | raw }}</div>
      </div>
      {% endif %}

      {% if isTagSearch == false %}
      <div class="p-4 mb-3 bg-light-subtle border rounded">
        <h4 class="fst-italic">{{ msgMostPopularSearches }}</h4>
        <div class="clearfix">
          {% for popular in mostPopularSearches %}
            <a class="btn btn-outline-primary m-1" href="?search={{ popular['searchterm'] }}&submit=Search&action=search">
              {{ popular['searchterm'] }} <span class="badge bg-info">{{ popular['number'] }}x</span>
            </a>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}