{% extends 'base.html' %}

{% block title %}Messages{% endblock %}

{% block content %}
<h1>Ollambda Messages</h1>

{% if messages %}

<nav class="pagination">
    <p>
        {% if prev_url %}
            <a href="{{ prev_url }}">Prev Page</a>
        {% else %}
            <s>Prev Page</s>
        {% endif %}
            Page {{ current_page }}/{{n_pages}}
        {% if next_url %}
            <a href="{{ next_url }}">Next Page</a>
        {% else %}
            <s>Next Page</s>
        {% endif %}
    </p>
    <p>
        {{ n_messages }} Messages ({{per_page}} Per Page)
    </p>
</nav>

<div class="message-list">
  {% for msg in messages %}
  <div class="message">
    <div class="message-header">
      <span class="role-badge {{ msg.role }}">{{ msg.role }}</span>
      <span class="timestamp">{{ msg.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
      {% if msg.model %}
      <span class="model-name">{{ msg.model }}</span>
      {% endif %}
    </div>

    {% if msg.content %}
        {% if msg.role == "system" %}
        <details>
            <summary>Content</summary>
            <div class="message-content">{{ msg.content }}</div>
        </details>
        {% else %}
        <details open>
            <summary>Content</summary>
            <div class="message-content">{{ msg.content }}</div>
        </details>
        {% endif %}
    {% endif %}

    {% if msg.thinking %}
    <div class="thinking-block">
      <details>
          <summary>
              <span class="thinking-label">Thinking</span>
          </summary>
          <div class="thinking-content">{{ msg.thinking }}</div>
      </details>
    </div>
    {% endif %}

    {% if msg.tool_calls %}
    <div class="tool-calls">
      {% for tc in msg.tool_calls %}
      <div class="tool-call">
        <div class="tool-name">tool: {{ tc.name }}</div>
        <div class="tool-args">{{ tc.arguments | tojson }}</div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    <div class="message-footer">
        <span class="message-source">Source: {{ msg.source }}</span>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">No messages yet.</div>
{% endif %}
{% endblock %}