{% macro timestamp(unix_ts) -%}
<span class="timestamp" data-utc="{{ unix_ts }}">{{ unix_ts | ts_datetime('%Y-%m-%d %H:%M')}} <abbr title="Server Time">ST</abbr></span>
{%- endmacro %}

{% macro subheader(title, desc='') -%}
<div id="subheader" class="plank secondary-bg">
  <h1 class="info">{{title}}</h1>
  {%- if desc -%}<span>{{desc}}</span>{%- endif -%}
  <div class="actions-group">{% if caller %}{{- caller() -}}{% endif %}</div>
</div>
{%- endmacro %}

{% macro pager(current_page, page_count, classes='', url='', args={}) -%}
{%- set args = dict(args.items() | rejectattr(0, 'equalto', 'page')) -%}
{%- if args -%}
{#- remove the page query argument -#}
{%- set url = url + (args | dict_to_query_string) + '&page=' -%}
{%- else -%}
{%- set url = url + '?page=' -%}
{%- endif -%}
<span class="button-row {{classes}}">
{%- if current_page == 0 -%}
  {%- if page_count <= 3 -%}
    {%- for i in range(page_count) -%}
      <a href="{{url}}{{i+1}}" class="linkbutton minimal">{{i+1}}</a>
    {%- endfor -%}
  {%- else -%}
    <a href="{{url}}1" class="linkbutton minimal">1</a>
    <a href="{{url}}2" class="linkbutton minimal">2</a>
    <button class="minimal" disabled>&hellip;</button>
    <a href="{{url}}{{page_count - 1}}" class="linkbutton minimal">{{page_count - 1}}</a>
    <a href="{{url}}{{page_count}}" class="linkbutton minimal">{{page_count}}</a>
  {%- endif -%}
{%- else -%}
  {%- set left_start = [2, current_page - 1] | max -%}
  {%- set right_end = [page_count - 1, current_page + 1] | min -%}

  {%- if current_page != 1 -%}
  <a href="{{url}}1" class="linkbutton minimal">1</a>
  {%- endif -%}

  {%- if left_start > 2 -%}
  <button class="minimal" disabled>&hellip;</button>
  {%- endif -%}

  {%- for i in range(left_start, current_page) -%}
  <a href="{{url}}{{i}}" class="linkbutton minimal">{{i}}</a>
  {%- endfor -%}

  {%- if page_count > 0 -%}
  <button class="minimal" disabled>{{current_page}}</button>
  {%- endif -%}

  {%- for i in range(current_page + 1, right_end + 1) -%}
  <a href="{{url}}{{i}}" class="linkbutton minimal">{{i}}</a>
  {%- endfor -%}

  {%- if right_end < page_count - 1 -%}
  <button class="minimal" disabled>&hellip;</button>
  {%- endif -%}

  {%- if page_count > 1 and current_page != page_count -%}
  <a href="{{url}}{{page_count}}" class="linkbutton minimal">{{page_count}}</a>
  {%- endif -%}
{%- endif -%}
</span>
{%- endmacro %}

{% macro tabs(prefix='', labels = []) -%}
<div class="tab-container">
  <div class="tab-bar" role="tablist">
    {%- for tab_label in labels -%}
    <button type="button" class="tab-button" role="tab" aria-selected="{{'true' if loop.index0==0 else 'false'}}" id="{{prefix+'-'+(tab_label | lower)+'-tab'}}" aria-controls="{{prefix+'-'+(tab_label | lower)+'-content'}}">{{tab_label}}</button>
    {%- endfor -%}
  </div>
  {%- for tab_label in labels -%}
  <div class="plank secondary-bg even no-shadow tab-content {{'hidden' if loop.index0!=0 else ''}}" role="tabpanel" aria-labelledby="{{prefix+'-'+(tab_label | lower)+'-tab'}}" id="{{prefix+'-'+(tab_label | lower)+'-content'}}">
    {{- caller(loop.index0) -}}
  </div>
  {%- endfor -%}
</div>
{%- endmacro %}

{% macro babycode_editor_component(
  placeholder='Post content',
  prefill='',
  required=true,
  id='babycode-content'
) -%}
{%- call(idx) tabs(prefix='babycode', labels=['Write', 'Preview']) -%}
{%- if idx == 0 -%}
<span class="babycode-editor-controls">
  <span class="button-row">
    <button type="button" class="minimal"><b>B</b></button>
    <button type="button" class="minimal"><i>i</i></button>
    <button type="button" class="minimal"><s>S</s></button>
    <button type="button" class="minimal"><u>U</u></button>
    <button type="button" class="minimal"><code>://</code></button>
    <button type="button" class="minimal"><code>&lt;/&gt;</code></button>
    <button type="button" class="minimal">1.</button>
    <button type="button" class="minimal">&bullet;</button>
    <button type="button" class="minimal"><img src="/static/emoji/angry.png" class="emoji"></button>
  </span>
  <a href="##">babycode help</a>
</span>
<textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}}>{{ prefill }}</textarea>
{%- endif -%}
{%- endcall -%}
{%- endmacro %}

