@import views.html.helper.CSRF
@(image: BaseImage, 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.updateBaseImage(image.id)) {
    @CSRF.formField
    @b3.static("ID"){@image.id.value}
    @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">
            @if(image.builtinRoles.exists(_.roleId == role)) {
              <div>
                <label for="role-@role">
                  <input class="show-role-variables" type="checkbox" id="role-@role" name="roles" data-role="@role" value="@role" checked> @role
                </label>
              </div>
              <div>
                <input type="text" class="form-control" id="role-@role-variables" name="role-@role-variables"
                       value="@image.builtinRoles.find(_.roleId == role).map(_.variablesToFormInputText)"
                       placeholder="Custom variables (optional) e.g. foo: bar, baz: wow">
              </div>
            } else {
              <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 }
  }

}