{% macro pagination(current_page, total_pages) %}
{% if total_pages <= 1 %}
<div class="pagination"><a href="index.html" class="index-link">Index</a></div>
{% else %}
<div class="pagination">
  <a href="index.html" class="index-link">Index</a>
  {% if current_page > 1 %}
  <a href="page-{{ '%03d'|format(current_page - 1) }}.html">&larr; Prev</a>
  {% else %}
  <span>&larr; Prev</span>
  {% endif %}
  {% for page in range(1, total_pages + 1) %}
    {% if page == current_page %}
    <span class="current">{{ page }}</span>
    {% else %}
    <a href="page-{{ '%03d'|format(page) }}.html">{{ page }}</a>
    {% endif %}
  {% endfor %}
  {% if current_page < total_pages %}
  <a href="page-{{ '%03d'|format(current_page + 1) }}.html">Next &rarr;</a>
  {% else %}
  <span>Next &rarr;</span>
  {% endif %}
</div>
{% endif %}
{% endmacro %}

{% macro index_pagination(total_pages) %}
{% if total_pages <= 0 %}
<div class="pagination"><span class="current">Index</span></div>
{% else %}
<div class="pagination">
  <span class="current">Index</span>
  {% for page in range(1, total_pages + 1) %}
  <a href="page-{{ '%03d'|format(page) }}.html">{{ page }}</a>
  {% endfor %}
</div>
{% endif %}
{% endmacro %}

{% macro message(role_class, role_label, msg_id, timestamp, content_html) %}
<div class="message {{ role_class }}" id="{{ msg_id }}">
  <div class="message-header">
    <span class="role-label">{{ role_label }}</span>
    <a href="#{{ msg_id }}" class="timestamp-link">
      <time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time>
    </a>
  </div>
  <div class="message-content">
    <div class="truncatable">
      <div class="truncatable-content">{{ content_html|safe }}</div>
      <button class="expand-btn" type="button">Show more</button>
    </div>
  </div>
</div>
{% endmacro %}

{% macro tool_use(tool_name, description, input_json, tool_id) %}
<div class="tool-use" data-tool-id="{{ tool_id }}">
  <div class="tool-header">{{ tool_name }}</div>
  {% if description %}
  <div>{{ description }}</div>
  {% endif %}
  <pre>{{ input_json }}</pre>
</div>
{% endmacro %}

{% macro tool_result(content_html, is_error, has_images=False) %}
<div class="tool-result{% if is_error %} tool-error{% endif %}">{{ content_html|safe }}</div>
{% endmacro %}

{% macro thinking(content_html) %}
<div class="thinking">{{ content_html|safe }}</div>
{% endmacro %}

{% macro user_content(content_html) %}
<div class="user-content">{{ content_html|safe }}</div>
{% endmacro %}

{% macro assistant_text(content_html) %}
<div class="assistant-text">{{ content_html|safe }}</div>
{% endmacro %}

{% macro meta_block(content_html) %}
<div class="meta-block">{{ content_html|safe }}</div>
{% endmacro %}

{% macro turn_section(turn_num, title, status, messages_html) %}
<section class="turn-shell" id="turn-{{ turn_num }}">
  <div class="turn-head">
    <div class="turn-title">Turn {{ turn_num }} · {{ title }}</div>
    <div class="turn-status">{{ status }}</div>
  </div>
  <div class="turn-body">{{ messages_html|safe }}</div>
</section>
{% endmacro %}

{% macro index_item(prompt_num, link, timestamp, rendered_content, stats_html) %}
<div class="index-item">
  <a href="{{ link }}">
    <div class="index-item-header">
      <span>Turn {{ prompt_num }}</span>
      <time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time>
    </div>
    <div class="index-item-content">{{ rendered_content|safe }}</div>
  </a>
  <div class="index-item-stats">{{ stats_html|safe }}</div>
</div>
{% endmacro %}

{% macro index_commit(commit_hash, commit_msg, timestamp, link) %}
{% if link %}
<div class="index-commit">
  <a href="{{ link }}">
    <div class="index-commit-header">
      <span class="index-commit-hash">{{ commit_hash[:7] }}</span>
      <time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time>
    </div>
    <div class="index-commit-msg">{{ commit_msg }}</div>
  </a>
</div>
{% else %}
<div class="index-commit">
  <div class="index-commit-header">
    <span class="index-commit-hash">{{ commit_hash[:7] }}</span>
    <time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time>
  </div>
  <div class="index-commit-msg">{{ commit_msg }}</div>
</div>
{% endif %}
{% endmacro %}

{% macro index_long_text(rendered_content) %}
<div class="index-item-long-text">
  <div class="truncatable">
    <div class="truncatable-content">
      <div class="index-item-long-text-content">{{ rendered_content|safe }}</div>
    </div>
    <button class="expand-btn" type="button">Show more</button>
  </div>
</div>
{% endmacro %}

{% macro index_stats(tool_stats_str, long_texts_html) %}
{% if tool_stats_str or long_texts_html %}
{% if tool_stats_str %}<span>{{ tool_stats_str }}</span>{% endif %}{{ long_texts_html|safe }}
{% endif %}
{% endmacro %}