{% load i18n %}

<div class="offcanvas offcanvas-end search-result-panel" tabindex="-1" id="offcanvas-search" data-bs-scroll="true" aria-labelledby="offcanvas-search-label">
    <div class="offcanvas-header">
      <form action='{% url "search" %}' method='post' class='d-flex' style='width: 100%;'>
        {% csrf_token %}
        <div class='input-group'>
          <input type="text" name='search' class="form-control" aria-label='{% trans "Search" %}' id="search-input" placeholder="{% trans 'Search' %}" autofocus>
          <button type='submit' id='search-complete' class='btn btn-outline-secondary' title='{% trans "Show full search results" %}'>
            <span class='fas fa-search'></span>
          </button>
          <button id='search-clear' class='btn btn-outline-secondary' title='{% trans "Clear search" %}'>
            <span class='fas fa-backspace'></span>
          </button>
          <button id='search-close' class="btn btn-outline-secondary" data-bs-dismiss='offcanvas' title='{% trans "Close search menu" %}'>
            <span class='fas fa-times icon-red'></span>
          </button>
        </div>
      </form>
    </div>
    <div class="offcanvas-body">
      <div id="search-center">
        <div id='search-context'>
          <div class='alert alert-block alert-info'>
            <span class='fas fa-search'></span> <em>{% trans "Enter search query" %}</em>
          </div>
        </div>
        <div id='search-results'>
          <!-- Search results go here -->
        </div>
      </div>
    </div>
</div>
