{% extends "base.html" %}
{% block title %}{{ t('personality.title', get_lang(request)) }}{% endblock %}
{% block content %}
{% set lang = get_lang(request) %}
<div class="page-header">
    <h1>{{ t('personality.title', lang) }}</h1>
    <p>{{ t('personality.subtitle', lang) }}</p>
</div>

<!-- User & Agent panels -->
<div class="persona-grid">
    <!-- User panel -->
    <div class="persona-panel persona-panel--user">
        <div class="persona-panel__header">
            <span class="persona-panel__icon">&#128100;</span>
            <span class="persona-panel__title">{{ t('personality.user_profile', lang) }}</span>
        </div>
        <div class="persona-panel__desc">{{ t('personality.user_desc', lang) }}</div>
        {% if data.user %}
        {% for section, content in data.user.items() %}
        <div class="persona-section">
            <div class="persona-section__label">{{ section }}</div>
            <div class="persona-section__content">{{ content if content else t('personality.no_data', lang) }}</div>
        </div>
        {% endfor %}
        {% else %}
        <div class="empty-state">{{ t('personality.no_data', lang) }}</div>
        {% endif %}
    </div>

    <!-- Agent panel -->
    <div class="persona-panel persona-panel--agent">
        <div class="persona-panel__header">
            <span class="persona-panel__icon">&#129302;</span>
            <span class="persona-panel__title">{{ t('personality.agent_identity', lang) }}</span>
        </div>
        <div class="persona-panel__desc">{{ t('personality.agent_desc', lang) }}</div>
        {% if data.soul %}
        {% for section, content in data.soul.items() %}
        <div class="persona-section">
            <div class="persona-section__label">{{ section }}</div>
            <div class="persona-section__content">{{ content if content else t('personality.no_data', lang) }}</div>
        </div>
        {% endfor %}
        {% else %}
        <div class="empty-state">{{ t('personality.no_data', lang) }}</div>
        {% endif %}
    </div>
</div>

<!-- Learning Timeline -->
<h3 style="margin-top: 0.5rem; margin-bottom: 1rem;">{{ t('personality.learning_timeline', lang) }}</h3>
{% if data.learning %}
<div class="timeline">
    {% for entry in data.learning %}
    <div class="timeline-item">
        <div class="timeline-date">{{ entry.date }}</div>
        <div class="timeline-text">
            <strong>{{ entry.title }}</strong>
            {% if entry.body %}<br><span style="color: var(--text-dim);">{{ entry.body }}</span>{% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">{{ t('personality.no_entries', lang) }}</div>
{% endif %}

<!-- Knowledge Summary -->
{% if data.knowledge %}
<h3 style="margin-top: 2rem; margin-bottom: 1rem;">{{ t('personality.knowledge_summary', lang) }}</h3>
<div class="stat-card">
    <div style="font-size: 0.8125rem; line-height: 1.6; white-space: pre-line;">{{ data.knowledge }}</div>
</div>
{% endif %}
{% endblock %}
