{% macro search_box(settings, id=False, prefix=None, target=None,
                    placeholder=_('Search questions, articles, or topics (example: saving passwords in Firefox)'),
                    params=None) %}
<form data-instant-search="form" {% if id %}id="{{ id }}" {% endif %} action="{{ url('search') }}" method="get"
  {% if target %} target="{{ target }}" {% endif %} class="simple-search-form">
  {% if params %}
  {% for k, v in params.items() %}
  <input type="hidden" name="{{ k }}" value="{{ v }}" />
  {% endfor %}
  {% endif %}
  <input spellcheck="true" type="search" autocomplete="off" name="q" aria-required="true"
    placeholder="{{ placeholder }}" class="searchbox" id="search-q" />
  <button type="submit" title="{{ _('Search') }}" class="search-button">{{ _('Search') }}</button>
</form>
{% endmacro %}

{% macro sumo_banner(id, text, modifier_class=None, image=None, button_text=None, button_link=None) %}
  <div class="sumo-banner {{ modifer_class or '' }}" id="{{ id }}" data-close-initial="hidden">
    <div class="content">
      {% if image %}
        <img class="icon" src="{{ image }}" alt="" role="presentation" />
      {% endif %}
      <p class="heading">
        {{ text }}
      </p>
      {% if button_text %}
        <a href="{{ button_link }}" class="sumo-button primary-button button-lg">
          {{ button_text }}
        </a>
      {% endif %}
      <button class="sumo-close-button close-button" data-close-id="{{ id }}" data-close-memory="session">
        <img src="{{ webpack_static('protocol/img/icons/close-white.svg') }}" />
      </button>
    </div>
  </div>
{% endmacro %}

{% macro scam_banner() %}
<div class="sumo-banner sumo-banner-warning" id="id_scam_alert" data-close-initial="hidden">
  <div class="content">
    {% include 'includes/icons/alert-icon.svg'%}
    <p class="heading">
      {{ _('<strong>Avoid support scams.</strong> We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.') }}
    </p>
    <a href="https://support.mozilla.org/kb/avoid-and-report-mozilla-tech-support-scams"
      class="sumo-button primary-button button-lg">{{ _('Learn More') }}</a>
    <button class="sumo-close-button close-button" data-close-id="id_scam_alert" data-close-memory="remember">
      <img src="{{ webpack_static('protocol/img/icons/close.svg') }}" />
    </button>
  </div>
</div>
{% endmacro %}

{% macro browse_by_topic(product=True) %}
  {% set row_one_left_slug="settings" %}
  {% set row_one_right_slug="installation-and-updates" %}
  {% set row_two_left_slug="email-and-messaging" %}
  {% set row_two_right_slug="performance-and-connectivity" %}
  {% set row_three_left_slug="privacy-and-security" %}
  {% set row_three_right_slug="browse" %}

  {% if product %}
    {% set link_name = "main-menu.topic-home" %}
    {% set row_one_left_url = url('products.topic_documents', topic_slug=row_one_left_slug ) %}
    {% set row_one_right_url = url('products.topic_documents', topic_slug=row_one_right_slug ) %}
    {% set row_two_left_url = url('products.topic_documents', topic_slug=row_two_left_slug ) %}
    {% set row_two_right_url = url('products.topic_documents', topic_slug=row_two_right_slug ) %}
    {% set row_three_left_url = url('products.topic_documents', topic_slug=row_three_left_slug ) %}
    {% set row_three_right_url = url('products.topic_documents', topic_slug=row_three_right_slug ) %}

  {% else %}
    {% set link_name = "main-menu.support-forum-home" %}
    {% set row_one_left_url = url('questions.list_by_topic', topic_slug=row_one_left_slug ) %}
    {% set row_one_right_url = url('questions.list_by_topic', topic_slug=row_one_right_slug ) %}
    {% set row_two_left_url = url('questions.list_by_topic', topic_slug=row_two_left_slug ) %}
    {% set row_two_right_url = url('questions.list_by_topic', topic_slug=row_two_right_slug ) %}
    {% set row_three_left_url = url('questions.list_by_topic', topic_slug=row_three_left_slug ) %}
    {% set row_three_right_url = url('questions.list_by_topic', topic_slug=row_three_right_slug ) %}
  {% endif %}

  <ul class="mzp-c-menu-item-list sumo-nav--sublist">
    <li>
      <a href="{{ row_one_left_url }}"
          data-event-name="link_click"
          data-event-parameters='{
          "link_name": "{{ link_name }}",
          "link_detail": "{{ row_one_left_slug }}"
        }'>
          {{ _(row_one_left_slug|slug_to_title) }}
      </a>
    </li>
    <li>
      <a href="{{ row_one_right_url }}"
          data-event-name="link_click"
          data-event-parameters='{
          "link_name": "{{ link_name }}",
          "link_detail": "{{ row_one_right_slug }}"
        }'>
          {{ _(row_one_right_slug|slug_to_title) }}
      </a>
    </li>
    <li>
      <a href="{{ row_two_left_url }}"
          data-event-name="link_click"
          data-event-parameters='{
          "link_name": "{{ link_name }}",
          "link_detail": "{{ row_two_left_slug }}"
        }'>
          {{ _(row_two_left_slug|slug_to_title) }}
      </a>
    </li>
    <li>
      <a href="{{ row_two_right_url }}"
          data-event-name="link_click"
          data-event-parameters='{
          "link_name": "{{ link_name }}",
          "link_detail": "{{ row_two_right_slug }}"
        }'>
          {{ _(row_two_right_slug|slug_to_title) }}
      </a>
    </li>
    <li>
      <a href="{{ row_three_left_url }}"
          data-event-name="link_click"
          data-event-parameters='{
          "link_name": "{{ link_name }}",
          "link_detail": "{{ row_three_left_slug }}"
        }'>
          {{ _(row_three_left_slug|slug_to_title) }}
      </a>
    </li>
    <li>
      <a href="{{ row_three_right_url }}"
          data-event-name="link_click"
          data-event-parameters='{
          "link_name": "{{ link_name }}",
          "link_detail": "{{ row_three_right_slug }}"
        }'>
          {{ _(row_three_right_slug|slug_to_title) }}
      </a>
    </li>
  </ul>
{% endmacro %}

