{{!-- Avatar Tab --}}
<div class="tab avatar {{#if (eq activeSheetTab "avatar")}}active{{/if}}" data-group="sheet" data-tab="avatar">

  {{!-- Path Skill Banner --}}
  {{#if avatarSkill}}
  <section class="adept-obsession-banner avatar-banner">
    <div class="adept-obsession-label">{{localize "UA2E.Avatar.PathSkill"}}</div>
    <div class="adept-obsession-name">{{avatarSkill.name}}</div>
    <div class="adept-obsession-value">{{avatarSkill.value}}<span class="stat-pct">%</span></div>
  </section>
  {{else}}
  <p class="hint adept-hint">{{localize "UA2E.Avatar.NoPathHint"}}</p>
  {{/if}}

  <section class="adept-section">
    <h3 class="adept-section-title">{{localize "UA2E.Avatar.Path"}}</h3>
    <div class="form-group">
      <label>{{localize "UA2E.Avatar.PathName"}}</label>
      <input type="text" name="system.avatarPath" value="{{avatarPath}}"
             placeholder="{{localize "UA2E.Avatar.PathNamePlaceholder"}}" />
    </div>
    <div class="form-group">
      <label>{{localize "UA2E.Avatar.PathSkill"}}</label>
      <select name="system.avatarPathSkillId">
        <option value="">{{localize "UA2E.Avatar.SelectPathSkill"}}</option>
        {{#each soulSkillChoices as |skill|}}
          <option value="{{skill.id}}" {{#if (eq ../avatarPathSkillId skill.id)}}selected{{/if}}>{{skill.name}}</option>
        {{/each}}
      </select>
    </div>
  </section>

  {{!-- Who Am I --}}
  <section class="adept-section">
    <h3 class="adept-section-title">{{localize "UA2E.Avatar.Description"}}</h3>
    <div class="form-group">
      <textarea name="system.avatarDescription" rows="4"
                placeholder="{{localize "UA2E.Avatar.DescriptionPlaceholder"}}">{{avatarDescription}}</textarea>
    </div>
  </section>

  {{!-- Taboo --}}
  <section class="adept-section">
    <h3 class="adept-section-title">{{localize "UA2E.Avatar.Taboo"}}</h3>
    <div class="form-group">
      <textarea name="system.avatarTaboo" rows="2"
                placeholder="{{localize "UA2E.Avatar.TabooPlaceholder"}}">{{avatarTaboo}}</textarea>
    </div>
  </section>

  {{!-- Channel Timeline --}}
  <section class="adept-section channel-section">
    <div class="skills-controls">
      <h3 class="adept-section-title">{{localize "UA2E.Avatar.Channels"}}</h3>
      <button type="button" data-action="createChannel" class="create-btn">
        <i class="fas fa-plus"></i> {{localize "UA2E.Channel.New"}}
      </button>
    </div>

    {{#if avatarChannels.length}}
    <div class="channel-timeline">
      {{#each avatarChannels as |ch|}}
      <div class="channel-node {{#if ch.unlocked}}unlocked{{else}}locked{{/if}}" data-item-id="{{ch.id}}">
        <div class="channel-threshold">
          <span class="channel-threshold-value">{{ch.minSkill}}%+</span>
        </div>
        <div class="channel-spine"></div>
        <div class="channel-content">
          <div class="channel-header">
            <span class="channel-name">{{ch.name}}</span>
            <div class="skill-controls-col channel-controls">
              <button type="button" data-action="editChannel" data-tooltip="{{localize "UA2E.Common.Edit"}}"><i class="fas fa-edit"></i></button>
              <button type="button" data-action="deleteChannel" data-tooltip="{{localize "UA2E.Common.Delete"}}"><i class="fas fa-trash"></i></button>
            </div>
          </div>
        </div>
      </div>
      {{/each}}
    </div>
    {{else}}
    <p class="hint">{{localize "UA2E.Channel.Empty"}}</p>
    {{/if}}
  </section>

</div>