{% extends 'base.html' %}
{% from 'bootstrap/pagination.html' import render_pagination %}
{% from 'macros.html' import photo_card, user_card with context %}

{% block title %}搜索: {{ q }}{% endblock %}

{% block content %}
    <div class="page-header">
        <h1>搜索: {{ q }}</h1>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
                <a class="nav-item nav-link {% if category == 'photo' %}active{% endif %}"
                   href="{{ url_for('.search', q=q, category='photo') }}">照片</a>
                <a class="nav-item nav-link {% if category == 'user' %}active{% endif %}"
                   href="{{ url_for('.search', q=q, category='user') }}">用户</a>
                <a class="nav-item nav-link {% if category == 'tag' %}active{% endif %}"
                   href="{{ url_for('.search', q=q, category='tag') }}">标签</a>
            </div>
        </div>
        <div class="col-md-9">
            {% if results %}
                <h5>{{ results|length }} 结果</h5>
                {% for item in results %}
                    {% if category == 'photo' %}
                        {{ photo_card(item) }}
                    {% elif category == 'user' %}
                        {{ user_card(item) }}
                    {% else %}
                        <a class="badge badge-light" href="{{ url_for('.show_tag', tag_id=item.id) }}">
                            {{ item.name }} {{ item.photos|length }}
                        </a>
                    {% endif %}
                {% endfor %}

            {% else %}
                <h5 class="tip">无结果</h5>
            {% endif %}
        </div>
    </div>
    {% if results %}
        <div class="page-footer">
            {{ render_pagination(pagination, align='right') }}
        </div>
    {% endif %}
{% endblock %}