<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 class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded">
            <div class="col-md-12">
              <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
              <alerts alerts="alerts"></alerts>
              <div class="row">
                <div class="create-route-icon col-md-2 gutter-top hidden-sm hidden-xs">
                  <span class="pficon pficon-route icon-xl"></span>
                </div>
                <div class="col-md-8">
                  <h1>Create Route</h1>
                  <div>
                    <span class="help-block">
                      Routing is a way to make your application publicly visible.
                      <span ng-if="serviceName">Create a route to expose service {{serviceName}}.</span>
                      <span ng-if="!serviceName">Select a service to expose and enter route details.</span>
                    </span>
                  </div>
                  <div ng-show="!serviceName && !services">Loading...</div>
                  <div ng-show="serviceName || services">
                    <form name="createRouteForm">
                      <fieldset ng-disabled="disableInputs">
                        <div ng-if="!serviceName" class="form-group">
                          <label for="service-select" class="required">Service</label>
                          <select
                              id="service-select"
                              ng-model="routing.service"
                              ng-options="service as service.metadata.name for service in services track by (service | uid)"
                              required
                              class="form-control"
                              aria-describedby="service-help">
                          </select>
                          <div>
                            <span id="service-help" class="help-block">Service to route to.</span>
                          </div>
                          <div ng-if="!services.length" class="has-error">
                            <span class="help-block">There are no services in your project to expose with a route.</span>
                          </div>
                        </div>

                        <osc-routing model="routing" show-name-input="true"></osc-routing>
                        <div class="button-group gutter-top gutter-bottom">
                          <button type="submit"
                              class="btn btn-primary btn-lg"
                              ng-click="createRoute()"
                              ng-disabled="createRouteForm.$invalid || disableInputs || !createRoute"
                              value="">Create</button>
                          <a class="btn btn-default btn-lg" href="#" back>Cancel</a>
                        </div>
                      </fieldset>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