{% macro aux_nav(user, hide_aaq_link=False) %}
<li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
  <a class="mzp-c-menu-title sumo-nav--link" href="{{ url('questions.home') }}" aria-haspopup="true"
    aria-controls="mzp-c-menu-panel-help">{{ _('Explore Help Articles') }}</a>
  <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-help">
    <div class="sumo-nav--dropdown-container">
      <div class="sumo-nav--dropdown-grid">
        <button class="mzp-c-menu-button-close" type="button"
          aria-controls="mzp-c-menu-panel-example">{{ _('Close Firefox menu') }}</button>
        <div class="sumo-nav--dropdown-col">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
          <div class="mzp-c-menu-item-head">
            <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <g transform="translate(3 3)" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"
                stroke-linecap="round">
                <rect stroke-linejoin="round" width="18" height="18" rx="2" />
                <path d="M4 5h10M4 9h10M4 13h4" />
              </g>
            </svg>
            <h4 class="mzp-c-menu-item-title">{{ _('Explore by product') }}</h4>
          </div>
            <ul class="mzp-c-menu-item-list sumo-nav--sublist">
              <li>
                <a href="{{ url('products.product', 'firefox') }}"
                  data-event-name="link_click"
                  data-event-parameters='{
                    "link_name": "main-menu.firefox-browser.product-home",
                    "link_detail": "firefox"
                  }'>
                  {{ _('Firefox desktop') }}
                </a>
              </li>
              <li>
                <a href="{{ url('products.product', 'mozilla-vpn') }}"
                  data-event-name="link_click"
                  data-event-parameters='{
                    "link_name": "main-menu.mozilla-vpn.product-home",
                    "link_detail": "mozilla-vpn"
                  }'>
                  {{ _('Mozilla VPN') }}
                </a>
              </li>
              <li>
                <a href="{{ url('products.product', 'ios') }}"
                  data-event-name="link_click"
                  data-event-parameters='{
                    "link_name": "main-menu.firefox-for-ios.product-home",
                    "link_detail": "ios"
                  }'>
                  {{ _('Firefox for iOS') }}
                </a>
              </li>
              <li>
                <a href="{{ url('products.product', 'thunderbird') }}"
                  data-event-name="link_click"
                  data-event-parameters='{
                    "link_name": "main-menu.thunderbird.product-home",
                    "link_detail": "thunderbird"
                  }'>
                  {{ _('Thunderbird') }}
                </a>
              </li>
              <li>
                <a href="{{ url('products.product', 'mobile') }}"
                  data-event-name="link_click"
                  data-event-parameters='{
                    "link_name": "main-menu.firefox-for-android.product-home",
                    "link_detail": "mobile"
                  }'>
                  {{ _('Firefox for Android') }}
                </a>
              </li>
              <li>
                <a class="color-link" href="{{ url('products') }}"
                  data-event-name="link_click"
                  data-event-parameters='{"link_name": "main-menu.browse-all-articles.list-products"}'>
                  {{ _('View all products') }}
                </a>
              </li>
            </ul>
          </section>
        </div>
        <div class="sumo-nav--dropdown-col">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
            <div class="mzp-c-menu-item-head">
              <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g transform="translate(3 3)" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"
                  stroke-linecap="round">
                  <rect stroke-linejoin="round" width="18" height="18" rx="2" />
                  <path d="M4 5h10M4 9h10M4 13h4" />
                </g>
              </svg>
              <h4 class="mzp-c-menu-item-title">{{ _('Explore by topic') }}</h4>
            </div>
            {{ browse_by_topic() }}
          </section>
        </div>
      </div>
    </div>
  </div>
