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

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

  <div class="flexrow bonus-item full-width">
    <label class="label" for="evolution-name">{{ localize 'VERMINE.evolution_name' }}</label>
    <input type="text" data-roll="true" id="evolution-name" name="evolution-name" value="{{ defaultName }}" />
  </div>

  <div class="flexrow bonus-item full-width">
    <label class="label" for="evolution-level">{{ localize 'VERMINE.evolution_level' }}</label>
    <select class="info-value" data-roll="true" id="evolution-level" name="evolution-level">
      {{#each levels}}
      <option value="{{ this.value }}">{{ this.value }}D</option>
      {{/each}}
    </select>
  </div>

  <div class="flexrow bonus-item full-width">
    <label class="label" for="evolution-mutation">{{ localize 'VERMINE.evolution_mutation' }}</label>
    <input type="checkbox" data-roll="true" id="evolution-mutation" name="evolution-mutation" />
  </div>

  <div class="learning-result">
    <div class="context-item">
      <span class="context-label">{{ localize 'VERMINE.evolution_total' }}</span>
      <span class="context-value" id="evolution-total-value">{{ totalLevels }}D</span>
    </div>
    <div class="context-item">
      <span class="context-label">{{ localize 'VERMINE.evolution_mode_max' }}</span>
      <span class="context-value">{{ modeMax }}D</span>
    </div>
    <div class="context-item">
      <span class="context-label">{{ localize 'VERMINE.game_mode' }}</span>
      <span class="context-value">{{ modeLabel }}</span>
    </div>
  </div>

  <p class="learning-hint">{{ localize 'VERMINE.evolution_buy_hint' }}</p>

  <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="buy">
      <i class="fas fa-cart-shopping"></i> {{localize "VERMINE.buy_evolution"}}
    </button>
  </footer>
</div>
