@import helper.CSRF
@(form: Form[_], 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.BaseImageController.createBaseImage()) {
    @CSRF.formField
    @b3.text(form("id"), Symbol("_label") -> "ID", Symbol("placeholder") -> "my-lovely-image" )
    @b3.text( form("amiId"), Symbol("_label") -> "AMI ID", Symbol("placeholder") -> "ami-a1b2c3d4" )
    @b3.select( form("linuxDist"), models.LinuxDist.all.toList.map{ case (k,v) => k -> v.name }, Symbol("_label") -> "Linux Distribution" )
    @b3.textarea( form("description"), Symbol("_label") -> "Description" )
    @b3.date(form("eolDate"), Symbol("_label")-> "End of Life Date", Symbol("_help") -> Html("""Find Ubuntu support info <a href="https://wiki.ubuntu.com/Releases" target="_blank">here</a>"""))
    @b3.checkbox(form("requiresXLargeBuilder"), Symbol("_label") -> "Requires XLarge builder instance", Symbol("_help") -> "XLarge instances are 8x more expensive than normal AMIgo builders. Avoid where possible.")
    <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 }
  }

}