</li>
<li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
  <a class="mzp-c-menu-title sumo-nav--link" href="#" aria-haspopup="true" aria-controls="mzp-c-menu-panel-tools">{{ _('Community Forums') }}</a>
  <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-tools">
    <div class="sumo-nav--dropdown-container">
      <div class="sumo-nav--dropdown-grid">
        <button class="mzp-c-menu-button-close" type="button"
          aria-controls="mzp-c-menu-panel-example">{{ _('Close Firefox menu') }}</button>
        <div class="sumo-nav--dropdown-col">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
            <div class="mzp-c-menu-item-head">
              <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24">
                <g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
                  stroke-linejoin="round">
                  <path
                    d="M17 17l-1.051 3.154a1 1 0 01-1.898 0L13 17H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2zM7 8h10M7 12h10" />
                </g>
              </svg>
              <h4 class="mzp-c-menu-item-title">{{ _('Browse by product') }}</h4>
            </div>
            <ul class="mzp-c-menu-item-list sumo-nav--sublist">
              <li>
                <a href="{{ url('questions.list', 'firefox')}}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.support-forum-home",
                    "link_detail": "desktop"
                  }'>
                   {{ _('Firefox desktop') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.list', 'focus-firefox') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.support-forum-home",
                    "link_detail": "focus"
                  }'>
                   {{ _('Firefox Focus') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.list', 'ios') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.support-forum-home",
                    "link_detail": "ios"
                  }'>
                   {{ _('Firefox for iOS') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.list', 'thunderbird') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.support-forum-home",
                    "link_detail": "thunderbird"
                  }'>
                   {{ _('Thunderbird') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.list', 'mobile') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.support-forum-home",
                    "link_detail": "mobile"
                  }'>
                   {{ _('Firefox for Android') }}
                </a>
              </li>
              <li>
                <a class="color-link" href="{{ url('questions.home') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.support-forum-home",
                    "link_detail": "view-all-home"
                  }'>
                   {{ _('View all forums') }}
                </a>
              </li>
            </ul>
          </section>
        </div>
        <div class="sumo-nav--dropdown-col">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
            <div class="mzp-c-menu-item-head">
              <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24">
                <path
                  d="M10.5 9.5L3 17c-1 1.667-1 3 0 4s2.333.833 4-.5l7.5-7.5c2.333 1.054 4.333.734 6-.96 1.667-1.693 1.833-3.707.5-6.04l-3 3-2.5-.5L15 6l3-3c-2.333-1.333-4.333-1.167-6 .5-1.667 1.667-2.167 3.667-1.5 6z"
                  stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
              <h4 class="mzp-c-menu-item-title">{{ _('Browse all forum threads by topic') }}</h4>
            </div>
            {{ browse_by_topic(product=False) }}
          </section>
        </div>
      </div>
    </div>
  </div>
</li>

<li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
  <a class="mzp-c-menu-title sumo-nav--link" href="{{ url('questions.home') }}" aria-haspopup="true"
    aria-controls="mzp-c-menu-panel-help">{{ _('Ask a Question') }}</a>
  <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-help">
    <div class="sumo-nav--dropdown-container">
      <div class="sumo-nav--dropdown-grid">
        <button class="mzp-c-menu-button-close" type="button"
          aria-controls="mzp-c-menu-panel-example">{{ _('Close Firefox menu') }}
        </button>
        <div class="sumo-nav--dropdown">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
            <div class="mzp-c-menu-item-head">
              <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24">
                <g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
                  stroke-linejoin="round">
                  <path d="M11 3H4a2 2 0 00-2 2v12a2 2 0 002 2h9l2 4 2-4h2a2 2 0 002-2v-6" />
                  <path d="M17.5 2.5a2.121 2.121 0 013 3L13 13l-4 1 1-4 7.5-7.5z" />
                </g>
              </svg>
              <h4 class="mzp-c-menu-item-title">{{ _('Get help with') }}</h4>
            </div>
            <ul class="mzp-c-menu-item-list sumo-nav--sublist-aaq">
              <li>
                <a href="{{ url('questions.aaq_step2', 'desktop') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "desktop"
                  }'>
                   {{ _('Firefox desktop') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'firefox-enterprise') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "firefox-enterprise"
                  }'>
                   {{ _('Firefox for Enterprise') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'relay') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "relay"
                  }'>
                   {{ _('Firefox Relay') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'thunderbird') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "thunderbird"
                  }'>
                   {{ _('Thunderbird') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'ios') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "ios"
                  }'>
                   {{ _('Firefox for iOS') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'focus') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "focus"
                  }'>
                   {{ _('Firefox Focus') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'monitor') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "monitor"
                  }'>
                   {{ _('Monitor') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'mozilla-account') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "mozilla-account"
                  }'>
                   {{ _('Mozilla Account') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'mobile') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "mobile"
                  }'>
                   {{ _('Firefox for Android') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'mozilla-vpn') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "mozilla-vpn"
                  }'>
                   {{ _('Mozilla VPN') }}
                </a>
              </li>
              <li>
                <a href="{{ url('questions.aaq_step2', 'pocket') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-2",
                    "link_detail": "pocket"
                  }'>
                   {{ _('Pocket') }}
                </a>
              </li>
              <li>
                <a class="color-link" href="{{ url('questions.aaq_step1') }}"
                   data-event-name="link_click"
                   data-event-parameters='{
                    "link_name": "main-menu.aaq-step-1",
                    "link_detail": "view-all"
                  }'>
                   {{ _('View all') }}
                </a>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </div>
  </div>
