roll20-character-sheets/5eShaped/precompiled/components/core/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-md">
  <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="shaped-row space-around">
    <div class="shaped-row spell-level-1 center vert-center">
      <div data-i18n="1ST"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l1" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l1_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">2</span>
      </div>
      <div>)</div>
    </div>
    <div class="shaped-row spell-level-2 center vert-center">
      <div data-i18n="2ND"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l2" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l2_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">3</span>
      </div>
      <div>)</div>
    </div>
    <div class="shaped-row spell-level-3 center vert-center">
      <div data-i18n="3RD"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l3" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l3_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">5</span>
      </div>
      <div>)</div>
    </div>
  </div>
  <div class="shaped-row space-around">
    <div class="shaped-row spell-level-4 center vert-center">
      <div data-i18n="4TH"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l4" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l4_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">6</span>
      </div>
      <div>)</div>
    </div>
    <div class="shaped-row spell-level-5 center vert-center">
      <div data-i18n="5TH"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l5" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l5_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">7</span>
      </div>
      <div>)</div>
    </div>
    <div class="shaped-row spell-level-6 center vert-center">
      <div data-i18n="6TH"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l6" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l6_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">8</span>
      </div>
      <div>)</div>
    </div>
  </div>
  <div class="shaped-row space-around">
    <div class="shaped-row spell-level-7 center vert-center">
      <div data-i18n="7TH"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l7" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l7_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">10</span>
      </div>
      <div>)</div>
    </div>
    <div class="shaped-row spell-level-8 center vert-center">
      <div data-i18n="8TH"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l8" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l8_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">11</span>
      </div>
      <div>)</div>
    </div>
    <div class="shaped-row spell-level-9 center vert-center">
      <div data-i18n="9TH"></div>
      <div class="pad-l-sm">(</div>
      <div class="spell-slots shaped-row center vert-center">
        <div class="1-em">
          <input type="number" name="attr_spell_slots_l9" value="0" class="no-spin">
        </div>
        <div>&#47;</div>
        <span name="attr_spell_slots_l9_max"></span>
      </div>
      <div>
        <span class="spell-slots spell-points">; </span>
        <span class="spell-points">13</span>
      </div>
      <div>)</div>
    </div>
  </div>
  <div class="spell-points shaped-row center 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>
  <div class="shaped-row space-around">
    <div class="spell-slots">
      <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">
      <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>
</div>