<h1 style="flex: 0 0 auto;">{{localize 'CoC7.InvestigatorWizard.TitleArchetypeSkills'}}</h1>
<div class="scrollsection scroll-to-archetype">
  <div class="form-group">{{localize 'CoC7.InvestigatorWizard.ArchetypeDefaultSkills' count=max}}</div>
  <div class="flexcol-coc7">
    <ol class="skills-list">
      {{#each skillItems as |skill|}}
        {{#if (eq skill.group 'default')}}
          {{> 'systems/CoC7/templates/apps/investigator-wizard/toggle-skill.hbs' skill=skill toggleKey='archetypeToggle'}}
        {{/if}}
      {{/each}}
    </ol>
    <div class="form-group">&nbsp;</div>
    <div class="form-group">{{localize 'CoC7.InvestigatorWizard.ArchetypeOptionalSkills'}}</div>
    <ol class="skills-list" data-type="occupationOther">
      {{#each skillItems as |skill|}}
        {{#if (eq skill.group 'other')}}
          {{> 'systems/CoC7/templates/apps/investigator-wizard/toggle-skill.hbs' skill=skill toggleKey='archetypeToggle'}}
        {{/if}}
      {{/each}}
   </ol>
  </div>
</div>
<div style="flex: 0 0 auto;">
  <div class="form-group status flexrow-coc7"><div style="flex: 0 0 auto;">{{#if (eq selected max)}}<i class="fa-solid fa-circle-check"></i>{{else}}<i class="fa-solid fa-circle-xmark"></i>{{/if}}</div><div>{{localize 'CoC7.InvestigatorWizard.SkillSpendArchetypeCountIncorrect' count=selected max=max}}</div></div>
</div>
