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

<div class="spell-slots-points 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">
    <div class="shaped-row spell-level-1 center vert-center">
      <div class="col-17 center pad-r-sm" data-i18n="1st"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l1_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l1_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="2nd"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l2_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l2_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="3rd"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l3_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l3_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="4th"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l4_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l4_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="5th"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l5_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l5_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="6th"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l6_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l6_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="7th"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l7_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l7_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="8th"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l8_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l8_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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="col-17 center pad-r-sm" data-i18n="9th"></div>
      <div class="col-23">
        <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 col-13">
        <span name="attr_spell_slots_l9_calc" class="pseudo-input center border-bottom"></span>
      </div>
      <div class="pc edit">+</div>
      <div class="edit col-13">
        <input type="number" name="attr_spell_slots_l9_bonus" class="no-spin" value="0" min="0">
      </div>
      <div class="pc edit">=</div>
      <div class="col-16">
        <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-points">
    <div class="shaped-row spell-level-1 center vert-center">
      <div class="col-20 center" data-i18n="1st"></div>
      <div class="col-20 center pad-l-sm">
        <span>2</span>
      </div>
    </div>
    <div class="shaped-row spell-level-2 center vert-center">
      <div class="col-20 center" data-i18n="2nd"></div>
      <div class="col-20 center pad-l-sm">
        <span>3</span>
      </div>
    </div>
    <div class="shaped-row spell-level-3 center vert-center">
      <div class="col-20 center" data-i18n="3rd"></div>
      <div class="col-20 center pad-l-sm">
        <span>5</span>
      </div>
    </div>
    <div class="shaped-row spell-level-4 center vert-center">
      <div class="col-20 center" data-i18n="4th"></div>
      <div class="col-20 center pad-l-sm">
        <span>6</span>
      </div>
    </div>
    <div class="shaped-row spell-level-5 center vert-center">
      <div class="col-20 center" data-i18n="5th"></div>
      <div class="col-20 center pad-l-sm">
        <span>7</span>
      </div>
    </div>
    <div class="shaped-row spell-level-6 center vert-center">
      <div class="col-20 center" data-i18n="6th"></div>
      <div class="col-20 center pad-l-sm">
        <span>9</span>
      </div>
    </div>
    <div class="shaped-row spell-level-7 center vert-center">
      <div class="col-20 center" data-i18n="7th"></div>
      <div class="col-20 center pad-l-sm">
        <span>10</span>
      </div>
    </div>
    <div class="shaped-row spell-level-8 center vert-center">
      <div class="col-20 center" data-i18n="8th"></div>
      <div class="col-20 center pad-l-sm">
        <span>11</span>
      </div>
    </div>
    <div class="shaped-row spell-level-9 center vert-center">
      <div class="col-20 center" data-i18n="9th"></div>
      <div class="col-20 center pad-l-sm">
        <span>13</span>
      </div>
    </div>
    <div class="shaped-row center no-background">
      <div class="col-35 center pad-r-sm">
        <input type="number" name="attr_spell_points" value="0">
      </div>
      <div class="col-05 center">&#47;</div>
      <div class="col-35 center pad-l-sm">
        <input type="number" name="attr_spell_points_max" value="0" min="0">
      </div>
    </div>

    <div class="wrap-box-title center">
      <span class="spell-points" data-i18n="SPELL_POINTS_TITLE"></span>
    </div>
  </div>
</div>