{{#if missing}}
<div class="connection-opinion-missing">
    <i class="fas fa-link-slash"></i>
    <span>This connection is no longer tracking opinions.</span>
</div>
{{else}}
<section class="connection-opinion-content" style="{{opinion.tierStyle}}">
    <header class="connection-opinion-direction">
        <div class="connection-opinion-person">
            {{#if opinion.observer.img}}<img src="{{opinion.observer.img}}" alt="">{{else}}<i class="fas fa-user"></i>{{/if}}
            <span><small>Opinion held by</small><strong>{{opinion.observer.name}}</strong></span>
        </div>
        <button type="button" data-opinion-reverse="{{reverseObserverNodeId}}" title="Reverse opinion direction" aria-label="Reverse opinion direction">
            <i class="fas fa-arrow-right-arrow-left"></i>
        </button>
        <div class="connection-opinion-person is-subject">
            {{#if opinion.subject.img}}<img src="{{opinion.subject.img}}" alt="">{{else}}<i class="fas fa-user"></i>{{/if}}
            <span><small>Opinion of</small><strong>{{opinion.subject.name}}</strong></span>
        </div>
    </header>

    <section class="connection-opinion-score">
        <span class="connection-opinion-score-value">{{opinion.scoreLabel}}</span>
        <span><strong>{{opinion.tier.label}}</strong><small>Current opinion</small></span>
    </section>

    {{#if isGM}}
    <label class="connection-opinion-base">
        <i class="fas fa-anchor"></i>
        <span><strong>Base Opinion</strong><small>The observer's lasting baseline before circumstances.</small></span>
        <input type="number" min="-100" max="100" step="1" value="{{opinion.base}}" data-opinion-base>
    </label>
    {{/if}}

    <section class="connection-opinion-section">
        <header>
            <span><strong><i class="fas fa-clock-rotate-left"></i> Adjustments</strong><small>Persistent events and circumstances.</small></span>
            {{#if isGM}}<button type="button" data-opinion-add-adjustment><i class="fas fa-plus"></i><span>Add</span></button>{{/if}}
        </header>
        <div class="connection-opinion-list">
            {{#each opinion.adjustments}}
            <article class="connection-opinion-row">
                <span><strong>{{label}}</strong><small>{{source.kind}}</small></span>
                <b class="{{#if value}}has-value{{/if}}">{{valueLabel}}</b>
                {{#if ../isGM}}<button type="button" data-opinion-remove-adjustment="{{id}}" title="Remove adjustment" aria-label="Remove adjustment"><i class="fas fa-trash"></i></button>{{/if}}
            </article>
            {{else}}
            <div class="connection-opinion-empty">No persistent adjustments.</div>
            {{/each}}
        </div>
    </section>

    <section class="connection-opinion-section">
        <header>
            <span><strong><i class="fas fa-wand-magic-sparkles"></i> Automatic Influences</strong><small>Recalculated from current traits, ideology, and memberships.</small></span>
        </header>
        <div class="connection-opinion-list">
            {{#each opinion.automaticInfluences}}
            <article class="connection-opinion-influence">
                <header><strong>{{label}}</strong><b>{{valueLabel}}</b></header>
                {{#if details.length}}
                <div>
                    {{#each details}}
                    <span><small>{{label}}</small><b>{{valueLabel}}</b></span>
                    {{/each}}
                </div>
                {{/if}}
            </article>
            {{else}}
            <div class="connection-opinion-empty">No automatic influences apply to this pair.</div>
            {{/each}}
        </div>
    </section>

    {{#if isGM}}
    <footer class="connection-opinion-footer">
        <button type="button" data-opinion-stop-tracking><i class="fas fa-eye-slash"></i><span>Stop Tracking Opinions</span></button>
    </footer>
    {{/if}}
</section>
{{/if}}