{% macro full_post(
  post, render_sig=true, is_latest=false,
  show_toolbar=true, is_editing=false, thread=none,
  show_reactions=true
) -%}
{%- if is_logged_in() -%}
{%- set can_delete = post.user_id == get_active_user().id or is_mod() -%}
{%- else -%}
{%- set show_toolbar = false -%}
{%- endif -%}
{%- set owns = is_logged_in() and post.user_id == get_active_user().id -%}
{%- set can_reply = (is_logged_in()) and (not thread.locked or is_mod()) -%}
<div class="usercard plank even contrast-bg minimal no-shadow">
  <div class="usercard-inner">
    <img src="{{post.avatar_path}}" class="avatar">
    <div class="usercard-rest">
      <a href="{{url_for('users.user_page', username=post.username)}}">{{post.display_name if post.display_name else post.username}}</a>
      <abbr title="mention">@{{post.username}}</abbr>
      <i>{{post.status}}</i>
      {%- set badges=post.badges_json | fromjson -%}
      <div class="badges-container">
        {%- for badge in badges -%}
        {%- if badge.link -%}<a href="{{badge.link}}">{%- endif -%}
        <img src="{{badge.file_path}}" alt="{{badge.label}}" title="{{badge.label}}" class="badge-button">
        {%- if badge.link -%}</a>{%- endif -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>
<div class="post-content">
  <div class="plank even minimal secondary-bg no-shadow post-info">
    <a href="{{get_post_url(post.id, _anchor=true)}}"><i>Posted on {{timestamp(post.created_at)}}</i></a>
    {%- if show_toolbar -%}
    <span class="thread-actions">
      {%- if owns -%}
      <a class="linkbutton" href="{{url_for('posts.edit', post_id=post.id)}}">Edit</a>
      {%- endif -%}
      {%- if can_reply -%}
      <button disabled title="This feature requires JavaScript to be enabled.">Quote</button>
      {%- endif -%}
      {%- if can_delete -%}
      <a class="linkbutton critical" href="{{url_for('posts.delete', post_id=post.id)}}">Delete</a>
      {%- endif -%}
      <button disabled title="This feature requires JavaScript to be enabled.">Bookmark&hellip;</button>
    </span>
    {%- endif -%}
  </div>
  <div class="plank even no-shadow post-content-inner minimal">{{post.content | safe}}
    {%- if render_sig and post.signature_rendered -%}
    <div class="post-signature">{{post.signature_rendered | safe}}</div>
    {%- endif -%}
  </div>
  {%- if show_reactions -%}
  <div class="plank even secondary-bg minimal no-shadow">
    <span class="button-row">
      {%- for reaction in Reactions.for_post(post.id) -%}
      {% set reactors = Reactions.get_users(post.id, reaction.reaction_text) | map(attribute='username') | list %}
      {% set reactors_trimmed = reactors[:10] %}
      {% set reactors_str = reactors_trimmed | join (',\n') %}
      {% if reactors | count > 10 %}
        {% set reactors_str = reactors_str + '\n...and many others' %}
      {% endif %}
      {% set has_reacted = get_active_user() is not none and get_active_user().username in reactors %}
      <button disabled title="{{reactors_str}}" class="minimal {{'alt' if has_reacted else ''}}"><img src="/static/emoji/{{reaction.reaction_text}}.png">{{reaction.c}}</button>
      {%- endfor -%}
    </span>
    {%- if is_logged_in() -%}<button disabled title="This feature requires JavaScript to be enabled.">Add reaction</button>{%- endif -%}
  </div>
  {%- endif -%}
</div>
{%- endmacro %}