{% 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.
      </p>
    </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">
                  <p><strong>{{ metric.title }}</strong>: {{ metric.value|default:"-" }}</p>
                  <p><strong>Calculation:</strong> {{ metric.calculation }}</p>
                  <p><strong>Psychological Read:</strong> {{ metric.psychology }}</p>
                </div>
              </article>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}