{% macro li_field(form, field_name, label='', id='', classes='', note='', icon_class='', image=False, show_label=True) %}
    {% set field = form[field_name] %}
    <li id="field_{{field_name}}" class="field {{ 'type_%s' % field.field.widget.input_type if field.field.widget.input_type }}{{ ' required' if field.field.required }}{{ ' error' if field.errors }} {{classes}}">
        {% if show_label %}
            <label for="id_{{field_name}}">{% if icon_class %}<i class="{{icon_class}}" aria-hidden="true"></i>{% endif %}{{label or field.label}}</label>
        {% endif %}
        {{ field|safe }}
        {% if note %}
            <p class="note">{{ note }}</p>
        {% endif %}
        {{ field.errors|safe }}
    </li>
{% endmacro %}

{% macro search_box(settings, id=False, prefix=None, target=None,
                    placeholder=None) %}
  {% if placeholder is none %}
    {% set placeholder = _('Search Firefox Help') %}
  {% endif %}
  <div class="support-search"{% if id %} id="{{ id }}"{% endif %} role="search">
    {% if prefix %}
      {{ prefix }}
    {% endif %}
    <form action="{{ url('search') }}" method="get" {% if target %} target="{{ target }}"{% endif %}>
      <input type="text" class="text" name="q" placeholder="{{ placeholder }}" required="required" />
      <button type="submit" class="img-submit" title="{{ _('Search') }}">
        <img src="{{ settings.MEDIA_URL }}img/btn.search.png" alt="{{ _('Search') }}" />
      </button>
    </form>
  </div>
{% endmacro %}

{% macro greeting(user, settings) %}
  <div id="greeting">
    {% if user.is_authenticated() %}
      {{ _('Welcome, <span class="user">{user}</span>.')|fe(user=user) }}
      <nav>
        <a href="{{ user.get_absolute_url() }}">{{ _('Profile') }}</a>
        |
        <a href="{{ url('users.logout') }}">{{ _('Sign Out') }}</a>
      </nav>
    {% else %}
      <p>
        {% trans login_url=url('users.login') %}
          Want to contribute?<br /> <a href="{{ login_url }}">Log in</a>
        {% endtrans %}
      </p>
    {% endif %}
  </div>
{% endmacro %}

{% macro content_editor(field) %}
  {#
  <div class="editor{% if field.errors %} invalid{% endif %}" data-media-search-url="{{ url('gallery.async') }}" data-media-gallery-url="{{ url('gallery.home') }}">
  #}
  <div class="editor{% if field.errors %} invalid{% endif %}">
    <div class="editor-tools"></div>
    {{ field|safe }}
  </div>
{% endmacro %}

{% macro optimizely_script() %}
  {% if config.OPTIMIZELY_PROJECT_ID and config.OPTIMIZELY_PROJECT_ID != '0' %}
  <script src="//cdn.optimizely.com/js/{{ config.OPTIMIZELY_PROJECT_ID }}.js"></script>
  {% endif %}
{% endmacro %}

{% macro newsletter_widget(form) %}
<fieldset id="apps-newsletter-subscribe" class="section">
  {{ csrf() }}
  <legend><b>{{ _('Firefox Apps & Hacks Newsletter') }}</b></legend>

  <p>{% trans %}
    Sign up now for news about Firefox OS, Firefox Marketplace and the Open Web apps ecosystem. <strong>Join us!</strong>
  {% endtrans %}</p>

  {% if messages %}
  <ul class="messages">
    {% for message in messages %}
    <li {% if message.tags %} class="notice {{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
  </ul>
  {% endif %}

  <ol>
    {{ li_field(form, 'newsletter') }}
    <li class="newsletter-setting">
      {{ form.country.errors }}
      <label for="country">{{ form.country.label }}</label>
      {{ form.country }}
    </li>
    <li class="newsletter-setting check">
      {{ form.format.errors }}
      <span class="label">{{ form.format.label }}</span>
      <fieldset class="inline">
        {% for c in form.fields.format.choices %}
        <label for="sub-{{ c[0] }}"><input type="radio" name="format" value="{{ c[0] }}" id="sub-{{ c[0] }}" {% if form.fields.format.initial == c %}checked="checked"{% endif %}>{{ c[1] }}</label>
        {% endfor %}
      </fieldset>
    </li>
    <li class="newsletter-setting agree">
      {{ form.agree.errors }}
      <label for="id_agree">
        {{ form.agree }} {{form.agree.label}}
        {% trans privacy_url='http://www.mozilla.org/en-US/privacy' %}
          to the <a href="{{ privacy_url }}">Privacy Policy</a>
        {% endtrans %}
      </label>
    </li>
  </ol>
</fieldset>
{% endmacro %}