<html>
  <head>
    <title>Form Builder</title>
    {{ script_tags|safe }}
    {{ style_tags|safe }}
    <style>
      body {
        max-width: 51em;
        margin: 0px auto 2em auto;
        padding: 0px .5em;
      }

      h1 {
        size: 200%;
      }
    </style>
  </head>
  <body>
    <h1>Form builder!</h1>
    <div class="info">
      Experiment with
      <a href="https://en.wikipedia.org/wiki/WP:Revision coder">Revision coder</a>
      form configurations editing the textbox below.  Click "preview" to
      review the changes and
      <a href="https://en.wikipedia.org/wiki/WP:Revision coder/Request a form">request a form</a>
      when you are ready.
    </div>
    <textarea id="preload_and_delete_me">
title: "<form-title>"

fields:
  - class: "FieldLayout"
    label: "<damaging-label>"
    align: right
    help: "foo"
    classes: ['inline-field']
    fieldWidget:
      name: "damaging"
      class: "ButtonSelectWidget"
      items:
        - class: "ButtonOptionWidget"
          data: true
          label: "<damaging-true-label>"
        - class: "ButtonOptionWidget"
          data: false
          label: "<damaging-false-label>"
  - class: "FieldLayout"
    label: "<notes-label>"
    align: right
    fieldWidget:
      name: "notes"
      class: "TextInputWidget"

i18n:
  en:
    form-title: Edit quality
    notes-label: "Notes"
    damaging-label: "Damaging?"
    damaging-true-label: "yes"
    damaging-false-label: "no"
    goodfaith-label: "Good-faith?"
    goodfaith-true-label: "yes"
    goodfaith-false-label: "no"</textarea>
    <script>
      var formBuilder = new wikiLabels.FormBuilder()
      formBuilder.configEditor.text($("#preload_and_delete_me").val());
      $("#preload_and_delete_me").remove()
      $('body').append(formBuilder.$element)
    </script>
  </body>
</html>
