{% extends "base.html" %}

{% block content %}
  <div class="columns is-multiline">
    <div class="column is-12">
      <nav class="breadcrumb is-small" aria-label="breadcrumbs">
        <ul>
          <li><a href="{{ workspace_url }}">AI Workspace</a></li>
          <li class="is-active"><a aria-current="page">Information</a></li>
        </ul>
      </nav>
    </div>

    <div class="column is-12">
      <h1 class="title is-4" style="margin-bottom: 0.35rem;">Information: {{ person.name }}</h1>
      <p class="is-size-7 has-text-grey">Commitment directionality and underlying metric factors from deterministic message-history snapshots.</p>
      {% include "partials/ai-insight-nav.html" with active_tab="information" %}
    </div>

    <div class="column is-5">
      <div class="box">
        <p class="heading">Conversation Overview</p>
        {% if overview_rows %}
          {% for row in overview_rows %}
            <article class="message is-light" style="margin-bottom: 0.45rem;">
              <div class="message-body" style="padding: 0.45rem 0.55rem;">
                <p class="is-size-7 has-text-grey" style="margin-bottom: 0.12rem;">
                  {{ row.group_title }}
                </p>
                <p style="margin-bottom: 0.3rem;">
                  <strong>{{ row.title }}:</strong> {{ row.value|default:"-" }}
                </p>
                <a
                  class="tag is-light"
                  href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=row.slug %}">
                  View Detail
                </a>
              </div>
            </article>
          {% endfor %}
        {% else %}
          <p class="is-size-7 has-text-grey">No conversation metadata available yet.</p>
        {% endif %}
      </div>

      <div class="box">
        <p class="heading">Commitment Directionality</p>
        <p class="title is-5" style="margin-bottom: 0.35rem;">{{ directionality.direction_label }}</p>
        <p><strong>Commit In:</strong> {{ directionality.commit_in|default:"-" }}</p>
        <p><strong>Commit Out:</strong> {{ directionality.commit_out|default:"-" }}</p>
        <p><strong>Delta:</strong> {{ directionality.delta|default:"-" }}</p>
        <p><strong>Magnitude:</strong> {{ directionality.magnitude|default:"-" }}</p>
        <p><strong>Confidence:</strong> {{ directionality.confidence|default:"-" }}</p>
        <article class="message is-light" style="margin-top: 0.65rem;">
          <div class="message-body">
            {{ directionality.conclusion }}
          </div>
        </article>
      </div>
    </div>

    <div class="column is-7">
      <div class="box">
        <p class="heading">Factor Inputs</p>
        <div class="columns is-multiline" style="margin: 0 -0.2rem;">
          {% for factor in directionality.factors %}
            <div class="column is-12-mobile is-6-tablet" style="padding: 0.2rem;">
              <article class="box" style="margin-bottom: 0; border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: none;">
                <p class="is-size-7 has-text-weight-semibold" style="margin-bottom: 0.2rem;">
                  <span class="icon is-small"><i class="{{ factor.icon }}"></i></span>
                  <span>{{ factor.title }}</span>
                </p>
                <p class="is-size-7"><strong>Weight:</strong> {{ factor.weight }}</p>
                <p class="is-size-7"><strong>Value:</strong> {{ factor.value|default:"-" }}</p>
                <p style="margin-top: 0.35rem;">
                  <a class="tag is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=factor.slug %}">
                    View Metric
                  </a>
                </p>
              </article>
            </div>
          {% endfor %}
        </div>
      </div>

      <div class="box">
        <p class="heading">Linked Graphs</p>
        <div class="tags">
          {% for ref in directionality.graph_refs %}
            <a class="tag is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=ref.slug %}">
              {{ ref.title }}: {{ ref.value|default:"-" }}
            </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}
