{%- from "macros/user.html" import m_user_link, m_user_photo %}

{% macro viewers_snapshot(viewers, label=None, limit=4) %}
  {% if not label %}
    {% set label = _("Read by") %}
  {% endif %}
  {% if viewers %}
    {% set nb_viewers = viewers|length %}

    <div class="manager-thread-viewers">
      <i class="fa fa-bookmark" aria-hidden="true" style="color:yellowgreen;"></i> {{ label }} :
      {% for viewer in viewers %}
        {% if loop.index <= limit %}
          {{ m_user_link(viewer.user) }}
          {%- if loop.index < nb_viewers %},{% endif %}
        {% else %}
          {% if limit < nb_viewers %}
            {% if loop.last %}
              <span> ...</span>
            {% endif %}
          {% endif %}
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
{% endmacro %}


{% macro show_all_viewers(viewers, label=None) %}
  {% if not label %}
    {% set label = _("Read by") %}
  {% endif %}
  {% if not viewers %}
    {% set viewers = [] %}
  {% endif %}
  {% set nb_viewers=viewers|length %}
  <p class="viewed">
    {{ label }}
    <span style="color: silver;"> {{ nb_viewers }} {{ _("member") }}
      {%- if nb_viewers > 1 %}s{% endif %} </span>
  </p>

  {% if viewers %}
    {% for viewer in viewers %}
      <p>
        {% call m_user_link(viewer.user) %}
          {{ m_user_photo(viewer.user, size=30) }}
        {% endcall %}
        {{ m_user_link(viewer.user) }}
        <span
            style="color:silver;">- {{ viewer.viewed_at | age(date_threshold='day') }}</span>
      </p>
    {% endfor %}
  {% endif %}
{% endmacro %}

{% macro wizard_steps(steps,active_n) %}
  <div class="row">
  <!-- Responsive Arrow Progress Bar -->
  <div class="arrow-steps clearfix col-sm-12 progress_bar">
    {% for step in steps %}
      <div class="step {% if loop.index <= active_n %}current{% endif %}"><span>
        <a href="#">
          {%- if loop.index <= active_n %}
            <span class="step-number">{{ loop.index }}. </span>
          {% endif %}
          {{ step }}</a></span>
      </div>
    {% endfor %}
  </div>
{% endmacro %}
