{% extends "structure/base.html" %}
{% block title %}{{ construct.compose_title(construct.t("nav-search")) }}{% endblock %}
{# This view renders its own visible <h1>, so suppress the layout default. #}
{% block page_heading %}{% endblock %}
{% block content %}
<div class="fcu-card">
  <div class="fcu-card-header">
    <h1 class="fcu-text--h2">
      {{ icon("search", style="font-size:20px;vertical-align:middle;") }}
      {{ construct.t("nav-search") }}: &ldquo;{{ query }}&rdquo;
    </h1>
  </div>
  <div class="fcu-card-body" style="padding: 0;">
    {% if results %}
    <ul style="list-style:none;margin:0;padding:0;">
      {% for r in results %}
      <li style="border-bottom:1px solid var(--fcu-border);padding:16px;">
        <a href="{{ r.url }}" up-follow up-target="#main-content"
           style="font-weight:600;text-decoration:none;color:var(--fcu-primary);">
          {% if r.icon %}{{ icon(r.icon, style="font-size:16px;vertical-align:middle;") }}{% endif %}
          {{ r.title }}
        </a>
        {% if r.description %}
        <p style="margin:4px 0 0;color:var(--fcu-text-muted);font-size:var(--fcu-font-size-sm);">{{ r.description }}</p>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p style="padding:16px;color:var(--fcu-text-muted);">{{ construct.t("nav-search-no-results", {"query": query}) }}</p>
    {% endif %}
  </div>
</div>
{% endblock %}