<div class="roll-dialog-content">
  <h3 class="combat-mode-label">{{ localize 'VERMINE.open_learning' }}</h3>

  <div class="learning-summary">
    <span class="label">{{ localize 'VERMINE.experience_dice' }}:</span>
    <span class="exp-value">{{ dice }}D</span>
  </div>

  <div class="learning-type">
    <label><input type="radio" data-roll="true" name="learning-type" value="skill" checked /><span>{{ localize 'VERMINE.learn_skill' }}</span></label>
    <label><input type="radio" data-roll="true" name="learning-type" value="specialty" /><span>{{ localize 'VERMINE.learn_specialty' }}</span></label>
    <label><input type="radio" data-roll="true" name="learning-type" value="characteristic" /><span>{{ localize 'VERMINE.learn_characteristic' }}</span></label>
    <label><input type="radio" data-roll="true" name="learning-type" value="reserve" /><span>{{ localize 'VERMINE.learn_reserve' }}</span></label>
    <label><input type="radio" data-roll="true" name="learning-type" value="evolution" /><span>{{ localize 'VERMINE.learn_evolution' }}</span></label>
    <label><input type="radio" data-roll="true" name="learning-type" value="totem" /><span>{{ localize 'VERMINE.learn_totem_ability' }}</span></label>
    <label><input type="radio" data-roll="true" name="learning-type" value="background" /><span>{{ localize 'VERMINE.learn_background' }}</span></label>
    <label><input type="radio" data-roll="true" name="learning-type" value="reputation" /><span>{{ localize 'VERMINE.learn_reputation' }}</span></label>
  </div>

  <div id="learning-skill-section" class="learning-targets">
    <label class="label" for="learning-target">{{ localize 'VERMINE.learn_skill' }}</label>
    <select class="info-value" data-roll="true" id="learning-target" name="learning-target">
      {{#each skills}}
      <option value="{{ this.key }}" data-value="{{ this.value }}" data-rarity="{{ this.rarity }}" data-domain="{{ this.isDomain }}">
        {{ this.name }} ({{ this.value }} → {{ this.target }})
      </option>
      {{/each}}
    </select>
    <p class="learning-hint" id="socle-bonus-hint" style="display:none;"></p>
  </div>

  <div id="learning-specialty-section" class="learning-targets" style="display:none;">
    <div class="flexrow bonus-item">
      <label class="label" for="specialty-name">{{ localize 'VERMINE.learn_specialty_name' }}</label>
      <input type="text" data-roll="true" id="specialty-name" name="specialty-name" value="{{ localize 'ITEMS.new_specialty' }}" />
    </div>
    <p class="learning-hint">{{ localize 'VERMINE.specialty_hint' }}</p>
  </div>

  <div id="learning-ability-section" class="learning-targets" style="display:none;">
    <label class="label" for="learning-ability">{{ localize 'VERMINE.learn_characteristic' }}</label>
    <select class="info-value" data-roll="true" id="learning-ability" name="learning-ability">
      {{#each abilities}}
      <option value="{{ this.key }}">{{ this.label }} ({{ this.value }})</option>
      {{/each}}
    </select>
    <p class="learning-hint">{{ localize 'VERMINE.characteristic_hint' }}</p>
  </div>

  <div id="learning-reserve-section" class="learning-targets" style="display:none;">
    <label class="label" for="learning-reserve">{{ localize 'VERMINE.learn_reserve' }}</label>
    <select class="info-value" data-roll="true" id="learning-reserve" name="learning-reserve">
      {{#each reserves}}
      <option value="{{ this.key }}">{{ this.label }} ({{ this.value }}/{{ this.max }})</option>
      {{/each}}
    </select>
    <p class="learning-hint">{{ localize 'VERMINE.reserve_hint' }}</p>
  </div>

  <div id="learning-evolution-section" class="learning-targets" style="display:none;">
    <p class="learning-hint">{{ localize 'VERMINE.evolution_hint' }}</p>
    {{#if canUseAdaptedDie}}
    <div class="flexrow bonus-item" id="learning-adapted-die-row" style="display:none;">
      <label class="label" for="learning-adapted-die">{{ localize 'VERMINE.learn_adapted_die' }}</label>
      <input type="checkbox" data-roll="true" id="learning-adapted-die" name="learning-adapted-die" />
    </div>
    {{/if}}
  </div>

  <div id="learning-totem-section" class="learning-targets" style="display:none;">
    {{#if totemAbilities.length}}
    <label class="label" for="learning-totem">{{ localize 'VERMINE.learn_totem_ability' }}</label>
    <select class="info-value" data-roll="true" id="learning-totem" name="learning-totem">
      {{#each totemAbilities}}
      <option value="{{ this.id }}" data-level="{{ this.level }}" data-threshold="{{ this.threshold }}" data-hindrance="{{ this.hindrance }}">
        {{ this.name }} (N{{ this.level }} — {{ this.threshold }}{{#ifgt this.hindrance 0}}/{{ roman this.hindrance }}{{/ifgt}})
      </option>
      {{/each}}
    </select>
    {{else}}
    <p class="learning-hint">{{ localize 'VERMINE.no_totem_ability' }}</p>
    {{/if}}
    <p class="learning-hint">{{ localize 'VERMINE.totem_ability_hint' }}</p>
  </div>

  <div id="learning-background-section" class="learning-targets" style="display:none;">
    {{#if backgrounds.length}}
    <label class="label" for="learning-background">{{ localize 'VERMINE.learn_background' }}</label>
    <select class="info-value" data-roll="true" id="learning-background" name="learning-background">
      {{#each backgrounds}}
      <option value="{{ this.id }}" data-asterisk="{{ this.asterisk }}">
        {{ this.name }}{{#if this.asterisk}} *{{/if}}
      </option>
      {{/each}}
    </select>
    {{else}}
    <p class="learning-hint">{{ localize 'VERMINE.no_background' }}</p>
    {{/if}}
    <p class="learning-hint">{{ localize 'VERMINE.background_hint' }}</p>
  </div>

  <div id="learning-reputation-section" class="learning-targets" style="display:none;">
    <label class="label" for="learning-reputation-direction">{{ localize 'VERMINE.learn_reputation' }}</label>
    <select class="info-value" data-roll="true" id="learning-reputation-direction" name="learning-reputation-direction">
      <option value="reduce">{{ localize 'VERMINE.reputation_reduce' }}</option>
      <option value="increase">{{ localize 'VERMINE.reputation_increase' }}</option>
    </select>
    <p class="learning-hint">{{ localize 'VERMINE.reputation_hint' }}</p>
    <p class="learning-hint"><strong>{{ localize 'VERMINE.reputation_current' }}: <span id="reputation-target">{{ reputation }}</span></strong></p>
  </div>

  <div class="flexrow bonus-item full-width">
    <label class="label" for="learning-dice">{{ localize 'VERMINE.dice_spent' }}</label>
    <input type="number" class="numeric-entry" style="text-align:center;" data-roll="true"
      id="learning-dice" name="learning-dice" min="1" max="{{ dice }}" value="1" />
    <span>D</span>
  </div>

  <div class="learning-result">
    <div class="context-item">
      <span class="context-label">{{ localize 'VERMINE.difficulty' }}</span>
      <span class="context-value" id="diff-value">5</span>
    </div>
    <div class="context-item">
      <span class="context-label">{{ localize 'VERMINE.handicap' }}</span>
      <span class="context-value" id="handicap-value">0</span>
    </div>
    <div class="context-item">
      <span class="context-label">{{ localize 'VERMINE.success_required' }}</span>
      <span class="context-value" id="required-value">1</span>
    </div>
    <div class="context-item">
      <span class="context-label">{{ localize 'VERMINE.pool_total' }}</span>
      <span class="context-value" id="pool-value">1D</span>
    </div>
  </div>

  <footer class="sheet-footer flexrow">
    <button type="button" data-action="cancel">
      <i class="fas fa-times"></i> {{localize "VERMINE.cancel"}}
    </button>
    <button type="button" data-action="roll">
      <i class="fas fa-graduation-cap"></i> {{localize "VERMINE.roll"}}
    </button>
  </footer>
</div>
