<div class="details">
  <div class="traits">
    <div class="type">
      <label>{{localize "CoC7.BookType"}}</label>
      <div class="flexrow-coc7">
        <input id="mythos" type="checkbox" name="system.type.mythos" {{checked data.system.type.mythos}} />
        <label class="option" for="system.type.mythos">{{localize "CoC7.Mythos"}}</label>

        <input id="occult" type="checkbox" name="system.type.occult" {{checked data.system.type.occult}} />
        <label class="option" for="system.type.occult">{{localize "CoC7.Occult"}}</label>

        <input id="other" type="checkbox" name="system.type.other" {{checked data.system.type.other}} />
        <label class="option" for="system.type.other">{{localize "CoC7.Other"}}</label>
      </div>
    </div>
    <div class="flexrow-coc7">
      <label>{{localize "CoC7.DifficultyLevel"}}:</label>
      <select name="system.difficultyLevel">
        {{selectOptions difficultyLevels selected=data.system.difficultyLevel localize=true valueAttr="key" nameAttr="key" labelAttr="label"}}
      </select>
    </div>
    {{#if data.system.type.mythos}}
      <div class="flexrow-coc7">
        <label>{{localize "CoC7.StudyTime"}}:</label>
        <input type="number" name="system.study.necessary" value="{{data.system.study.necessary}}" />
        <select name="system.study.units">
          {{selectOptions studyUnits selected=data.system.study.units localize=true valueAttr="key" nameAttr="key" labelAttr="label"}}
        </select>
      </div>
    {{/if}}
    {{#if (or data.system.type.mythos data.system.type.occult)}}
      <div class="flexrow-coc7">
        <label>{{localize "CoC7.SANLoss"}}:</label>
        <input type="text" name="system.sanityLoss" value="{{data.system.sanityLoss}}" />
      </div>
    {{/if}}
  </div>
  <div class="gains">
    <label>{{localize "CoC7.Gains"}}</label>
    <br>
    {{#if data.system.type.mythos}}
      <div class="flexrow-coc7">
        <label>{{localize "CoC7.CthulhuMythosInitial"}}:</label>
        <input type="number" name="system.gains.cthulhuMythos.initial" value="{{data.system.gains.cthulhuMythos.initial}}" />
      </div>
      <div class="flexrow-coc7">
        <label>{{localize "CoC7.CthulhuMythosFinal"}}:</label>
        <input type="number" name="system.gains.cthulhuMythos.final" value="{{data.system.gains.cthulhuMythos.final}}" />
      </div>
      <div class="flexrow-coc7">
        <label>{{localize "CoC7.MythosRating"}}:</label>
        <input type="number" name="system.mythosRating" value="{{data.system.mythosRating}}" />
      </div>
    {{/if}}
    {{#if data.system.type.occult}}
      <div class="flexrow-coc7">
        <label>{{localize "CoC7.Occult"}}:</label>
        <input type="number" name="system.gains.occult" value="{{data.system.gains.occult}}" />
      </div>
    {{/if}}
  </div>
  <div class="other">
    {{#if data.system.type.other}}
      <div class="flexrow-coc7">
        <table>
          <tr>
            <th><label>{{localize "CoC7.Skill"}}</label></th>
            <th><label>{{localize "CoC7.Gains"}}</label></th>
            <th><i class="fas fa-plus add-other-gains"></i></th>
          </tr>
          {{#each data.system.gains.others as |skill key|}}
            <tr data-index="{{@index}}">
              <td><input class="change-other-gains" type="text" value="{{skill.name}}"></td>
              <td>
                <select class="change-other-gains">
                  {{selectOptions ../otherGains selected=skill.value localize=true valueAttr="key" nameAttr="key" labelAttr="label"}}
                </select>
              </td>
              <td><i class="fas fa-trash remove-other-gains"></i></td>
            </tr>
          {{/each}}
        </table>
      </div>
    {{/if}}
  </div>
</div>
