<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <div class="row">
              <div class="col-md-12">
                <div class="create-from-image">
                  <div class="row">
                    <div class="col-md-2 template-name gutter-top hidden-sm hidden-xs">
                      <span class="fa fa-cubes"></span>
                    </div>
                    <div class="col-md-8">
                      <fieldset ng-disabled="disableInputs">
                        <osc-image-summary resource="image" name="imageName"></osc-image-summary>
                        <div class="clearfix visible-xs-block"></div>
                        <form class="" ng-show="imageStream" novalidate name="form" ng-submit="createApp()">
                          <div style="margin-bottom: 15px;">
                            <div class="form-group">
                             <label for="appname" class="required">Name</label>
                             <!--
                               Only validate the name pattern and minlength if the field has both been changed and blurred.  This
                               avoids a lot of problems clicking on the try it / more options links below.  Don't use $touched,
                               which causes validation error messages to flash when typing in the field after clicking one of the
                               links. Show the required error if the user enters and deletes the value, even if the field still
                               has focus.
                             -->
                             <div ng-class="{'has-error': (form.appname.$error.required && form.appname.$dirty) || (form.appname.$invalid && shouldValidateName) || nameTaken}">
                               <input type="text"
                                      required
                                      take-focus
                                      minlength="2"
                                      maxlength="24"
                                      pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                                      ng-model="name"
                                      id="appname"
                                      name="appname"
                                      ng-change="nameTaken = false"
                                      ng-blur="shouldValidateName = form.appname.$dirty"
                                      class="form-control"
                                      autocorrect="off"
                                      autocapitalize="off"
                                      spellcheck="false">
                              </div>
                              <div class="help-block">Identifies the resources created for this application.</div>
                              <div class="has-error" ng-show="form.appname.$error.required && form.appname.$dirty">
                                <span class="help-block">A name is required.</span>
                              </div>
                              <div class="has-error" ng-show="form.appname.$error.pattern && shouldValidateName">
                                <span class="help-block"><strong>Please enter a valid name.</strong>
                                <p>A valid name is applied to all generated resources. It is an alphanumeric (a-z, and 0-9) string with a maximum length of 24 characters, where the first character is a letter (a-z), and the '-' character is allowed anywhere except the first or last character.</p>
                                </span>
                              </div>
                              <div class="has-error" ng-show="form.appname.$error.minlength && shouldValidateName">
                                <span class="help-block">The name must have at least 2 characters.</span>
                              </div>
                              <div class="has-error" ng-show="nameTaken">
                                <span class="help-block">This name is already in use within the project. Please choose a different name.</span>
                              </div>
                            </div>
                          </div>

                          <div class="form-group">
                            <label for="sourceUrl" class="required">Git Repository URL</label>
                            <div ng-class="{'has-warning': form.sourceUrl.$dirty && !sourceURLPattern.test(buildConfig.sourceUrl), 'has-error': (form.sourceUrl.$error.required && form.sourceUrl.$dirty)}">
                              <!-- Unfortunately, we can't set type="url" because some valid values don't pass browser validation. -->
                              <input class="form-control"
                                id="sourceUrl"
                                name="sourceUrl"
                                type="text"
                                required
                                aria-describedby="from_source_help"
                                ng-model="buildConfig.sourceUrl"
                                autocorrect="off"
                                autocapitalize="off"
                                spellcheck="false">
                            </div>
                            <div ng-if="image.metadata.annotations.sampleRepo" class="help-block">
                              Sample repository for {{imageName}}: {{image.metadata.annotations.sampleRepo}}<span ng-if="image.metadata.annotations.sampleRef">,
                                ref: {{image.metadata.annotations.sampleRef}}</span><span ng-if="image.metadata.annotations.sampleContextDir">,
                                context dir: {{image.metadata.annotations.sampleContextDir}}</span>
                              <a href="" ng-click="fillSampleRepo()"
                                style="margin-left: 3px;" class="nowrap">Try it<i class="fa fa-level-up" style="margin-left: 3px; font-size: 17px;"></i></a>
                            </div>
                            <div class="has-error" ng-show="form.sourceUrl.$error.required && form.sourceUrl.$dirty">
                              <span class="help-block">A Git repository URL is required.</span>
                            </div>
                            <div>
                              <span class="text-warning" ng-if="form.sourceUrl.$dirty && !sourceURLPattern.test(buildConfig.sourceUrl)">Git repository should be a URL.</span>
                            </div>
                          </div>

                          <div click-to-reveal link-text="Show advanced routing, build, and deployment options">
                            <div class="form-group">
                              <label for="gitref">Git Reference</label>
                              <div>
                                <input
                                  id="gitref"
                                  ng-model="buildConfig.gitRef"
                                  type="text"
                                  placeholder="master"
                                  autocorrect="off"
                                  autocapitalize="off"
                                  spellcheck="false"
                                  class="form-control">
                              </div>
                              <div class="help-block">Optional branch, tag, or commit.</div>
                            </div>
                            <div class="form-group">
                              <label for="contextdir">Context Dir</label>
                              <div>
                                <input
                                  id="contextdir"
                                  ng-model="buildConfig.contextDir"
                                  type="text"
                                  placeholder="/"
                                  autocorrect="off"
                                  autocapitalize="off"
                                  spellcheck="false"
                                  class="form-control">
                              </div>
                              <div class="help-block">Optional subdirectory for the application source code, used as the context directory for the build.</div> </div>

                            <!-- Only show routing options if the image has exposed ports. -->
                            <osc-form-section
                              header="Routing"
                              about-title="Routing"
                              about="Routing is a way to make your application publicly visible. Otherwise you may only be able to access your application by its IP address, if allowed by the system administrator."
                              expand="true"
                              can-toggle="false"
                              ng-if="routing.portOptions.length"
                              >
                              <div class="form-group checkbox">
                                <label>
                                  <input type="checkbox" ng-model="routing.include">
                                  Create a route to the application
                                </label>
                              </div>
                              <osc-routing
                                model="routing"
                                routing-disabled="!routing.include">
                              </osc-routing>
                            </osc-form-section>

                            <!-- /routing -->

                            <osc-form-section
                              header="Build Configuration"
                              about-title="Build Configuration"
                              about="A build configuration describes how to build your deployable image.  This includes
                                your source, the base builder image, and when to launch new builds."
                              expand="true"
                              can-toggle="false"
                              >
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox" ng-model="buildConfig.buildOnSourceChange"/>
                                  Configure a webhook build trigger
                                  <span class="help action-inline">
                                    <a href data-toggle="tooltip"
                                       data-original-title="The source repository must be configured to use the webhook to trigger a build when source is committed.">
                                      <i class="pficon pficon-help"></i>
                                    </a>
                                  </span>
                                </label>
                              </div>
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox" ng-model="buildConfig.buildOnImageChange"/>
                                  Automatically build a new image when the builder image changes
                                  <span class="help action-inline">
                                    <a href data-toggle="tooltip" data-original-title="Automatically building a new image when the builder image changes allows your code to always run on the latest updates.">
                                    <i class="pficon pficon-help"></i>
                                    </a>
                                  </span>
                                </label>
                              </div>
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox" ng-model="buildConfig.buildOnConfigChange"/>
                                  Automatically build a new image when the build configuration changes
                                </label>
                              </div>
                              <h3>Environment Variables (Build and Runtime) <span class="help action-inline">
                                <a href data-toggle="tooltip"
                                   data-original-title="Environment variables are used to configure and pass information to running containers.  These environment variables will be available during your build and at runtime.">
                                  <i class="pficon pficon-help"></i>
                                </a>
                              </span></h3>
                              <osc-key-values
                                entries="buildConfig.envVars"
                                delimiter="="
                                key-validator="env"
                                delete-policy="added"
                                key-validation-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></osc-key-values>
                            </osc-form-section>

                            <!-- /build config -->

                            <osc-form-section
                              header="Deployment Configuration"
                              about-title="Deployment Configuration"
                              about="Deployment configurations describe how your application is configured
                                by the cluster and under what conditions it should be recreated (e.g. when the image changes)."
                              expand="true"
                              can-toggle="false"
                              >
                              <div class="animate-drawer" ng-show="$parent.expand">
                                <h3>Autodeploy when</h3>
                                <div class="checkbox">
                                  <label>
                                    <input type="checkbox" ng-model="deploymentConfig.deployOnNewImage">
                                    New image is available
                                  </label>
                                </div>
                                <div class="checkbox">
                                <label>
                                  <input type="checkbox" ng-model="deploymentConfig.deployOnConfigChange">
                                  Deployment configuration changes
                                </label>
                                </div>
                                <div>
                                  <h3>Environment Variables (Runtime only) <span class="help action-inline">
                                    <a href data-toggle="tooltip"
                                       data-original-title="Environment variables are used to configure and pass information to running containers.  These environment variables will only be available at runtime.">
                                      <i class="pficon pficon-help"></i>
                                    </a>
                                  </span></h3>
                                  <osc-key-values
                                    entries="deploymentConfig.envVars"
                                    delimiter="="
                                    key-validator="env"
                                    delete-policy="added"
                                    key-validation-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></osc-key-values>
                                </div>
                              </div>
                            </osc-form-section>

                            <!-- /deployment config -->

                            <osc-form-section
                              header="Scaling"
                              about-title="Scaling"
                              about="Scaling defines the number of running instances of your built image."
                              expand="true"
                              can-toggle="false"
                              >
                              <div ng-hide="$parent.expand">
                                <div>
                                  <label>Replicas: </label>
                                  <span>{{scaling.replicas}}</span>
                                </div>
                              </div>
                              <div ng-show="$parent.expand">
                                <label class="number">
                                  Replicas:
                                  <input type="number" class="input-number" min="0" name="replicas" ng-model="scaling.replicas" required ng-pattern="/^\-?\d+$/">
                                </label>
                                <div class="has-error" ng-show="form.replicas.$invalid">
                                  <span class="help-block">Replicas must be an integer value greater than or equal to 0</span>
                                </div>
                              </div>
                            </osc-form-section>

                            <!-- /scaling -->

                            <osc-form-section
                              header="Resource Limits"
                              about-title="Resource Limits"
                              about="Resource limits control compute resource usage by a container on a node."
                              expand="true"
                              can-toggle="false"
                              >
                              <edit-request-limit
                                  resources="container.resources"
                                  type="cpu"
                                  limit-ranges="limitRanges"
                                  project="project">
                              </edit-request-limit>
                              <edit-request-limit
                                  resources="container.resources"
                                  type="memory"
                                  limit-ranges="limitRanges"
                                  project="project">
                              </edit-request-limit>
                              <div ng-repeat="problem in cpuProblems" class="has-error">
                                <span class="help-block">{{problem}}</span>
                              </div>
                              <div ng-repeat="problem in memoryProblems" class="has-error">
                                <span class="help-block">{{problem}}</span>
                              </div>
                            </osc-form-section>

                            <!-- /limits -->

                            <label-editor labels="labels" expand="true" can-toggle="false"></label-editor>
                          </div>
                          <div class="buttons gutter-top-bottom gutter-top-bottom-2x">
                            <!-- unable to use form.valid.  need to fix validators in labels and key values directive -->
                            <button type="submit"
                                class="btn btn-primary btn-lg"
                                ng-disabled="form.$invalid || nameTaken || cpuProblems.length || memoryProblems.length || disableInputs"
                                >Create</button>
                            <a class="btn btn-default btn-lg" href="{{projectName | projectOverviewURL}}">Cancel</a>
                          </div>
                        </form>
                        <div ng-hide="imageStream">
                          {{ emptyMessage }}
                        </div>
                      </fieldset>
                    </div>
                  </div><!-- /row -->
                </div><!-- /create-from-image -->
              </div><!-- /col-* -->
            </div><!-- /row -->
          </div><!-- /container -->
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