</li>

{% if not user.is_authenticated or not is_contributor(user) %}
  <li class="mzp-c-menu-category">
    <a class="mzp-c-menu-title sumo-nav--link" href="{{ url('landings.contribute') }}"
      data-event-name="link_click"
      data-event-parameters='{"link_name": "main-menu.contribute.contribute-home"}'>
      {{ _('Contribute') }}
    </a>
  </li>
{% else %}
  <li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
    <a class="mzp-c-menu-title sumo-nav--link" href="#" aria-haspopup="true" aria-controls="mzp-c-menu-panel-tools">{{ _('Contribute') }}</a>
    <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-tools">
      <div class="sumo-nav--dropdown-container">
        <div class="sumo-nav--dropdown-grid">
          <button class="mzp-c-menu-button-close" type="button"
            aria-controls="mzp-c-menu-panel-example">{{ _('Close Firefox menu') }}</button>
          <div class="sumo-nav--dropdown-col">
            <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
              <a class="mzp-c-menu-item-link" href="{{ url('forums.forums') }}"
                data-event-name="link_click"
                data-event-parameters='{"link_name": "main-menu.contributor-discussions"}'>
                <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24">
                  <g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path
                      d="M17 17l-1.051 3.154a1 1 0 01-1.898 0L13 17H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2zM7 8h10M7 12h10" />
                  </g>
                </svg>
                <h4 class="mzp-c-menu-item-title">{{ _('Contributor discussions') }}</h4>
              </a>
              <ul class="mzp-c-menu-item-list sumo-nav--sublist">
                {{ _discussion_nav_links(user, default_language, active) }}
              </ul>
            </section>
          </div>
          <div class="sumo-nav--dropdown-col">
            <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
              <a class="mzp-c-menu-item-link" href="{{ url('products.product', slug='contributor') }}"
                data-event-name="link_click"
                data-event-parameters='{"link_name": "main-menu.contributor-tools"}'>
                <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24">
                  <path
                    d="M10.5 9.5L3 17c-1 1.667-1 3 0 4s2.333.833 4-.5l7.5-7.5c2.333 1.054 4.333.734 6-.96 1.667-1.693 1.833-3.707.5-6.04l-3 3-2.5-.5L15 6l3-3c-2.333-1.333-4.333-1.167-6 .5-1.667 1.667-2.167 3.667-1.5 6z"
                    stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
                <h4 class="mzp-c-menu-item-title">{{ _('Contributor tools') }}</h4>
              </a>
              <ul class="mzp-c-menu-item-list sumo-nav--sublist">
               {{ _tools_nav_links(user, default_language, active, context="main-menu") }}
              </ul>
            </section>
          </div>
        </div>
      </div>
    </div>
  </li>
{% endif %}
{% endmacro %}


