@import helper.CSRF
@(form: Form[_], availableBaseImages: Seq[BaseImage], availableRoles: Seq[RoleId])(implicit request: RequestHeader, messages: play.api.i18n.Messages)

@implicitFieldConstructor = @{ b3.horizontal.fieldConstructor("col-md-2", "col-md-10") }

@simpleLayout("AMIgo"){

  @b3.form(routes.RecipeController.createRecipe()) {
    @CSRF.formField
    @b3.text( form("id"), Symbol("_label") -> "ID", Symbol("placeholder") -> "my-lovely-recipe" )

    @b3.textarea( form("description"), Symbol("_label") -> "Description" )

    @b3.text( form("diskSize"), Symbol("_label") -> "Disk Size" )
    <div class="col-md-offset-2">
      <span class="help-block">Setting a disk size will add a GP2 block device to your AMI.</span>
    </div>

    @b3.text( form("bakeSchedule"), Symbol("_label") -> "Bake schedule", Symbol("placeholder") -> "e.g. \"0 0 3 * * ?\" to run every night at 3am" )
    <div class="col-md-offset-2">
      <span class="help-block">This should be a weird Quartz cron expression (<a target="_blank" href="http://www.quartz-scheduler.org/documentation/quartz-2.2.x/tutorials/crontrigger.html">docs</a>)</span>
    </div>

    @b3.text( form("encryptFor"), Symbol("_label") -> "Request encrypted copy", Symbol("placeholder") -> "e.g. 123456789012, 210987654321" )
    <div class="col-md-offset-2">
      <span class="help-block">This is an optional comma separated list of <a target="_blank" href="https://docs.aws.amazon.com/general/latest/gr/acct-identifiers.html">AWS account identifiers</a> that the AMI produced will be available in.</span>
    </div>

    @b3.select( form("baseImageId"), availableBaseImages.map(_.id.value).zip(availableBaseImages.map(_.id.value)), Symbol("_label") -> "Base image" )

    <div class="form-group">
      <label class="control-label col-md-2" for="builtin-roles">Builtin roles</label>
      <div class="col-md-10" id="builtin-roles">
        @for(role <- availableRoles) {
          <div class="checkbox">
            <div>
              <label for="role-@role">
                <input class="show-role-variables" type="checkbox" id="role-@role" name="roles" data-role="@role" value="@role"> @role
              </label>
            </div>
            <div>
              <input type="text" class="form-control hidden" id="role-@role-variables" name="role-@role-variables" placeholder="Custom variables (optional) e.g. foo: bar, baz: wow">
            </div>
          </div>
        }
      </div>
    </div>

    @b3.submit(Symbol("class") -> "btn btn-primary"){ Save }
  }

}