@(context_path: String, id: String, status: String)

@main("IAT Manager - New", context_path, id, status) {

<div class="container">
  <div class="columns">
    <div class="column is-full box has-background-grey-light">
      <h1 class="title has-text-centered has-text-primary">
        Create an IAT
      </h1>
      <div class="columns">
        <div class="column is-one-quarter">
          <div class="box has-background-grey-lighter">
            <div class="control">
              <label class="radio">
                <input type="radio" name="iat-type" value="d" checked>
                IAT
              </label>
              <label class="radio">
                <input type="radio" name="iat-type" value="s">
                SCIAT
              </label>
            </div>
          </div>
        </div>
        <div class="column is-one-quarter">
          <div class="box has-background-grey-lighter">
            <div class="control">
              <label class="radio">
                <input type="radio" name="iat-lang" value="en" checked>
                English
              </label>
              <label class="radio">
                <input type="radio" name="iat-lang" value="fr">
                French
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="box has-background-grey-lighter">
        <div class="field">
          <label class="label">Name</label>
          <input id="iat-name" class="input" type="text" placeholder="Give it a name" />
        </div>
        <div class="field">
          <label class="label">Description</label>
          <textarea id="iat-des" class="textarea" type="text" placeholder="And a short description...">
            </textarea>
        </div>
        <div class="field">
          <label class="label">Message for asking participants to give or generate an Id (modify if required)</label>
          <textarea id="iat-identmsg" class="textarea" type="text" placeholder="Give an identifier"> Give an identifier
            </textarea>
        </div>

        <div class="field">
          <label class="label">Consent Message (modify if required)</label>
          <textarea id="iat-consentmsg" class="textarea" type="text"
            placeholder="You freely and anonymously consent to answer this test"> You freely and anonymously consent to answer this test.
            </textarea>
        </div>
        <div class="field">
          <label class="label">Additional Questionnaire</label>
          <input id="iat-qlink" class="input" type="text" placeholder="http://..." />
        </div>
      </div>

      <section id="form-section">
        <template id="form-template">
          <div class="box has-background-grey-lighter">
            <div class="field">
              <label class="label"></label>
              <div class="level">
                <input class="input" type="text" placeholder="" />
              </div>
              <div class="item-inputs field">
                <!-- items-fields -->
              </div>
            </div>
            <div class="control">
              <button class="button is-success is-small">
                Add items
              </button>
            </div>
          </div>
        </template>

        <template id="item-fields">
          <div class="level">
            @for(i <- (1 to 4)) { <div class="control">
              <input class="input" placeholder="item @i" />
          </div>
          }
    </div>
    </template>

    <div class="field">
      <div hidden id="error-msg" class="notification is-danger fade-in">
        <button id="delete-cross" class="delete"></button>
        Invalid IAT!<br>
        Concepts and attributes identifiers must be unique.
        Lists must have at least 4 items.<br>
        Concepts, like attributes,
        must have identical number of items.<br>
      </div>
      <div hidden id="success-msg" class="notification is-success fade-in">
        <button id="delete-cross" class="delete"></button>
        IAT Created !
      </div>
      <div>
        <button id="create-iat" class="button is-success is-fullwidth">
          Create
        </button>
      </div>
    </div>
    <div hidden id="list-button">
      <a href="@context_path/iat/list?lang=en" class="button is-primary is-fullwidth">
        Your IAT
      </a>
    </div>
    </section>

    <script type="module">
      import { checkType } from "@context_path/scripts/manager/iat_form.js";
      checkType();
    </script>
  </div>
</div>
</div>

}