{% 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.</p>
      <div class="tags has-addons" style="margin-top: 0.6rem;">
        <a class="tag is-link is-light" href="{{ graphs_url }}">
          <span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
          <span>Insight Graphs</span>
        </a>
        <a class="tag is-dark" href="#">
          <span class="icon is-small"><i class="fa-solid fa-circle-info"></i></span>
          <span>Data View</span>
        </a>
      </div>
    </div>

    <div class="column is-5">
      <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 class="buttons are-small">
        <a class="button is-light" href="{{ graphs_url }}">
          <span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
          <span>All Graphs</span>
        </a>
        <a class="button is-light" href="{{ help_url }}">
          <span class="icon is-small"><i class="fa-solid fa-circle-question"></i></span>
          <span>Scoring Help</span>
        </a>
      </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 %}