misuzu/templates/home/search.twig

{% extends 'home/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_text %}
{% from 'user/macros.twig' import user_card %}
{% from 'forum/macros.twig' import forum_topic_listing, forum_post_listing %}
{% from 'news/macros.twig' import news_preview %}

{% set title = search_query|length < 1 ? 'Search' : 'Looking for ' ~ search_query %}
{% set canonical_url = url('search-query', {'query': search_query}) %}

{% block content %}
    <div class="search__header">
        <form class="search__input" method="get" action="{{ url('search-index') }}">
            <div class="search__input__background"></div>
            <div class="search__input__container">
                {{ input_text('q', 'search__input__text', search_query, 'text', 'What are you looking for?', false, null, 1, true, true) }}
                <button class="search__input__button" tabindex="2"><i class="fas fa-search fa-fw"></i></button>
            </div>
        </form>

        {% if forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0 %}
            <div class="search__categories">
                {% if forum_topics|length > 0 %}
                    <a href="#topics" class="search__category">
                        <div class="search__category__background"></div>
                        <div class="search__category__content">
                            Topics
                        </div>
                    </a>
                {% endif %}

                {% if forum_posts|length > 0 %}
                    <a href="#posts" class="search__category">
                        <div class="search__category__background"></div>
                        <div class="search__category__content">
                            Posts
                        </div>
                    </a>
                {% endif %}

                {% if users|length > 0 %}
                    <a href="#users" class="search__category">
                        <div class="search__category__background"></div>
                        <div class="search__category__content">
                            Members
                        </div>
                    </a>
                {% endif %}

                {% if news_posts|length > 0 %}
                    <a href="#news" class="search__category">
                        <div class="search__category__background"></div>
                        <div class="search__category__content">
                            News
                        </div>
                    </a>
                {% endif %}
            </div>
        {% endif %}
    </div>

    {% if search_query is not empty and not (
        forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0
    ) %}
        <div class="container search__container search__none">
            <div class="search__none__icon">
                <i class="fas fa-search-minus fa-fw"></i>
            </div>
            <div class="search__none__content">
                <div class="search__none__title">
                    Nothing found!
                </div>
                <div class="search__none__details">
                    No results found using that query, try something else!
                </div>
            </div>
        </div>
    {% endif %}

    {% if forum_topics|length > 0 %}
        <div class="search__anchor" id="topics"></div>
        {{ forum_topic_listing(forum_topics, 'Topics (%d)'|format(forum_topics|length)) }}
        {% if forum_topics|length >= 20 %}
            <div style="text-align: center; padding: 10px;">
                <a href="{{ url('search-query', {'section': 'topics', 'query': search_merge_query({'type': 'forum:topic', 'after': forum_topics|last.info.id})}) }}" class="input__button">Load next 20 topics...</a>
            </div>
        {% endif %}
    {% endif %}

    {% if forum_posts|length > 0 %}
        <div class="search__anchor" id="posts"></div>
        <div class="container search__container">
            {{ container_title('<i class="fas fa-comment fa-fw"></i> Posts (%s)'|format(forum_posts|length|number_format)) }}
            {{ forum_post_listing(forum_posts) }}
        </div>
        {% if forum_posts|length >= 20 %}
            <div style="text-align: center; padding: 10px;">
                <a href="{{ url('search-query', {'section': 'posts', 'query': search_merge_query({'type': 'forum:post', 'after': forum_posts|last.info.id})}) }}" class="input__button">Load next 20 posts...</a>
            </div>
        {% endif %}
    {% endif %}

    {% if users|length > 0 %}
        <div class="search__anchor" id="users"></div>
        <div class="container search__container">
            {{ container_title('<i class="fas fa-users fa-fw"></i> Members (%s)'|format(users|length|number_format)) }}

            <div class="userlist userlist--search">
                {% for user in users %}
                    <div class="userlist__item">
                        {{ user_card(user) }}
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {% if news_posts|length > 0 %}
        <div class="search__anchor" id="news"></div>
        <div class="container search__container">
            {{ container_title('<i class="fas fa-newspaper fa-fw"></i> News (%s)'|format(news_posts|length|number_format)) }}
            {% for post in news_posts %}
                {{ news_preview(post, true) }}
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}