<html>
  <head>
    <title>Form Builder</title>
    <script type="text/javascript" src="/gadget/mediawikiwiki/mediawiki.js"></script>
    {{ script_tags|safe }}
    {% assets "js_all" %}
        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}
        <script type="text/javascript" src="/gadget/WikiLabels.messages.js"></script>
    {{ style_tags|safe }}
    {% assets "css_all" %}
        <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
    {% endassets %}
    <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://meta.wikimedia.org/wiki/Wiki_labels">Wiki labels</a>
      form configurations editing the textbox below.  Click "preview" to
      review the changes and
      <a href="https://en.wikipedia.org/wiki/Wiki_labels#Request_a_form">request a form</a>
      when you are ready.
    </div>
    <textarea id="preload_and_delete_me">
name: damaging
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: top
    fieldWidget:
      name: "notes"
      class: "TextInputWidget"
      multiline: true
</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>
