mixin checkbox(name, label, value)
  .checkbox
    label= label
    .checkboxInner
      +input('checkbox', name)(value=value)
      div

mixin fraction(name)
  .fraction
    input(type='number', name='attr_' + name)
    span /
    input(type='number', name='attr_' + name + '_max')

mixin input(type, name)
  input(type=type, name='attr_' + name, id=attributes.id, placeholder=attributes.placeholder, style=attributes.style, value=attributes.value, min=attributes.min, max=attributes.max, disabled=attributes.disabled, checked=attributes.checked, class=attributes.class, title=attributes.title, spellcheck='false')

mixin labelledAbove(label)
  .labelledAbove(style=attributes.style)
    label= label
    .inner: block

mixin labelledBoxH(label)
  .labelledBoxH(class=attributes.class, style=attributes.style)
    label= label
    .inner: block

mixin labelledBoxV(label)
  .labelledBoxV(class=attributes.class, style=attributes.style)
    label= label
    .inner: block


mixin labelledUnderlined(label)
  .labelledUnderlined(style=attributes.style, title=attributes.title)
    label= label
    .inner: block

mixin option(view, value, isSelected)
  -
    if(!value)
      value = view;
  option(value=value, selected=isSelected)= view

mixin readOnlyBox(name)
  .readOnlyBox(style=attributes.style): span(name='attr_' + name)
  input(type='hidden', name='attr_' + name)

mixin repeating(name)
  fieldset(class='repeating_' + name)
    block

mixin rollButton(options)
  -
    if(typeof options === 'string')
      options = { attr: options };
      
    var tpl = '&{template:toe} {{charName=@{character_name}}} {{attr=' + options.attr + '}} {{result=[[@{' + (options.result || options.attr) + '}]]}}';
    if(options.notes)
      tpl += '{{notes=@{' + options.notes + '}}}';
    if(options.updowngrade)
      tpl += '{{updowngrade=@{' + options.updowngrade + '}}}';
    if (options.updowngrade_note)
      tpl += '{{updowngrade_note=@{' + options.updowngrade_note + '}}}'
  button(type='roll', value=tpl, title='Click to roll!')

mixin select(name)
  select(name='attr_' + name, style=attributes.style)
    block

mixin selectDice(name)
  +select(name)(style=attributes.style)
    +option('Pick One', 'null', true)
    +option('D4')
    +option('D6')
    +option('D8')
    +option('D10')
    +option('D12')
    +option('D20')
    +option('D20+D4', '{D20,D4}k1')
    +option('D20+D6', '{D20,D6}k1')
    +option('D20+D8', '{D20,D8}k1')
    +option('D20+D10', '{D20,D10}k1')
    +option('D20+D12', '{D20,D12}k1')
    +option('2D20', '{D20,D20}k1')
    +option('2D20+D4', '{D20,D20,D4}k1')
    +option('2D20+D6', '{D20,D20,D6}k1')
    +option('2D20+D8', '{D20,D20,D8}k1')
    +option('2D20+D10', '{D20,D20,D10}k1')
    +option('2D20+D12', '{D20,D20,D12}k1')
    +option('3D20', '{D20,D20,D20}k1')

mixin selectQuirkSource(name)
  +select(name)(style=attributes.style)
    +option('Pick One', 'null', true)
    +option('Main')
    +option('Race')
    +option('Item')
    +option('Temporary')
    +option("Other")

mixin selectTalentSource(name)
  +select(name)(style=attributes.style)
    +option('Pick One', 'null', true)
    +option('Cutie Mark')
    +option('Race')
    +option('Level Up')
    +option('Item')
    +option('Temporary')
    +option('Training')
    +option('Other')
    
mixin selectTrait(name)
  +select(name)(style=attributes.style)
    +option('none', 'null', true)
    +option('body')
    +option('mind')
    +option('charm')

mixin textarea(name)
  textarea(name='attr_' + name, style=attributes.style, placeholder=attributes.placeholder)

mixin updowngrade(prefix)
  -
    if(prefix !== '' && !prefix.endsWith('_'))
      prefix += '_';

  .updowngrade(title="Adjust this to upgrade or downgrade your roll.")
    label
      | Upgrade/
      br
      | Downgrade
    span.arrows
      .up
        input(type='checkbox', name='attr_' + prefix + 'tickup', value='1', title="Upgrade 1 step")
        span ▲
      .down
        input(type='checkbox', name='attr_' + prefix + 'tickdown', value='1', title="Downgrade 1 step")
        span ▼
    span
      +labelledUnderlined('')(style='width: 0.3in;'): +input('number', prefix + 'updowngrade')
      +input('hidden', prefix + 'updowngrade_note')