//- @pugdoc
  name: button-label
  description: A mixin to create a combined button and input that are within the same container. Similar to {@link input-label}, but does not use a label.
  arguments:
    - {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
    - {object} buttonObj - An object describing the button to be paired with the input. This is the same object that you would pass to {@link button}.
    - {object} divObj - An object describing the container div. Similar to the first two objects, but will most likely only have a `class` property if it is passed at all.
  attributes:
  example: |
    include _htmlelements.pug
    +button-label({
      inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
      buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
      divObj:{class:'strength'}
    })
mixin button-label({inputObj,buttonObj,divObj})
  if divObj
    - divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
  - inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
  - buttonObj.class = buttonObj.class ? replaceProblems(buttonObj.class) : undefined;
  - inputObj.name = inputObj.name.replace(/\s+/g,'_');
  - buttonObj.name = (buttonObj.name || inputObj.name).replace(/\s+/g,'_');
  .input-label.input-label--button&attributes(divObj)
    - inputObj.class = inputObj.class ? `${inputObj.class} input-label__input` : 'input-label__input';
    if spanObj
      - buttonObj.class = buttonObj.class ? `${buttonObj.class} input-label__text` : 'input-label__text';
    +button(buttonObj)
    +input(inputObj)
//-End Mixin




//- @pugdoc
  name: roller-label
  description: Similar to the construction created by {@link button-label}, except that it creates a {@link roller} construction instead of just a straight button.
  arguments:
    - {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
    - {object} buttonObj - An object describing the button to be paired with the input. This is the same object that you would pass to {@link button}.
    - {object} divObj - An object describing the container div. Similar to the first two objects, but will most likely only have a `class` property if it is passed at all.
  attributes:
  example: |
    include _htmlelements.pug
    +roller-label({
      inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
      buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
      divObj:{class:'strength'}
    })
mixin roller-label({inputObj,buttonObj,divObj})
  +rollerExtras(buttonObj)
    +button-label({inputObj,buttonObj,divObj})
//-End Mixin




//- @pugdoc
  name: action-label
  description: Similar to the construction created by {@link button-label}, except that it specifcally creates an [action button](https://wiki.roll20.net/Button#Action_Button) as per {@link action}.
  arguments:
    - {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
    - {object} buttonObj - An object describing the button to be paired with the input. This is the same object that you would pass to {@link button}.
    - {object} divObj - An object describing the container div. Similar to the first two objects, but will most likely only have a `class` property if it is passed at all.
  attributes:
  example: |
    include _htmlelements.pug
    +roller-label({
      inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
      buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
      divObj:{class:'strength'}
    })
mixin action-label({inputObj,buttonObj,divObj})
  - buttonObj.type = 'action';
  +button-label(inputObj,buttonObj,divObj)
//-End Mixin




//- @pugdoc
  name: select-label
  description: Similar to the construction created by {@link input-label}, except that the input is replaced with a select.
  arguments:
    - {string} label - The translation key to use for the span. If not passed, then the spanObj must be passed with a translation key
    - {object} inputObj - An object describing the select to be paired with the button. This is the same object that you would pass to {@link select}.
    - {object} [divObj] - An object describing the container label. Similar to the inputObj, but will most likely only have a `class` property if it is passed at all.
    - {object} [spanObj] - An object describing the span to be paired with the input. This is the same object that you would pass to {@link span}.
    - {block} block - The mixin uses the pug block as the content of the select.
  attributes:
  example: |
    include _htmlelements.pug
    +select-label({
      label:'Whisper to GM',
      inputObj:{name:'whisper'},
      divObj:{class:'div-class'},
      spanObj:{class:'span-class'}
    })
      +option({value:'','data-i18n':'never',selected:''})
      +option({value:'/w gm ','data-i18n':'always'})
mixin select-label({label,inputObj,divObj,spanObj})
  if divObj
    - divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
  if inputObj
    - inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
  if spanObj
    - spanObj.class = spanObj.class ? replaceProblems(spanObj.class) : undefined;
  label.input-label&attributes(divObj)
    - inputObj.name = inputObj.name.replace(/\s+/g,'_');
    - inputObj.class = inputObj.class ? `${inputObj.class} input-label__input` : 'input-label__input';
    if spanObj
      - spanObj.class = spanObj.class ? `${spanObj.class} input-label__text` : 'input-label__text';
    span(data-i18n=label)&attributes(spanObj)
    +select(inputObj)
      block
//-End Mixin




//- @pugdoc
  name: input-label
  description: 
  arguments:
    - {string} label - The translation key to use for the span. If not passed, then the spanObj must be passed with a translation key
    - {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
    - {object} [divObj] - An object describing the container label. Similar to the inputObj, but will most likely only have a `class` property if it is passed at all.
    - {object} [spanObj] - An object describing the span to be paired with the input. This is the same object that you would pass to {@link span}.
  attributes:
  example: |
    include _htmlelements.pug
    +input-label({
      label:'strength',
      inputObj:{name:'strength',type:'number'},
      divObj:{class:'div-class'},
      spanObj:{class:'span-class'}
    })
mixin input-label({label,inputObj,divObj,spanObj})
  if divObj
    - divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
  if inputObj
    - inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
  if spanObj
    - spanObj.class = spanObj.class ? replaceProblems(spanObj.class) : undefined;
  label.input-label&attributes(divObj)
    - inputObj.name = inputObj.name.replace(/\s+/g,'_');
    - inputObj.class = inputObj.class ? `${inputObj.class} input-label__input` : 'input-label__input';
    if spanObj
      - spanObj.class = spanObj.class ? `${spanObj.class} input-label__text` : 'input-label__text';
    span(data-i18n=label)&attributes(spanObj)
    +input(inputObj)
//-End Mixin




mixin dual-input-label({label,inputArr,divObj,spanObj,separatorObj={content:'/'}})
  if divObj
    - divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
  if spanObj
    - spanObj.class = spanObj.class ? replaceProblems(spanObj.class) : undefined;
  - const separator = separatorObj.content || '';
  - delete separatorObj.content;
  .input-label.input-label--dual&attributes(divObj)
    span(data-i18n=label)&attributes(spanObj)
    each inputObj,i in inputArr
      if inputObj
        - inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
      - inputObj.name = inputObj.name.replace(/\s+/g,'_');
      +input(inputObj)
      if i<1
        |<!-- separatorObj:#{JSON.stringify(separatorObj)} -->
        span(class='slash h2')&attributes(separatorObj) #{separator}

//- @pugdoc
  name: headedTextarea
  description: Creates a construction for pairing a header with a textarea. Currently is locked to creating an `h3`.  This mixin also accepts classes and IDs appended directly to it (see the second example)
  arguments:
    - {object} textObj - The object describing the textarea as per {@link textarea}
    - {string} header - The `data-i18n` translation key to use for the header
  attributes:
  example: |
    include _htmlelements.pug
    +headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'})
    //With class appended to the mixin itself
    +headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'}).character-description
mixin headedTextarea({textObj,header})
  .headed-textarea&attributes(attributes)
    - textObj.class = textObj.class ? `${textObj.class} headed-textarea__textarea` : 'headed-textarea__textarea';
    +h3({'data-i18n':header,class:'headed-textarea__header'})
    +textarea(textObj)
//-End Mixin