{% import 'components/avatar.html' as avatar with context %}
{% import 'input/form.html' as form with context %}
{% import 'input/field.html' as field with context %}

{{ icon_defs('blog', 'pencil') }}

<aside class="menu mt-4 px-4 has-text-light">


    <p class="menu-label has-text-grey-light">{% trans %}Blog Search{% endtrans %}</p>
    <div class="field">
        <p class="help">Use names, JIDs, or keywords.</p>
        <div class="control has-icons-left has-icons-right">
            <input class="input search-input" type="search"
                                              placeholder="Search blogs…">
            <span class="icon is-small is-left">
                <i class="fa-solid fa-magnifying-glass"></i>
            </span>
            <span class="icon is-right action_clear_search">
                <a role="button" class="delete is-small" aria-label="Clear search"></a>
            </span>
        </div>
    </div>
    <p class="menu-label has-text-grey-light">
    {% trans %}Contact Blogs{% endtrans %}
    </p>
    <div id="contact-blogs"></div>
</aside>