{% macro profile_nav(user, hide_aaq_link=False) %}
{% if not hide_header_search %}
<li class="mzp-c-menu-category sumo-nav--item-right">
  {{ search_box(settings, id='support-search', params=search_params) }}

  {% if show_header_fx_download() %}
  {# show-fx-download.js will remove the 'hidden' class below if the visitor is *NOT* using Firefox #}
  <a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=non-fx-button&amp;utm_content=header-download-button"
    class="firefox-download-button hidden sumo-button primary-button button-lg">{{ _('Download Firefox') }}</a>
  {% endif %}
</li>
{% endif %}

<li
  class="mzp-c-menu-category {% if user.is_authenticated %}mzp-has-drop-down mzp-js-expandable{% else %}logged-out-button-row{% endif %} {% if hide_locale_switcher %}sumo-nav--item-right{% endif %}">
  {% if user.is_authenticated %}
  <a class="mzp-c-menu-title sumo-nav--link has-avatar hide-on-mobile" rel="nofollow" href="{{ url('users.auth') }}">
    <span class="sumo-nav--username">{{ display_name(user) }}</span>
    <div class="avatar-container">
      <img class="avatar" src="{{ profile_avatar(user) }}" alt="Avatar for Username">
      {% if unread_message_count > 0 %}
      <div class="avatar-container-message-alert"></div>
      {% endif %}
    </div>
  </a>
  <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-profile">
    <div class="sumo-nav--dropdown-container">
      <div class="sumo-nav--dropdown-grid">
        <button class="mzp-c-menu-button-close" type="button"
          aria-controls="mzp-c-menu-panel-profile">{{ _('Close Firefox menu') }}</button>
        <div class="sumo-nav--dropdown-thirds">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
            <a class="mzp-c-menu-item-link" rel="nofollow" href="{{ profile_url(user) }}">
              <svg class="mzp-c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g transform="translate(5 3)" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd">
                  <path d="M0 18c1-4 3.333-6 7-6s6 2 7 6" stroke-linecap="round" />
                  <circle cx="7" cy="4" r="4" />
                </g>
              </svg>
              <h4 class="mzp-c-menu-item-title">{{ _('View Profile') }}</h4>
              <p class="mzp-c-menu-item-desc">
                {{ _('Manage your information and see your contributions.') }}
              </p>
            </a>
            <ul class="mzp-c-menu-item-list sumo-nav--sublist">
              <li><a rel="nofollow" href="{{ url('users.edit_my_profile') }}">{{ _('Edit Profile') }}</a></li>
              <li><a rel="nofollow" href="{{ url('users.questions', user.username) }}">{{ _('My Questions') }}</a></li>
            </ul>
          </section>
        </div>
        <div class="sumo-nav--dropdown-thirds">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
            <a class="mzp-c-menu-item-link" rel="nofollow" href="{{ url('users.edit_settings') }}">
              <svg class="mzp-c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g transform="translate(1 1)" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"
                  stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="11" cy="11" r="3" />
                  <path
                    d="M18.4 14a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V20a2 2 0 11-4 0v-.09A1.65 1.65 0 008 18.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H2a2 2 0 110-4h.09A1.65 1.65 0 003.6 8a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H8a1.65 1.65 0 001-1.51V2a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V8c.26.604.852.997 1.51 1H20a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" />
                </g>
              </svg>
              <h4 class="mzp-c-menu-item-title">{{ _('Settings') }}</h4>
              <p class="mzp-c-menu-item-desc">
                {{ _('Manage your privacy and notification preferences.') }}
              </p>
            </a>
          </section>
        </div>
        <div class="sumo-nav--dropdown-thirds">
          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
            <a class="mzp-c-menu-item-link" href="{{ url('messages.inbox') }}">
              <svg class="mzp-c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
                  stroke-linejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                  <path d="M22 6l-10 7L2 6" />
                </g>
              </svg>
              <h4 class="mzp-c-menu-item-title">{{ _('Inbox') }}</h4>
              {% if unread_message_count > 0 %}
              <span class="message-count-alert">{{ unread_message_count }}</span>
              {% endif %}
              <p class="mzp-c-menu-item-desc">
                {{ _('Exchange messages with other contributors.') }}
              </p>
            </a>
          </section>
          <div class="sumo-button-wrap align-end">
            <form id="sign-out" action="{{ url('users.logout') }}" method="post">
              {% csrf_token %}
            </form>
            <a class="sumo-button secondary-button button-lg" data-type="submit" data-form="sign-out" href="#sign-out"
              data-event-label="Sign Out">
              {{ _('Sign Out') }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% elif not request.path == url('users.auth') %}
  <a rel="nofollow" href="{{ url('users.auth') }}" class="sumo-button secondary-button button-lg"
    data-event-name="link_click"
    data-event-parameters='{"link_name": "main-menu.sign-in-up"}'>
    {{ _('Sign In/Up') }}
  </a>
  {% endif %}
</li>
{% endmacro %}

{% macro content_editor(field) %}
<div class="field has-large-textarea editor{% if field.errors %} invalid{% endif %}"
  data-media-search-url="{{ url('gallery.async') }}" data-media-gallery-url="{{ url('gallery.home') }}">
  <div class="editor-tools"></div>
  <div>{{ field|safe }}</div>
  {{ field.errors }}
</div>
<div class="field" id="language-select-field">
  <select id="_languages-select-box">
    {% for lang in settings.LANGUAGE_CHOICES %}
    <option value="{{ lang[0] }}" {% if lang[0] == request.LANGUAGE_CODE %}selected="selected" {% endif %}>{{ lang[1] }}
      ({{ lang[0] }})</option>
    {% endfor %}
  </select>
</div>
{% endmacro %}



{% macro list_view_item(url, label, class=None, icon_url=None) %}
<li>
  <a href="{{ url }}" {% if class %} class="{{ class }}" {% endif %}>
    {% if icon_url %}
    <img class="icon" src="{{ icon_url }}" />
    {% endif %}
    {{ label }}
  </a>
</li>
{% endmacro %}

{% macro for_contributors_sidebar(user, default_language, active=None, menu="contributor-discussions", locale=None, is_collapsible=False) -%}
{% if user.is_authenticated %}
<nav class="sidebar-nav" id="for-contributors-sidebar">
  <span class="details-heading"></span>
    <ul class="sidebar-nav--list">
    {% if menu == "contributor-tools" %}
      <li class="sidebar-subheading sidebar-nav--heading-item hide-on-mobile">{{ _('Contributor tools') }}</li>
      {{ _tools_nav_links(user, default_language, active, context="sidebar-menu", locale=locale, is_collapsible=is_collapsible) }}
    {% else %}
      <li class="sidebar-subheading sidebar-nav--heading-item">{{ _('Contributor discussions') }}</li>
      {{ _discussion_nav_links(user, default_language, active, context="sidebar-menu") }}
    {% endif %}
    </ul>
</nav>
{% endif %}
{%- endmacro %}

{% macro _discussion_nav_links(user, default_language, active=None, context="main-menu") -%}
<li>
  <a href="{{ url('forums.threads', 'contributors') }}" {% if active == "contributors" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.community-discussions' }}"}'>
    {{ _('SUMO community discussions') }}
  </a>
</li>
<li>
  <a href="{{ url('forums.threads', 'support-forum-contributors') }}" {% if active == "support-forum-contributors" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.support-forum-discussions' }}"}'>
    {{ _('Support forum discussions') }}
  </a>
</li>
<li>
  <a href="{{ url('wiki.locale_discussions') }}" {% if active == "article-discussions" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.article-discussions' }}"}'>
    {{ _('Article discussions') }}
  </a>
</li>
<li>
  <a href="{{ url('forums.threads', 'l10n-forum') }}" {% if active == "l10n-forum" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.l10n-discussions' }}"}'>
    {{ _('Localization discussions') }}
  </a>
</li>
{% if context == "main-menu" %}
  <li>
    <a class="color-link" href="{{ url('forums.forums') }}"
      data-event-name="link_click"
      data-event-parameters='{"link_name": "{{ context + '.all-discussions' }}"}'>
      {{ _('View all discussions') }}
    </a>
  </li>
{% endif %}
{% if context == "sidebar-menu" %}
  <li>
    <a href="{{ url('forums.threads', 'knowledge-base-articles') }}" {% if active == "knowledge-base-articles" %} class="selected" {% endif %}
      data-event-name="link_click"
      data-event-parameters='{"link_name": "{{ context + '.kb-discussions' }}"}'>
      {{ _('Knowledge base discussions') }}
    </a>
  </li>
{% if user.has_perm('flagit.can_moderate') %}
  <li>
    <a href="{{ url('forums.threads', 'forum-moderators') }}" {% if active == "forum-moderators" %} class="selected" {% endif %}
      data-event-name="link_click"
      data-event-parameters='{"link_name": "{{ context + '.forum-moderator-discussions' }}"}'>
      {{ _('Forum moderator discussions') }}
    </a>
  </li>
{% endif %}
  <li>
    <a href="{{ url('forums.threads', 'off-topic') }}" {% if active == "off-topic" %} class="selected" {% endif %}
      data-event-name="link_click"
      data-event-parameters='{"link_name": "{{ context + '.off-topic-discussions' }}"}'>
      {{ _('Off topic discussions') }}
    </a>
  </li>
  <li>
    <a href="{{ url('forums.threads', 'lost-threads') }}" {% if active == "lost-threads" %} class="selected" {% endif %}
      data-event-name="link_click"
      data-event-parameters='{"link_name": "{{ context + '.lost-thread-discussions' }}"}'>
      {{ _('Lost thread discussions') }}
    </a>
  </li>
{% endif %}
{% endmacro %}

{% macro _tools_nav_links(user, default_language, active=None, context="main-menu", locale=None, is_collapsible=False) -%}
{% if user.has_perm('flagit.can_moderate') %}
  <li>
    <a href="{{ url('flagit.flagged_queue') }}"  {% if active == "flagit.flagged_queue" %} class="selected" {% endif %}
      data-event-name="link_click"
      data-event-parameters='{"link_name": "{{ context + '.moderate-forum-content' }}"}'>
      {{ _('Moderate forum content') }}
    </a>
  </li>
{% endif %}
<li>
  <a href="{{ url('dashboards.localization') }}" {% if active == "dashboards.localization" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.dashboards-l10n' }}"}'>
    {{ _('Knowledge base dashboards') }}
  </a>
</li>
<li>
  <a href="{{ url('products.product', slug='contributor') }}" {% if active == "products.product" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.guides' }}"}'>
    {{ _('Guides') }}
  </a>
</li>
{% if context == "sidebar-menu" %}
  <li>
    <a href="{{ url('wiki.category', category=60) }}" {% if active == "wiki.category" %} class="selected" {% endif %}
      data-event-name="link_click"
      data-event-parameters='{"link_name": "{{ context + '.templates.kb-list-articles' }}"}'>
      {{ _('Templates') }}
    </a>
  </li>
{% endif %}
<li>
  <a href="{{ url('gallery.home') }}" {% if active == "gallery.home" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.media-gallery' }}"}'>
    {{ _('Media gallery') }}
  </a>
</li>
<li>
  <a href="{{ url('wiki.revisions') }}" {% if active == "wiki.revisions" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.recent-revisions.kb-cms' }}"}'>
    {{ _('Recent revisions') }}
  </a>
</li>
<li>
  <a href="{{ url('community.home') }}" {% if active == "community.home" %} class="selected" {% endif %}
    data-event-name="link_click"
    data-event-parameters='{"link_name": "{{ context + '.community-hub' }}"}'>
     {{ _('Community hub') }}
  </a>
</li>
{% if context == "sidebar-menu" %}
  <div {% if is_collapsible %} class="collapsible-content" {% endif %}>
    <li>
      <a href="{{ url('wiki.locales') }}" {% if active == "wiki.locales" %} class="selected" {% endif %}
        data-event-name="link_click"
        data-event-parameters='{"link_name": "{{ context + '.list-locales' }}"}'>
        {{ _('Locales') }}
      </a>
    </li>
    <li {{ active|class_selected('metrics') }}></li>
      <a href="{{ url('dashboards.locale_metrics', locale) }}" {% if active == "dashboards.locale_metrics" %} class="selected" {% endif %}
        data-event-name="link_click"
        data-event-parameters='{"link_name": "{{ context + '.dashboards-locale-metrics' }}"}'>
        {{ _('Locale metrics') }}</a>
    </li>
    <li {{ active|class_selected('aggregated') }}>
      <a href="{{ url('dashboards.aggregated_metrics') }}" {% if active == "dashboards.aggregated_metrics" %} class="selected" {% endif %}
        data-event-name="link_click"
        data-event-parameters='{"link_name": "{{ context + '.dashboards-aggregated-metrics' }}"}'>
        {{ _('Aggregated metrics') }}</a>
    </li>
  </div>
{% endif %}
{% if is_collapsible %}
  <a href="#" class="color-link show-more-btn hide-on-mobile" id="show-more-link">
      {{ _('Show More') }}
  </a>
{% endif %}
{% endmacro %}

{# This is designed to be used like this:
  {% call announcement_bar('foo', 'info') %}
    This is the contents of the bar.
  {% endcall %}
#}
{% macro announcement_bar(id, level, close_memory="", close_type="") -%}
  {% set content = caller() %}
  {% if content %}
    <div id="announce-{{ id }}" class="mzp-c-notification-bar mzp-t-{{ level }}"
      {% if close_memory %}data-close-initial="hidden"{% endif %}>
      <button class="mzp-c-notification-bar-button close-button" data-close-id="announce-{{ id }}" type="button"
        {% if close_memory %}data-close-memory="{{ close_memory }}" {% endif %}
        {% if close_type %}data-close-type="{{ close_type }}" {% endif %}>
      </button>
      <p>{{ content }}</p>
    </div>
  {% endif %}
{% endmacro %}

{% macro favicon() %}
<link rel="apple-touch-icon" sizes="180x180" href="{{ webpack_static('sumo/img/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" href="{{ webpack_static('sumo/img/favicon.png') }}">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="{{ webpack_static('sumo/img/favicon.png') }}">
<meta name="theme-color" content="#ffffff">
{% endmacro %}

{% macro download_firefox() %}
{# show-fx-download.js will remove the 'hidden' class below if the visitor is *NOT* using Firefox #}
<div class="firefox-download-button hidden">
  <div class="download-buttons">
    <div class="download-firefox">
      <a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=non-fx-button&amp;utm_content=body-download-button"
        class="download-button sumo-button primary-button button-lg">
        {{ _('Download Firefox') }}
      </a>
      <ul class="download-info text-body-xs">
        <li><a href="https://www.mozilla.org/firefox/all/">{{ _('Systems and Languages') }}</a></li>
        <li><a href="https://www.mozilla.org/firefox/notes">{{ _("What's New") }}</a></li>
        <li><a href="https://www.mozilla.org/legal/privacy/firefox">{{ _('Privacy') }}</a></li>
      </ul>
    </div>
  </div>
</div>
{% endmacro %}

{% macro field(field=None, extra_classes=None) %}
<div class="field{% if extra_classes %} {{ extra_classes }}{% endif %}{% if field.errors %} has-error{% endif %}">

  <label for="{{ field.id_for_label }}">{{ field.label }}
    {% if field.field.required %}
    <span class="required">
      *
    </span>
    {% endif %}
  </label>

  {{ field }} {# Entire input field is generated by Django #}

  {% if field.errors %}
  {% for error in field.errors %}
  <span class="form-error is-visible">{{ error }}</span>
  {% endfor %}
  {% endif %}

  {% if field.help_text %}
  <p class="help-text">{{ field.help_text|safe }}</p>
  {% endif %}
</div>
{% endmacro %}

{% macro checkbox(field=None, extra_classes=None) %}
<div
  class="field checkbox{% if extra_classes %} {{ extra_classes }}{% endif %}{% if field.errors %} has-error{% endif %}">
  {{ field }} {# Entire input field is generated by Django #}
  <label for="{{ field.id_for_label }}">{{ field.label }}</label>

  {% if field.errors %}
  {% for error in field.errors %}
  <span class="form-error is-visible">{{ error }}</span>
  {% endfor %}
  {% endif %}

  {% if field.help_text %}
  <p class="help-text">{{ field.help_text|safe }}</p>
  {% endif %}
</div>
{% endmacro %}

{% macro featured_articles(articles, new_tab=False) %}
<div class="sumo-card-grid is-four-wide">
  <div class="scroll-wrap">
    {% for doc in articles %}
    <div class="card card--article zoom-on-hover">
      <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="{{ doc.title }}" />
      <div class="card--details">
        <h3 class="card--title">
          <a class="expand-this-link" href="{{ url('wiki.document', doc.slug) }}"{% if new_tab %} target="_blank"{% endif %}
            data-event-name="link_click"
            data-event-parameters='{"link_name": "featured.kb-article"}'>
            {{ doc.title }}</a>
        </h3>
        <p class="card--desc">
          {{ doc.current_revision.summary }}
        </p>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endmacro %}