{% extends "base.html" %}
{% block content %}
        <div id="mainbar-full">
            <h1 class="fs-headline1 mb16">Tags</h1>
            <p class="fs-body2 wmx6 mb16">A tag is a keyword or label that categorizes your question with other, similar questions.</p>
            <div class="grid fw-wrap">
                <div class="grid--cell ps-relative mb12">
                    <input id="tagfilter" class="s-input s-input__search h100" autocomplete="off" name="tagfilter" type="text" maxlength="35" placeholder="Filter by tag name" autofocus="">
                    <svg aria-hidden="true" class="s-input-icon s-input-icon__search svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z"></path></svg>
                </div>
            </div>
            <div id="tags_list">
                <div id="tags-browser" class="grid-layout">
                    {% for tag, nb_questions, excerpt in tags %}
                    <div class="s-card js-tag-cell grid fd-column original">
                        <div class="grid jc-space-between ai-center mb12">
                            <div class="grid--cell">
                                <a href="{{ to_root }}questions/tagged/{{ tag }}" class="post-tag" title="show questions tagged '{{ tag }}'" rel="tag">{{ tag }}</a>
                            </div>
                        </div>
                        {% if excerpt %}<div class="grid--cell fc-medium mb12 v-truncate4">{{ excerpt }}</div>{% endif %}
                        <div class="mt-auto grid jc-space-between fs-caption fc-black-400"><div class="grid--cell">{{ nb_questions}} question{{ nb_questions|pluralize }}</div></div>
                    </div>
                    {% endfor %}
                </div>
                {% with target="tags" %}{% include "pagination.html" %}{% endwith %}
            </div>
        </div>
{% endblock %}
{% block bodytail %}
<script type="text/javascript" src="{{ to_root }}static/js/tags-filter.js"></script>
{% endblock %}
