{% import '_globals.html' as globals with context %}
{% set user_queries = ledger.query_shell.queries[:ledger.fava_options['sidebar-show-queries']] %}
{% if ledger.misc.sidebar_links %}
<ul class="navigation">
  {% for label, link in ledger.misc.sidebar_links %}
  <li><a href="{{ link }}" data-remote>{{ label }}</a></li>
  {% endfor %}
</ul>
{% endif %}
{% for menuitems in globals.navigation_bar %}
<ul class="navigation">
  {% for id in menuitems %}
  <li>
    <a{% if id == active_page %} class="selected"{% endif %} data-keyboard-shortcut="{{ globals.all_pages[id].1 }}" href="{{ url_for('report', report_name=id) }}">
      {{- globals.all_pages[id].0 }}
      {%- if id == 'events' and ledger.misc.upcoming_events -%}
      <span class="bubble">{{ ledger.misc.upcoming_events|length }}</span>
      {%- endif -%}
    </a>
    {% if id == 'query' and user_queries %}
    <ul class="submenu">
      {% for query in user_queries %}
      <li><a{% if query.name == name %} class="selected"{% endif %} href="{{ url_for('report', report_name='query', query_string='run "{}"'.format(query.name)) }}">{{ query.name|truncate(25, True, ' …') }}</a></li>
      {% endfor %}
    </ul>
    {% elif id == 'editor' %}
    <a href="#add-transaction" class="secondary add-transaction-button" data-keyboard-shortcut="n">+</a>
    {% elif id == 'import' %}
    <a href="#export" class="secondary" title="{{ _('Export') }}">⬇</a>
    {% endif %}
  </li>
  {% if id == 'query' %}
  <li><svelte-component type="account-selector"></svelte-component></li>
  {% elif id == 'editor' %}
  <li id="error-count" class="error{{ ' hidden' if not ledger.errors else '' }}">
    <a href="{{ url_for('report', report_name='errors') }}">
      {{ _('Errors') }} <span class="bubble">{{ ledger.errors|length }}</span>
    </a>
  </li>
  {% endif %}
  {% endfor %}
</ul>
{% endfor %}
{% if ledger.extensions.reports %}
<ul class="navigation">
  {% for name, label in ledger.extensions.reports %}
  <li><a href="{{ url_for('extension_report', report_name=name)}}">{{ label }}</a></li>
  {% endfor %}
</ul>
{% endif %}
