{% macro pager(current_page, page_count) %}
{% set left_start = (1, current_page - 5) | max %}
{% set right_end = (page_count, current_page + 5) | min %}
<div class="pager">
  <span>Page:</span>
  {% if current_page > 5 %}
    <a href="?page=1" class="pagebutton">1</a>
    {% if left_start > 2 %}
      <span class="currentpage">&hellip;</span>
    {% endif %}
  {% endif %}
  {% for i in range(left_start, current_page - 1) %}
    <a href="?page={{i}}" class="pagebutton">{{i}}</a>
  {% endfor %}
  {% if page_count > 0 %}
    <span class="currentpage">{{current_page}}</span>
  {% endif %}
  {% for i in range(current_page + 1, right_end) %}
    <a href="?page={{i}}" class="pagebutton">{{i}}</a>
  {% endfor %}
  {% if right_end < page_count %}
    {% if right_end < page_count - 1 %}
      <span class="currentpage">&hellip;</span>
    {% endif %}
    <a href="?page={{page_count}}" class="pagebutton">{{page_count}}</a>
  {% endif %}
</div>
{% endmacro %}

{% macro infobox(message, kind=InfoboxKind.INFO) %}
<div class="{{ "infobox " + InfoboxHTMLClass[kind] }}">
  <span>
  <div class="infobox-icon-container">
    <img src="{{ InfoboxIcons[kind] }}">
  </div>
  {{ message }}
  </span>
</div>
{% endmacro %}

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

{% macro babycode_editor_component(ta_name, ta_placeholder="Post body", optional=False, prefill="") %}
<div class="babycode-editor-container">
  <div class="tab-buttons">
    <button type=button class="tab-button active" data-target-id="tab-edit">Write</button>
    <button type=button class="tab-button" data-target-id="tab-preview">Preview</button>
  </div>
  <div class="tab-content active" id="tab-edit">
    <span class="babycode-button-container">
      <button class="babycode-button" type=button id="post-editor-bold" title="Insert Bold"><strong>B</strong></button>
      <button class="babycode-button" type=button id="post-editor-italics" title="Insert Italics"><em>I</em></button>
      <button class="babycode-button" type=button id="post-editor-strike" title="Insert Strikethrough"><del>S</del></button>
      <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
      <button class="babycode-button" type=button id="post-editor-code" title="Insert Code block"><code>&lt;/&gt;</code></button>
      <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image"><img src="/static/misc/image.svg"></button>
      <button class="babycode-button" type=button id="post-editor-ol" title="Insert Ordered list">1.</button>
      <button class="babycode-button" type=button id="post-editor-ul" title="Insert Unordered list">&bullet;</button>
    </span>
    <textarea class="babycode-editor" name="{{ ta_name }}" id="babycode-content" placeholder="{{ ta_placeholder }}" {{ "required" if not optional else "" }}>{{ prefill }}</textarea>
    <a href="{{ url_for("app.babycode_guide") }}" target="_blank">babycode guide</a>
  </div>
  <div class="tab-content" id="tab-preview">
    <div id="babycode-preview-errors-container">Type something!</div>
    <div id="babycode-preview-container"></div>
  </div>
</div>
<script src="/static/js/babycode-editor.js?v=1"></script>
{% endmacro %}

{% macro babycode_editor_form(ta_name, prefill = "", cancel_url="", endpoint="") %}
{% set save_button_text = "Post reply" if not cancel_url else "Save" %}
<form class="post-edit-form" method="post" action={{ endpoint }}>
  {{babycode_editor_component(ta_name, prefill = prefill)}}
  {% if not cancel_url %}
    <span>
      <input type="checkbox" id="subscribe" name="subscribe" {{ "checked" if session['subscribe_by_default'] else "" }}>
      <label for="subscribe">Subscribe to thread</label>
    </span>
  {% endif %}
  <span>
    <input type="submit" value="{{ save_button_text }}">
    {% if cancel_url %}
      <a class="linkbutton warn" href="{{ cancel_url }}">Cancel</a>
    {% endif %}
  </span>
</form>
{% endmacro %}