{% macro print_readout_body(readout, locale=None, max_rows=10, product=None) %}
  {% if not readout.hide_readout %}
    <ul class="readout-modes" data-slug="{{ readout.slug }}">
      {% for key, name in readout.modes %}
        <li class="mode{% if key == readout.default_mode %} active
        {% endif %}" data-url="{{ url('dashboards.wiki_rows',
                readout.slug)|urlparams(max=max_rows, mode=key, locale=locale, product=product.slug) }}">
          <a href="#">{{ name }}</a>
        </li>
      {% endfor %}
    </ul>
    {% if readout.description %}
      <p>
        {{ readout.description }}
      </p>
    {% endif %}
    <table class="documents" id="{{ readout.slug }}-table">
      {{ readout.render(max_rows=max_rows)|safe }}
    </table>
    <div class="table-footer">
      <a href="{{ readout.get_absolute_url(request.LANGUAGE_CODE, product) }}">{{ readout.details_link_text }}</a>
    </div>
  {% endif %}
{% endmacro %}

{% macro print_readout(readout, locale=None, max_rows=10, product=None) %}
  {% if not readout.hide_readout %}
    <details open>
      <summary class="with-mode-selectors">
        <a id="{{ readout.slug }}">{{ readout.title }}</a>
      </summary>
      {{ print_readout_body(readout, locale, max_rows, product) }}
    </details>
  {% endif %}
{% endmacro %}

