{% 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><a href="{{ graphs_url }}">Insight Graphs</a></li>
          <li class="is-active"><a aria-current="page">Scoring Help</a></li>
        </ul>
      </nav>
    </div>
    <div class="column is-12">
      <h1 class="title is-4" style="margin-bottom: 0.35rem;">Scoring Help: {{ person.name }}</h1>
      <p class="is-size-7 has-text-grey">
        Combined explanation for each metric collection group and what it can
        imply in relationship dynamics. Scoring is deterministic from message
        history and can be backfilled via metric history reconciliation.
      </p>
      {% include "partials/ai-insight-nav.html" with active_tab="help" %}
    </div>

    {% for group_key, group in groups.items %}
      <div class="column is-12" id="group-{{ group_key }}">
        <div class="box">
          <p class="heading">{{ group.title }}</p>
          <p style="margin-bottom: 0.75rem;">{{ group.summary }}</p>

          {% for metric in metrics %}
            {% if metric.group == group_key %}
              <article class="message is-light" style="margin-bottom: 0.6rem;">
                <div class="message-body">
                  <h3 class="is-size-6 has-text-weight-semibold" style="margin-bottom: 0.45rem;">{{ metric.title }}</h3>

                  <p class="is-size-7 has-text-grey has-text-weight-semibold" style="margin-bottom: 0.15rem;">
                    Current Value
                  </p>
                  <p style="margin-bottom: 0.55rem;">{{ metric.value|default:"-" }}</p>

                  <p class="is-size-7 has-text-grey has-text-weight-semibold" style="margin-bottom: 0.15rem;">
                    How It Is Calculated
                  </p>
                  <p style="margin-bottom: 0.55rem;">{{ metric.calculation }}</p>

                  <p class="is-size-7 has-text-grey has-text-weight-semibold" style="margin-bottom: 0.15rem;">
                    Psychological Interpretation
                  </p>
                  <p>{{ metric.psychology }}</p>
                </div>
              </article>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}
