<section class="{{cssClass}} directory flexcol" id="{{cssId}}" data-tab="{{tabName}}">
    <header class="combat-tracker-header">
        {{#if user.isGM}}
        <nav class="encounters flexrow" aria-label="{{localize 'COMBAT.NavLabel'}}">
            <a class="combat-button combat-create" aria-label="{{localize 'COMBAT.Create'}}" role="button" data-tooltip="COMBAT.Create">
                <i class="fas fa-plus"></i>
            </a>
            {{#if combatCount}}
            <a class="combat-button combat-cycle" aria-label="{{localize 'COMBAT.EncounterPrevious'}}" role="button" data-tooltip="COMBAT.EncounterPrevious"
               {{#if previousId}}data-document-id="{{previousId}}"{{else}}disabled{{/if}}>
                <i class="fas fa-caret-left"></i>
            </a>
            <h4 class="encounter">{{localize "COMBAT.Encounter"}} {{currentIndex}} / {{combatCount}}</h4>
            <a class="combat-button combat-cycle" aria-label="{{localize 'COMBAT.EncounterNext'}}" role="button" data-tooltip="COMBAT.EncounterNext"
               {{#if nextId}}data-document-id="{{nextId}}"{{else}}disabled{{/if}}>
                <i class="fas fa-caret-right"></i>
            </a>
            {{/if}}
            <a class="combat-button combat-control" aria-label="{{localize 'COMBAT.Delete'}}" role="button" data-tooltip="COMBAT.Delete" data-control="endCombat" {{#unless combatCount}}disabled{{/unless}}>
                <i class="fas fa-trash"></i>
            </a>
        </nav>
        {{/if}}

        <div class="encounter-controls flexrow {{#if hasCombat}}combat{{/if}}">
            {{#if user.isGM}}
            <a class="combat-button combat-control" aria-label="{{localize 'COMBAT.RollAll'}}" role="button" data-tooltip="COMBAT.RollAll" data-control="rollAll" {{#unless turns}}disabled{{/unless}}>
                <i class="fas fa-users"></i>
            </a>
            <a class="combat-button combat-control" aria-label="{{localize 'COMBAT.RollNPC'}}" role="button" data-tooltip="COMBAT.RollNPC" data-control="rollNPC" {{#unless turns}}disabled{{/unless}}>
                <i class="fas fa-users-cog"></i>
            </a>
            {{/if}}

            {{#if combatCount}}
            {{#if combat.round}}
            <h3 class="encounter-title noborder">{{localize 'COMBAT.Round'}} {{combat.round}}</h3>
            {{else}}
            <h3 class="encounter-title noborder">{{localize 'COMBAT.NotStarted'}}</h3>
            {{/if}}
            {{else}}
            <h3 class="encounter-title noborder">{{localize "COMBAT.None"}}</h3>
            {{/if}}

            {{#if user.isGM}}
            <a class="combat-button combat-control" aria-label="{{localize 'COMBAT.InitiativeReset'}}" role="button" data-tooltip="COMBAT.InitiativeReset" data-control="resetAll"
                {{#unless hasCombat}}disabled{{/unless}}>
                <i class="fas fa-undo"></i>
            </a>
            <a class="combat-button combat-control" aria-label="{{localize 'labels.scope'}}" role="button" data-tooltip="{{labels.scope}}"
                data-control="toggleSceneLink" {{#unless hasCombat}}disabled{{/unless}}>
                <i class="fas fa-{{#unless linked}}un{{/unless}}link"></i>
            </a>
            {{/if}}
            <a class="combat-button combat-settings" aria-label="{{localize 'COMBAT.Settings'}}" role="button" data-tooltip="COMBAT.Settings" data-control="trackerSettings">
                <i class="fas fa-cog"></i>
            </a>
        </div>
    </header>

    <ol id="combat-tracker" class="directory-list">
        {{#each turns}}
        <li class="combatant actor directory-item flexrow {{this.css}}" data-combatant-id="{{this.id}}">
            <img class="token-image" data-src="{{this.img}}" alt="{{this.name}}"/>
            <div class="token-name flexcol">
                <h4>{{this.name}}</h4>
                <div class="combatant-controls flexrow">
                    {{#if ../enable_initiative}}
                        {{#if this.hasRolled}}
                        <span class="initiative" style="flex: 0 0 1.5em">{{this.initiative}}</span>
                        {{else if this.owner}}
                        <a class="combatant-control" aria-label="{{localize 'COMBAT.InitiativeRoll'}}" role="button" data-tooltip"COMBAT.InitiativeRoll" data-control="rollInitiative">
                            <i class="fas fa-dice-d20"></i></a>
                        {{/if}}
                    {{/if}}
                    {{#if ../user.isGM}}
                    <a class="combatant-control {{#if this.hidden}}active{{/if}}" aria-label="{{localize 'COMBAT.ToggleVis'}}" role="button" data-tooltip="COMBAT.ToggleVis" data-control="toggleHidden">
                        <i class="fas fa-eye-slash"></i>
                    </a>
                    <a class="combatant-control {{#if this.defeated}}active{{/if}}" aria-label="{{localize 'COMBAT.ToggleDead'}}" role="button" data-tooltip="COMBAT.ToggleDead" data-control="toggleDefeated">
                        <i class="fas fa-skull"></i>
                    </a>
                    {{/if}}
                    {{#if this.canPing}}
                    <a class="combatant-control" aria-label="{{localize 'COMBAT.PingCombatant'}}" role="button" data-tooltip="COMBAT.PingCombatant" data-control="pingCombatant">
                        <i class="fa-solid fa-bullseye-arrow"></i>
                    </a>
                    {{/if}}
                    {{#unless ../user.isGM}}
                    <a class="combatant-control" aria-label="{{localize 'COMBAT.PanToCombatant'}}" role="button" data-tooltip="COMBAT.PanToCombatant" data-control="panToCombatant">
                        <i class="fa-solid fa-arrows-to-eye"></i>
                    </a>
                    {{/unless}}
                    <span class="activations" data-tooltip="lancer.Actor.FIELDS.activations.label">
                        <i class="cci cci-activate"></i>
                        <span>{{this.activations}}</span>
                    </span>
                    <div class="token-effects">
                        {{#each this.effects}}
                        <img class="token-effect" src="{{this}}"/>
                        {{/each}}
                    </div>
                </div>
            </div>

            {{#if this.hasResource}}
            <div class="token-resource">
                <span class="resource">{{this.resource}}</span>
            </div>
            {{/if}}

            <div class="token-initiative">
                {{#lancerinitiative-repeat this.pending}}
                <a class="{{../../icon_class}} lancer-combat-control" data-control="activateCombatant"></a>
                {{/lancerinitiative-repeat}}
                {{#lancerinitiative-repeat this.finished}}
                <a class="{{../../deactivate_icon_class}} done lancer-combat-control" data-control="deactivateCombatant"></a>
                {{/lancerinitiative-repeat}}
            </div>
        </li>
        {{/each}}
    </ol>

    <nav id="combat-controls" class="directory-footer flexrow" data-tooltip-direction="UP">
    {{#if hasCombat}}
        {{#if user.isGM}}
            {{#if round}}
            <a class="combat-control" aria-label="{{localize 'COMBAT.RoundPrev'}}" role="button" data-tooltip="COMBAT.RoundPrev" data-control="previousRound"><i class="fas fa-step-backward"></i></a>
            <a class="combat-control center" aria-label="{{localize 'COMBAT.End'}}" role="button" data-control="endCombat">{{localize 'COMBAT.End'}}</a>
            <a class="combat-control" aria-label="{{localize 'COMBAT.RoundNext'}}" role="button" data-tooltip="COMBAT.RoundNext" data-control="nextRound"><i class="fas fa-step-forward"></i></a>
            {{else}}
            <a class="combat-control center" aria-label="{{localize 'COMBAT.Begin'}}" role="button"  data-control="startCombat">{{localize 'COMBAT.Begin'}}</a>
            {{/if}}
        {{else if control}}
        <a class="combat-control center" aria-label="{{localize 'COMBAT.TurnEnd'}}" role="button"  data-control="nextTurn">{{localize 'COMBAT.TurnEnd'}}</a>
        {{/if}}
    {{/if}}
    </nav>
</section>
