roll20-character-sheets-tester/5eShaped/precompiled/components/spells/spellSlots.html

<div class="col-100 wrap-box has-warlock-slots center mar-b-smd">
  <div class="shaped-row center vert-center">
    <div class="2-4-em">
      <input type="number" name="attr_warlock_spell_slots" value="0">
    </div>
    <div class="pad-l-sm pad-r-sm">&#47;</div>
    <div class="pc edit 1-3-em">
      <span name="attr_warlock_spell_slots_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="pc edit">+</div>
    <div class="edit 1-5-em">
      <input type="number" name="attr_warlock_spell_slots_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="pc edit">=</div>
    <div class="1-5-em">
      <span name="attr_warlock_spell_slots_max" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="pad-l-lg">
      <select name="attr_warlock_spells_max_level">
        <option value="1" data-i18n="1ST"></option>
        <option value="2" data-i18n="2ND"></option>
        <option value="3" data-i18n="3RD"></option>
        <option value="4" data-i18n="4TH"></option>
        <option value="5" data-i18n="5TH"></option>
        <option value="6" data-i18n="6TH"></option>
        <option value="7" data-i18n="7TH"></option>
        <option value="8" data-i18n="8TH"></option>
        <option value="9" data-i18n="9TH"></option>
      </select>
    </div>
  </div>
  <button type="roll" name="roll_shaped_warlock_spells" class="wrapper-button" value="@{spells_macro_var}">
    <div class="wrap-box-title center" data-i18n="WARLOCK_SPELL_SLOTS"></div>
  </button>
</div>
<div class="col-100 wrap-box center mar-b-smd">
  <input type="checkbox" name="attr_spell_slots_toggle" class="toggle-spell-slots edit" checked><span class="toggle-spell-slots edit button" data-i18n="SPELL_SLOTS"></span>
  <input type="checkbox" name="attr_spell_points_toggle" class="toggle-spell-points edit"><span class="toggle-spell-points edit button" data-i18n="SPELL_POINTS"></span>
  <input type="checkbox" name="attr_spell_slots_all" class="toggle-spell-slots-all edit"><span class="toggle-spell-slots-all edit button" data-i18n="ALL"></span>

  <div class="spell-slots zebra-rows">
    <div class="shaped-row spell-level-1 center vert-center">
      <div class="pad-r-sm" data-i18n="1ST"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l1" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l1_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l1_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l1_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-2 center vert-center">
      <div class="pad-r-sm" data-i18n="2ND"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l2" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l2_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l2_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l2_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-3 center vert-center">
      <div class="pad-r-sm" data-i18n="3RD"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l3" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l3_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l3_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l3_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-4 center vert-center">
      <div class="pad-r-sm" data-i18n="4TH"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l4" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l4_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l4_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l4_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-5 center vert-center">
      <div class="pad-r-sm" data-i18n="5TH"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l5" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l5_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l5_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l5_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-6 center vert-center">
      <div class="pad-r-sm" data-i18n="6TH"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l6" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l6_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l6_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l6_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-7 center vert-center">
      <div class="pad-r-sm" data-i18n="7TH"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l7" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l7_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l7_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l7_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-8 center vert-center">
      <div class="pad-r-sm" data-i18n="8TH"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l8" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l8_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l8_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l8_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>
    <div class="shaped-row spell-level-9 center vert-center">
      <div class="pad-r-sm" data-i18n="9TH"></div>
      <div class="2-4-em">
        <input type="number" name="attr_spell_slots_l9" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="pc edit 1-3-em">
        <span name="attr_spell_slots_l9_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit 1-5-em">
        <input type="number" name="attr_spell_slots_l9_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="1-5-em">
        <span name="attr_spell_slots_l9_max" class="pseudo-input center border-bottom"></span>
      </div>
    </div>

    <button type="roll" name="roll_shaped_spells" class="wrapper-button" value="@{spells_macro_var}">
      <div class="wrap-box-title center" data-i18n="SPELL_SLOTS_TITLE"></div>
    </button>
  </div>
  <div class="spell-slots spell-points mar-b-smd"></div>
  <div class="spell-points zebra-rows">
    <div class="shaped-row spell-level-1 center vert-center">
      <div class="pad-r-sm" data-i18n="1ST"></div>
      <div>2</div>
    </div>
    <div class="shaped-row spell-level-2 center vert-center">
      <div class="pad-r-sm" data-i18n="2ND"></div>
      <div>3</div>
    </div>
    <div class="shaped-row spell-level-3 center vert-center">
      <div class="pad-r-sm" data-i18n="3RD"></div>
      <div>5</div>
    </div>
    <div class="shaped-row spell-level-4 center vert-center">
      <div class="pad-r-sm" data-i18n="4TH"></div>
      <div>6</div>
    </div>
    <div class="shaped-row spell-level-5 center vert-center">
      <div class="pad-r-sm" data-i18n="5TH"></div>
      <div>7</div>
    </div>
    <div class="shaped-row spell-level-6 center vert-center">
      <div class="pad-r-sm" data-i18n="6TH"></div>
      <div>9</div>
    </div>
    <div class="shaped-row spell-level-7 center vert-center">
      <div class="pad-r-sm" data-i18n="7TH"></div>
      <div>10</div>
    </div>
    <div class="shaped-row spell-level-8 center vert-center">
      <div class="pad-r-sm" data-i18n="8TH"></div>
      <div>11</div>
    </div>
    <div class="shaped-row spell-level-9 center vert-center">
      <div class="pad-r-sm" data-i18n="9TH"></div>
      <div>13</div>
    </div>
    <div class="shaped-row center no-background mar-t-sm">
      <div class="3-em">
        <input type="number" name="attr_spell_points" value="0">
      </div>
      <div class="pad-l-sm pad-r-sm">&#47;</div>
      <div class="3-em">
        <input type="number" name="attr_spell_points_max" value="0" min="0">
      </div>
    </div>
    <button type="roll" name="roll_shaped_spell_points" class="wrapper-button" value="@{spell_points_macro_var}">
      <div class="wrap-box-title center" data-i18n="SPELL_POINTS"></div>
    </button>
  </div>
</div>