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

@main_fr("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">
        Nouvel 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="fr" checked>
                Français
              </label>
              <label class="radio">
                <input type="radio" name="iat-lang" value="en">
                Anglais
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="box has-background-grey-lighter">
        <div class="field">
          <label class="label">Nom</label>
          <input id="iat-name" class="input" type="text" placeholder="Nom de l'IAT" />
        </div>
        <div class="field">
          <label class="label">Description</label>
          <textarea id="iat-des" class="textarea" placeholder="Description...">
            </textarea>
        </div>
        <div class="field">
          <label class="label">Message invitant le participant à saisir ou générer un identifiant (modifiez si
            nécessaire)</label>
          <textarea id="iat-identmsg" class="textarea" placeholder="Renseignez un identifiant ou générez en un"> Renseignez un identifiant ou générez en un
            </textarea>
        </div>

        <div class="field">
          <label class="label">Message de consentement que le participant devra valider (modifiez si nécessaire)</label>
          <textarea id="iat-consentmsg" class="textarea" placeholder="Vous vous engagez librement et
                de façon anonyme à répondre à ce test"> Vous vous engagez librement et de façon anonyme à répondre à ce test.
            </textarea>
        </div>
        <div class="field">
          <label class="label">Questionnaire Complémentaire</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">
                Ajouter des 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>
        IAT non valide!<br>
        Les identifiants des concepts et attributs doivent être différents.
        Les listes doivent comporter au moins 4 items.<br>
        Les concepts, comme les attributs,
        doivent avoir le même nombre d'items.<br>
      </div>
      <div hidden id="success-msg" class="notification is-success fade-in">
        <button id="delete-cross" class="delete"></button>
        IAT Créé !
      </div>
      <div>
        <button id="create-iat" class="button is-success is-fullwidth">
          Créer
        </button>
      </div>
    </div>
    <div hidden id="list-button">
      <a href="@context_path/iat/list?lang=fr" class="button is-primary is-fullwidth">
        Vos IAT
      </a>
    </div>
    </section>

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

}