{% macro overview_section(readouts, printed_rows) %}
{# printed_rows is a tuple of pairs, (row, should_color), like so:
  ((row1, True/False), (row2, True/False), ... etc) #}
  <details open>
    <summary>{{ _('Overview') }}</summary>
    <table class="overview l10n-overview">
      {% for row, should_color in printed_rows %}
        {% if row.title == _('Top 100 Articles') %}
          <tr class="most-visited-row">
            <td class="row-title">
              {{ row.title }}
              <div>{{ row.description }}</div>
            </td>
            <td>
              {% trans numerator=number(row.numerator), denominator=number(row.denominator) %}
                {{ numerator }}
                <small>of {{ denominator }}</small>
              {% endtrans %}
            </td>
            <td>
              {{ row.percent }}%
              <div class="percent-graph">
                <div style="width: {{ row.percent }}%"{% if should_color %} class="{{ 'best' if row.percent == 100 else ('better' if row.percent >= 20 else 'bad') }}"{% endif %}></div>
              </div>
            </td>
          </tr>
        {% else %}
          <tr>
            <td class="row-title">
              {{ row.title }}
              <div>{{ row.description }}</div>
            </td>
            <td>
              {% trans numerator=number(row.numerator), denominator=number(row.denominator) %}
                {{ numerator }}
                <small>of {{ denominator }}</small>
              {% endtrans %}
            </td>
            <td>
              {{ row.percent }}%
              <div class="percent-graph">
                <div style="width: {{ row.percent }}%"{% if should_color %} class="{{ 'best' if row.percent == 100 else ('better' if row.percent >= 20 else 'bad') }}"{% endif %}></div>
              </div>
            </td>
          </tr>
        {% endif %}
      {% endfor %}
      <tr class="ui-strings-row">
        <td class="row-title">
          {{ _('User Interface') }}
          <div>
            {% trans url=_('https://pontoon.mozilla.org/projects/sumo/', context='L10n: Link to a site with information on how to translate the UI into your language.') %}
              A fully translated user interface improves the experience for
              site visitors in your language. Help
              <a href="{{ url }}">translate the interface</a>.
            {% endtrans %}
          </div>
        </td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </details>
{% endmacro %}

{% macro print_checkbox_row(label,
                            on_default_locale,
                            is_watching_default,
                            is_watching_other,
                            watch_view,
                            unwatch_view,
                            default_locale,
                            show_default=True,
                            show_other=True,
                            product=None) %}
  <tr>
    <th class="state">{{ label }}</th>
    <td>
      {% if show_default %}
        {% if product %}
          {% set watch_url = url(watch_view, locale=default_locale, product=product.slug) %}
          {% set unwatch_url = url(unwatch_view, locale=default_locale, product=product.slug) %}
        {% else %}
          {% set watch_url = url(watch_view, locale=default_locale) %}
          {% set unwatch_url = url(unwatch_view, locale=default_locale) %}
        {% endif %}
        <input data-action-watch="{{ watch_url }}"
               data-action-unwatch="{{ unwatch_url }}"
               type="checkbox"
               {% if is_watching_default %}checked="checked"{% endif %} />
      {% endif %}
    </td>
    {% if not on_default_locale and show_other %}
      {% if product %}
        {% set watch_url = url(watch_view, product=product.slug) %}
        {% set unwatch_url = url(unwatch_view, product=product.slug) %}
      {% else %}
        {% set watch_url = url(watch_view) %}
        {% set unwatch_url = url(unwatch_view) %}
      {% endif %}
      <td>
        <input data-action-watch="{{ watch_url }}"
               data-action-unwatch="{{ unwatch_url }}"
               type="checkbox"
               {% if is_watching_other %}checked="checked"{% endif %} />
      </td>
    {% endif %}
  </tr>
{% endmacro %}

{% macro print_subscription_menu(default_locale_name,
                                 current_locale_name,
                                 on_default_locale,
                                 is_watching_default_locale,
                                 is_watching_other_locale,
                                 is_watching_default_approved,
                                 is_watching_other_approved,
                                 default_locale,
                                 show_default_waiting=True,
                                 show_default_approved=True,
                                 product=None) %}
  <div id="doc-watch">
    <button class="sumo-button primary-button" type="submit" data-sumo-modal="subscribe-modal">
      {{ pgettext('l10n dashboard', 'Subscribe...') }}
    </button>

    <div id="subscribe-modal" class="mzp-u-modal-content">
      <form action="" method="POST">
        {% csrf_token %}
        <table>
          <tr>
            <th />
            <th>{{ _(default_locale_name) }}</th>
            {% if not on_default_locale %}
              <th>{{ current_locale_name }}</th>
            {% endif %}
          </tr>
          {{ print_checkbox_row(_('Waiting for review'), on_default_locale, is_watching_default_locale, is_watching_other_locale, 'wiki.locale_watch', 'wiki.locale_unwatch', default_locale, show_default=show_default_waiting, product=product) }}
          {{ print_checkbox_row(_('Approved'), on_default_locale, is_watching_default_approved, is_watching_other_approved, 'wiki.approved_watch', 'wiki.approved_unwatch', default_locale, show_default=show_default_approved, product=product) }}
          {{ print_checkbox_row(_('Ready for localization'), on_default_locale, is_watching_default_ready, False, 'wiki.ready_watch', 'wiki.ready_unwatch', default_locale, show_other=False, product=product) }}
        </table>

        <div class="card is-shaded highlight">
          <p>
          {% if product %}
            {{ _('Please note that these selections are specific to the current product selected.') }}
          {% else %}
            {{ _('Please note that you will be subscribed to these notifications for all products. If you are only interested in specific products, please go to the dashboard for that product.') }}
          {% endif %}
          </p>
        </div>
      </form>
    </div>
  </div>
{% endmacro %}

{% macro product_selector(products, current) %}
  <div id="product-selector">
    <select>
      <option value="">{{ _('All Products') }}</option>
      {% for p in products %}
        <option value="{{ p.slug }}" {% if current == p %}selected="selected"{% endif %}>
          {{ pgettext('DB: products.Product.title', p.title) }}
        </option>
      {% endfor %}
    </select>
  </div>
{% endmacro %}

{% macro product_choice_list(products, current, url_) %}
<div class="mzp-c-menu-list featured-dropdown">
  <h3 class="mzp-c-menu-list-title has-icon sumo-page-subheading" data-has-dropdown>
    {% if current == None %}
    <img src="{{ webpack_static('sumo/img/sumo-icon-small.png') }}" class="icon-md" alt="All Products logo" />
    {{ _('All Products') }}
    {% else %}
    <img src="{{ current.image_url }}" class="icon-md" alt="{{ current.title }} logo" />
    {{ pgettext('DB: products.Product.title', current.title) }}
    {% endif %}
  </h3>
  <ul class="mzp-c-menu-list-list">
    <li class="mzp-c-menu-list-item {% if current == None %}is-selected{% endif %}">
      <a class="has-icon" href="{{ request.path }}">
        <img src="{{ webpack_static('sumo/img/sumo-icon-small.png') }}" class="icon-md" alt="" />
        <span>{{ _('All Products') }}</span>
      </a>
    </li>

    {% for p in products %}
    <li class="mzp-c-menu-list-item {% if current == p %}is-selected{% endif %}">
      <a class="has-icon" href="{{ url_|urlparams(product=p.slug, category=category) }}">
        <img src="{{ p.image_url }}" class="icon-md" alt="" />
        <span>{{ pgettext('DB: products.Product.title', p.title) }}</span>
      </a>
    </li>
    {% endfor %}
  </ul>
</div>
{% endmacro %}

{% macro topic_selector(topics, current) %}
  <div id="topic-selector">
    <select>
      <option value="">{{ _('All Topics') }}</option>
      {% for t in topics %}
        <option value="{{ t.slug }}" {% if current == t %}selected="selected"{% endif %}>
          {{ pgettext('DB: products.Topic.title', t.title) }}
        </option>
      {% endfor %}
    </select>
  </div>
{% endmacro %}


{% macro category_filter() %}
  <div class="category-filter field">
    <form method="get">
      {% if product %}
        <input type="hidden" name="product" value="{{ product.slug }}">
      {% endif %}
      <label>{{ _('Filter by type:') }}</label>
      <select data-submit name="category">
        <option value="">{{ _('All') }}</option>
        {% for c in categories %}
          <option value="{{ c[0] }}" {% if category == c[0] %}selected="selected"{% endif %}>{{ c[1] }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
{% endmacro %}

{% macro localization_sidebar_nav(locale, active, is_default_locale=False) %}

<ul class="sidebar-nav sidebar-folding">
  <li id="editing-tools-sidebar">
    <span class="details-heading"></span>
    <ul class="sidebar-nav--list">
      <li {{ active|class_selected('dashboard') }}>
        {% if is_default_locale %}
          <a href="{{ url('dashboards.contributors') }}">{{ _('KB Dashboard') }}</a>
        {% else %}
          <a href="{{ url('dashboards.localization', locale=locale) }}">{{ _('Localization Dashboard') }}</a>
        {% endif %}
      </li>
      <li {{ active|class_selected('metrics') }}>
        <a href="{{ url('dashboards.locale_metrics', locale) }}">{{ _('Locale Metrics') }}</a>
      </li>
      <li {{ active|class_selected('team') }}>
        <a href="{{ url('wiki.locale_details', locale) }}">
          {% if is_default_locale %}
            {{ _('KB Team') }}
          {% else %}
            {{ _('Localization Team') }}
          {% endif %}
        </a>
      </li>
      <li {{ active|class_selected('revisions') }}>
        <a href="{{ url('wiki.revisions')|urlparams(locale=locale) }}">{{ _('Recent Revisions') }}</a>
      </li>
      <li {{ active|class_selected('aggregated') }}>
        <a href="{{ url('dashboards.aggregated_metrics') }}">{{ _('Aggregated Metrics') }}</a>
      </li>
    </ul>
  </li>
 </ul>
{% endmacro %}