{{ block switch(id, name, value, label, checked, disabled=false) }}
<input id="{{id ? id : (value ? name + "-" + value : name)}}" name="{{name}}"{{if value}} value="{{value}}"{{end}} type="checkbox" class="switch is-success is-rounded"{{if (value && checked == value) || checked}} checked{{end}}{{if disabled}} disabled{{end}}>
<label for="{{id ? id : (value ? name + "-" + value: name)}}">{{label}}</label>
{{ end }}

{{ block checkbox(id, name, value, label, checked, disabled=false) }}
<input id="{{id ? id : (name + "-" + value)}}"{{if name}} name="{{name}}[]"{{end}}{{if value}} value="{{value}}"{{end}} type="checkbox" class="is-checkbox"{{if checked}} checked{{end}}{{if disabled}} disabled{{end}}{{yield content}}>
<label for="{{id ? id : (name + "-" + value)}}">{{label}}</label>
{{ end }}

{{ block radio(id, name, value, label, checked, disabled=false) }}
<input id="{{id ? id : (name + "-" + value)}}" name="{{name}}" value="{{value}}" type="radio" class="is-radio"{{if checked == value}} checked{{end}}{{if disabled}} disabled{{end}}{{yield content}}>
<label for="{{id ? id : (name + "-" + value)}}">{{label}}</label>
{{ end }}

{{ block radios(name, values, labels="", checked) }}
{{ labels = eq(labels, "") ? values : labels }}
{{ range i, v := values }}
<input id="{{ name + "-" + v }}" name="{{name}}" value="{{v}}" type="radio" class="is-radio"{{ if eq(checked, v) }} checked{{end}}>
<label for="{{ name + "-" + v }}">{{ labels[i] }}</label>
{{ end }}
{{ end }}

{{ block select(name, values, labels="", selected, dt) }}
{{ labels = eq(labels, "") ? values : labels }}
<select name="{{name}}"{{if dt}} data-type="{{dt}}"{{end}}>
{{ range i, v := values }}
<option value="{{ v }}"{{ if eq(selected, v) }} selected{{ end }}>{{ labels[i] }}</option>
{{ end }}
</select>
{{ end }}

{{ block option(value, label="", selected) }}
<option value="{{ value }}"{{ if eq(value, selected) }} selected{{ end }}>{{ label == "" ? value : label }}</option>
{{ end }}

{{ block options(name, items)}}
{{ n := replace(name, ".", "-", -1) }}
<table id="table-{{n}}s" class="table is-bordered is-striped is-narrow is-marginless is-fullwidth" data-name="{{name}}">
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
      <th width="48">
        <a class="button is-small is-success is-outlined" data-action="add-{{n}}">
          <span class="icon is-small">
            <i class="fa fa-plus"></i>
          </span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    {{if items}}
    {{ i := 0 }}
    {{range n, v := items}}
    <tr>
      <td>
        <input name="{{name}}s[{{i}}].name" class="input is-small" type="text" value="{{n}}">
      </td>
      <td>
        <input name="{{name}}s[{{i}}].value" class="input is-small" type="text" value="{{v}}">
      </td>
      <td>
        <a class="button is-small is-danger is-outlined" data-action="delete-{{n}}">
          <span class="icon is-small">
            <i class="fa fa-trash"></i>
          </span>
        </a>
      </td>
    </tr>
    {{ i = i + 1 }}
    {{end}}
    {{end}}
  </tbody>
</table>
{{ end }}

{{ block options_table(name, items)}}
{{ n := replace(name, ".", "-", -1) }}
<table id="table-{{n}}s" class="table is-bordered is-striped is-narrow is-marginless is-fullwidth" data-name="{{name}}">
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
      <th width="48">
        <a class="button is-small is-success is-outlined" data-action="add-{{n}}">
          <span class="icon is-small">
            <i class="fa fa-plus"></i>
          </span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    {{if items}}
    {{range i, opt := items}}
    <tr>
      <td>
        <input name="{{name}}s[{{i}}].name" class="input is-small" type="text" value="{{opt.Name}}">
      </td>
      <td>
        <input name="{{name}}s[{{i}}].value" class="input is-small" type="text" value="{{opt.Value}}">
      </td>
      <td>
        <a class="button is-small is-danger is-outlined" data-action="delete-{{n}}">
          <span class="icon is-small">
            <i class="fa fa-trash"></i>
          </span>
        </a>
      </td>
    </tr>
    {{end}}
    {{end}}
  </tbody>
</table>
{{ end }}