{# vim: set ts=2 et sts=2 sw=2: #}
{% extends "search/base.html" %}
{% set meta = (('WT.oss', q),
               ('WT.oss_r', num_results)) %}
{% set result_fold_limit = 3 %}
{% block title %}
  {% if search_query %}
    {{ page_title(_('Search Results for "{search_query}"')|f(search_query=search_query)) }}
  {% else %}
    {{ page_title(_('Search')) }}
  {% endif %}
{% endblock %}

{% block bodyclass %}search-results search-results-no-demo{% endblock %}

{% macro doc_block(doc, index) -%}
  {% set doc_url = '%s%s' % (settings.SITE_URL, url('wiki.document', doc.slug, locale=doc.locale)) %}
  {% set more_class = 'closed' if index > result_fold_limit and current_page == 1 else '' %}
  <li class="result-{{ index }} {{ more_class }}">
    <div class="column-container">
      <div class="column-1"><i class="icon-file-text-alt"></i></div>
      <div class="column-5 result-list-item">
        {# <h4 class="larger"><a href="{{ doc_url }}?search={{ search_query }}">{{ doc.title }}</a></h4> #}
        <h4 class="larger"><a href="{{ doc_url }}">{{ doc.title }}</a></h4>
        <p>{{ doc.get_excerpt()|safe }}</p>
        <p class="search-meta"><a href="{{ doc_url }}">{{ doc_url|replace('https://', '') }}</a></p>
      </div>
      <div class="column-strip result-list-link">
        <a href=""><i class="icon-code"></i>{{ _('Code Sample') }}</a>
        <a href=""><i class="icon-play-circle"></i>{{ _('Demo Sample') }}</a>
      </div>
    </div>
  </li>
 {% endmacro %}


 {% block content %}
 <div class="column-container">

  {% if search_query %}
    <!-- left results -->
    <div class="column-main">

      <div id="search-results-close-container">
        <div class="search-pane search-results-explanation">
          <h2>{{ _('Results') }}</h2>
          <p>
          {% trans locale_native = settings.LOCALES[request.locale].native %}
            {{ result_count }} Results for "{{ search_query }}" in {{ locale_native }}
          {% endtrans %}
          {% if request.locale != settings.LANGUAGE_CODE %}
            &middot;
            <a href="{{ url('search', locale=settings.LANGUAGE_CODE, ) }}?q={{ search_query }}">
              {% trans default_locale_native = settings.LOCALES[settings.LANGUAGE_CODE].native %}
              Search again in {{ default_locale_native }}
              {% endtrans %}
            </a>
          {% endif %}
            &middot;
            <a href="{{ url('search') }}" class="new-search">{{ _('New Search') }}</a>
          </p>
        </div>
      </div>

      {% if result_count %}
      <div class="search-pane seach-results-container">
        <h3><i class="icon-copy"></i>{{ _('Docs') }}</h3>

        <ul class="result-list">
          {% for doc in results %}
                {{ doc_block(doc, loop.index) }}
              {% endfor %}
        </ul>

        {% set show_expander = current_page == 1 and result_count > result_fold_limit %}
        <div class="search-results-more {% if show_expander %}with-view-all{% endif %}">

          {% if show_expander %}
          {% trans %}
            <a href="javascript:;" class="view-all">View all {{ result_count }} <i class="icon-caret-down"></i></a>
          {% endtrans %}
          {% endif %}

          <div class="pager">
            {% if prev_page %}
              <a class="button" href="{{ request.get_full_path()|urlparams(page=prev_page) }}">
              {{ _('Previous Page') }}
              </a>
            {% endif %}
            {% if next_page %}
              <a class="button" href="{{ request.get_full_path()|urlparams(page=next_page) }}">
              {{ _('Next Page') }}
              </a>
            {% endif %}
            </div>

        </div>
      </div>

      {#
      <div class="search-pane seach-results-container">
        <h3><i class="icon-copy"></i>Demos</h3>

        <ul class="result-list">
          <li>
            <div class="column-container">
              <div class="column-1"><i class="icon-file-text-alt"></i></div>
              <div class="column-5 result-list-item">
                <h4 class="larger"><a href="">Drag and Drop - DragDrop | MDN</a></h4>
                <p>3 days ago ... Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows the user to click and hold the mouse ...</p>
                <p class="search-meta"><a href="">developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p>
              </div>
              <div class="column-strip result-list-link">
                <a href=""><i class="icon-code"></i>Code Sample</a>
                <a href=""><i class="icon-play-circle"></i>Demo Sample</a>
              </div>
            </div>
          </li>
          <li>
            <div class="column-container">
              <div class="column-1"><i class="icon-file-text-alt"></i></div>
              <div class="column-5 result-list-item">
                <h4 class="larger"><a href="">Drag and Drop - DragDrop | MDN</a></h4>
                <p>3 days ago ... Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows the user to click and hold the mouse ...</p>
                <p class="search-meta"><a href="">developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p>
              </div>
              <div class="column-strip result-list-link">
                <a href=""><i class="icon-code"></i>Code Sample</a>
                <a href=""><i class="icon-play-circle"></i>Demo Sample</a>
              </div>
            </div>
          </li>
          <li>
            <div class="column-container">
              <div class="column-1"><i class="icon-file-text-alt"></i></div>
              <div class="column-5 result-list-item">
                <h4 class="larger"><a href="">Drag and Drop - DragDrop | MDN</a></h4>
                <p>3 days ago ... Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows the user to click and hold the mouse ...</p>
                <p class="search-meta"><a href="">developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p>
              </div>
              <div class="column-strip result-list-link">
                <a href=""><i class="icon-code"></i>Code Sample</a>
                <a href=""><i class="icon-play-circle"></i>Demo Sample</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
      #}
      {% endif %}
    </div>

    {% if facet_counts %}
    <!-- right topics -->
    <div class="column-strip search-results-topics">
      <h3><i class="icon-th-list"></i>{{ _('Topics') }}</h3>
      <ul>
        {% for facet in facet_counts %}
        <li>
        {% if facet.deselect_url %}
          {#
            if face.deselect_url is available that means the facet is applied and should somehow indicate that to the user.
            here I'm using a blasphemous style attribute to make the font bold when a facet is select. PLEASE FIXME!
          #}
          <a href="{{ facet.deselect_url }}" data-count="{{ facet.count }}" class="checked">{{ facet.label }}<i class="icon-check"></i></a>
        {% else %}
          <a href="{{ facet.select_url }}" data-count="{{ facet.count }}">{{ facet.label }}</a>
        {% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  
  {% else %}
   
    <div id="search-results-close-container">
      <div class="search-pane search-results-explanation">
        <h2>{{ _('Ooops!') }}</h2>
        {% trans search_url = url('search') %}
        <p>You didn't provide a search term.  <a href="{{ search_url }}" class="new-search">Try a new search!</a></p>
        {% endtrans %}
      </div>
    </div>
   
  {% endif %}
</div>
{% endblock %}


{% block js %}
<script>
  (function($) {
    var parentSelector = '.search-pane';
    $(parentSelector + ' .close').on('click', function(e) {
      e.preventDefault();
      $('#search-results-close-container').addClass('closed');
    });

    var $more = $('.search-results-more');
    $more.find('.view-all').on('click', function(e) {
      e.preventDefault();
      var hiddenClass = 'closed';
      var $parent = $(this).closest(parentSelector);
      $parent.find('.' + hiddenClass).removeClass(hiddenClass);
      $parent.find('.pager').removeClass('hidden');
      $more.removeClass('with-view-all');
    });
  })(jQuery);
</script>
{% endblock %}