<div class="tab details advancement" data-group="primary" data-tab="advancement">
  <ol class="items-list">
    {{#if editable}}
      <li class="items-header flexrow main-controls">
        <div class="item-controls flexrow configuration-mode-control">
          {{#if isEmbedded}}
            {{#if advancementEditable}}
              <a class="item-control" data-action="toggle-configuration"
                 data-tooltip="DND5E.AdvancementConfigurationActionDisable">
                <i class="fas fa-lock-open"></i> {{localize "DND5E.AdvancementConfigurationModeEnabled"}}
              </a>
            {{else}}
              <a class="item-control" data-action="toggle-configuration"
                 data-tooltip="DND5E.AdvancementConfigurationActionEnable">
                <i class="fas fa-lock"></i> {{localize "DND5E.AdvancementConfigurationModeDisabled"}}
              </a>
            {{/if}}
          {{/if}}
        </div>
        {{#if advancementEditable}}
          <div class="item-controls flexrow add-button">
            <a class="item-control" data-action="add" data-tooltip="DND5E.AdvancementControlCreate">
              <i class="fas fa-plus"></i>
            </a>
          </div>
        {{/if}}
      </li>
    {{/if}}

    {{#each advancement as |data level|}}
      <li class="items-header flexrow" data-level="{{level}}">
        <h3 class="item-name flexrow">
          {{#if (eq level "0")}}
            {{localize "DND5E.AdvancementLevelAnyHeader"}}
          {{else if (eq level "unconfigured")}}
            {{localize "DND5E.AdvancementLevelNoneHeader"}}
          {{else}}
            {{localize "DND5E.AdvancementLevelHeader" level=level}}
          {{/if}}
        </h3>

        {{#if (and @root.editable data.configured (ne level "unconfigured"))}}
          <div>
            <a class="item-control" data-action="modify-choices">{{localize "DND5E.AdvancementModifyChoices"}}</a>
          </div>
        {{/if}}

        {{#if (eq data.configured "full")}}
          <div class="item-checkmark" data-tooltip="DND5E.AdvancementConfiguredComplete">
            <i class="fas fa-check-circle"></i>
          </div>
        {{else if (eq data.configured "partial")}}
          <div class="item-warning" data-tooltip="DND5E.AdvancementConfiguredIncomplete">
            <i class="fas fa-exclamation-triangle"></i>
          </div>
        {{/if}}
      </li>
      <ol class="item-list">
        {{#each data.items}}
          <li class="advancement-item item flexrow" data-id="{{this.id}}">
            <div class="item-name flexrow">
              <div class="item-image" style="background-image: url('{{this.icon}}')"></div>
              <h4>{{{this.title}}}</h4>
            </div>
            {{#if (or @root.advancementEditable (not @root.isEmbedded))}}
              <div class="flexrow">
                {{#if (eq this.classRestriction "primary")}}
                  {{localize "DND5E.AdvancementClassRestrictionPrimary"}}
                {{else if (eq this.classRestriction "secondary")}}
                  {{localize "DND5E.AdvancementClassRestrictionSecondary"}}
                {{/if}}
              </div>
            {{/if}}
            {{#if @root.advancementEditable}}
              <div class="item-controls flexrow">
                  <a class="item-control" data-action="edit" data-tooltip="DND5E.AdvancementControlEdit">
                    <i class="fas fa-edit"></i>
                  </a>
                  <a class="item-control" data-action="delete" data-tooltip="DND5E.AdvancementControlDelete">
                    <i class="fas fa-trash"></i>
                  </a>
              </div>
            {{/if}}
            {{#if this.summary}}
              <div class="item-summary">
                {{{this.summary}}}
              </div>
            {{/if}}
          </li>
        {{/each}}
      </ol>
    {{/each}}

  </ol>
</div>
