<section class="connections-board" data-connections-board>
    <label class="connections-filter" aria-label="Connection categories">
        <i class="connections-filter-icon {{activeCategoryIcon}}"></i>
        <select name="connectionCategoryFilter" data-connection-category-select>
            {{#each categories}}
            <option value="{{id}}" {{#if active}}selected{{/if}}>{{label}} ({{count}})</option>
            {{/each}}
        </select>
        <i class="connections-filter-chevron fas fa-chevron-down"></i>
    </label>

    <div class="connections-map">
        {{#if hasConnections}}
        <div class="connections-groups">
        {{#each groups}}
        {{#if visible}}
        <section class="connections-group {{#unless cards.length}}empty{{/unless}} {{#if hiddenForPlayers}}is-player-hidden{{/if}}" data-connection-category-id="{{id}}" style="--connection-category-color: {{color}};">
            <h4>
                <i class="{{icon}}"></i>
                <span>{{label}}</span>
                {{#if hiddenForPlayers}}<i class="fa-solid fa-eye-slash connections-group-hidden-icon" aria-hidden="true"></i>{{/if}}
                {{#if ../isGM}}
                <span class="connections-group-order-controls">
                    <button type="button" data-connection-group-actions data-connection-category-id="{{id}}" title="Group actions" aria-label="Group actions">
                        <i class="fas fa-ellipsis"></i>
                    </button>
                    <button type="button" data-connection-group-move="-1" data-connection-category-id="{{id}}" title="Move group up" aria-label="Move group up" {{#unless canMoveUp}}disabled{{/unless}}>
                        <i class="fas fa-chevron-up"></i>
                    </button>
                    <button type="button" data-connection-group-move="1" data-connection-category-id="{{id}}" title="Move group down" aria-label="Move group down" {{#unless canMoveDown}}disabled{{/unless}}>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </span>
                {{/if}}
            </h4>
            <div class="connections-card-list">
                {{#each cards}}
                <article class="connection-card {{#if missing}}missing{{/if}} {{#if draggable}}draggable{{/if}} {{#if isPlayerHidden}}is-player-hidden{{/if}} {{#if hasOpinion}}has-opinion{{/if}}"
                    style="--connection-category-color: {{color}};"
                    draggable="true"
                    data-connection-edge-id="{{edgeId}}"
                    data-connection-node-id="{{nodeId}}"
                    data-connection-category-id="{{categoryId}}"
                    {{#if draggable}}data-connection-drag="{{dragType}}"{{/if}}>
                    <button type="button" class="connection-card-open" data-connection-open data-connection-node-id="{{nodeId}}" title="Open {{name}}">
                        <span class="connection-card-image nexus-entity-image {{#if isPersonImage}}is-person{{else}}{{#if isPlaceImage}}is-place{{else}}{{#if isEmblemImage}}is-emblem{{else}}is-object{{/if}}{{/if}}{{/if}}">
                            {{#if img}}
                            <img src="{{img}}" alt="{{name}}">
                            {{else}}
                            <i class="{{icon}}"></i>
                            {{/if}}
                        </span>
                        <span class="connection-card-text">
                            <strong>
                                {{#if isPlayerHidden}}<i class="fa-solid fa-eye-slash" aria-hidden="true"></i>{{/if}}
                                {{#if isOwnership}}<i class="fas fa-crown connection-card-ownership" title="{{ownershipLabel}}" aria-label="{{ownershipLabel}}"></i>{{/if}}
                                {{#if isFactionSeat}}<i class="fas fa-landmark-dome connection-card-seat" title="{{factionSeatLabel}}" aria-label="{{factionSeatLabel}}"></i>{{/if}}
                                {{#if isLocationLeader}}<i class="fas fa-key connection-card-leadership" title="{{locationLeadershipLabel}}" aria-label="{{locationLeadershipLabel}}"></i>{{/if}}
                                {{#if isFactionLeader}}<i class="fas fa-crown connection-card-membership is-leader" title="{{factionMembershipLabel}}" aria-label="{{factionMembershipLabel}}"></i>{{else}}
                                {{#if isFactionMember}}<i class="fas fa-user-shield connection-card-membership" title="{{factionMembershipLabel}}" aria-label="{{factionMembershipLabel}}"></i>{{/if}}{{/if}}
                                {{name}}
                            </strong>
                            {{#if missing}}<em>Missing document</em>{{else}}{{#if subtitle}}<em>{{subtitle}}</em>{{/if}}{{/if}}
                            {{#if hasResourceFlows}}
                            <span class="connection-card-resource-flows">
                                {{#each resourceFlowRows}}
                                <span class="connection-card-resource-flow-row">
                                    <span class="connection-card-resource-flow-label"><i class="{{icon}}"></i>{{label}}</span>
                                    <span class="connection-card-resource-icons">
                                        {{#each resources}}
                                        <span class="connection-card-resource" title="{{../label}} {{label}}" aria-label="{{../label}} {{label}}">
                                            {{#if imageSrc}}<img src="{{imageSrc}}" alt="">{{else}}<i class="fas fa-box"></i>{{/if}}
                                        </span>
                                        {{/each}}
                                    </span>
                                </span>
                                {{/each}}
                            </span>
                            {{/if}}
                            {{#if note}}
                            <small>{{note}}</small>
                            {{/if}}
                        </span>
                    </button>
                    {{#if hasOpinion}}
                    <button type="button" class="connection-card-opinion" data-connection-opinion data-connection-edge-id="{{edgeId}}" style="--opinion-tier-color: {{opinion.tierColor}};" title="Why is this opinion {{opinion.scoreLabel}}?" aria-label="Show opinion breakdown"><i class="fas fa-scale-balanced"></i><b>{{opinion.scoreLabel}}</b><span>{{opinion.tierLabel}}</span></button>
                    {{/if}}
                    {{#if ../../isGM}}
                    <button type="button" class="connection-card-actions" data-connection-actions data-connection-edge-id="{{edgeId}}" title="Connection actions" aria-label="Connection actions">
                        <i class="fas fa-ellipsis"></i>
                    </button>
                    {{/if}}
                </article>
                {{/each}}
            </div>
        </section>
        {{/if}}
        {{/each}}
        </div>
        {{/if}}

        {{#unless hasConnections}}
        <div class="connections-empty">
            <i class="fas fa-share-nodes"></i>
            <span>{{#if isGM}}Drop actors, items, journals, or Nexus places to connect them.{{else}}No connections have been added yet.{{/if}}</span>
        </div>
        {{/unless}}
    </div>
</section>
