<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 gutter-top">
            <div class="row">
              <div class="col-md-12">
                <div class="about">
                  <div class="row">
                    <div class="col-md-2 about-icon gutter-top hidden-sm hidden-xs">
                      <img src="images/openshift-logo.svg" />
                    </div>
                    <div class="col-md-9">
                      <h1>OpenShift by Red Hat&reg;</h1>
                      <h2>About</h2>
                      <p><a href="https://openshift.com">OpenShift</a> is Red Hat's Platform-as-a-Service (PaaS) that allows developers to quickly develop, host, and scale applications in a cloud environment.</p>

                      <h2 id="version">Version</h2>
                      <dl class="dl-horizontal left">
                        <dt>OpenShift Master:</dt>
                        <dd>{{version.master.openshift || 'unknown'}}</dd>
                        <dt>Kubernetes Master:</dt>
                        <dd>{{version.master.kubernetes || 'unknown'}}</dd>
                      </dl>

                      <h2 id="cli">Command Line Tools</h2>
                      <p>
                        With the OpenShift command line interface (CLI), you can create applications and manage OpenShift projects from a terminal.
                        <span ng-if="cliDownloadURLPresent">
                          You can download the <code>oc</code> client tool using the links below. For more information about downloading and installing it, please refer to the <a href="{{'get_started_cli' | helpLink}}">Get Started with the CLI</a> documentation.
                        </span>
                        <span ng-if="!cliDownloadURLPresent">
                          Refer to the <a href="{{'get_started_cli' | helpLink}}">Get Started with the CLI</a> documentation for instructions about downloading and installing the <code>oc</code> client tool.
                        </span>
                        <div ng-if="cliDownloadURLPresent">
                          <label class="cli-download-label">Download <code>oc</code>:</label>
                          <div ng-repeat="(key, value) in cliDownloadURL">
                            <a href="{{value}}" class="cli-download-link">
                              {{key}}
                              <i class="fa fa-external-link"></i>
                            </a>
                          </div>
                        </div>
                      </p>
                      <p>
                        After downloading and installing it, you can start by logging in using<span ng-if="sessionToken"> this current session token</span>:
                        <div class="code prettyprint ng-binding" ng-if="sessionToken">
                          oc login {{loginBaseURL}} --token=<span ng-show="showSessionToken">{{sessionToken}}</span><a href="#" ng-click="showSessionToken = !showSessionToken" ng-show="!showSessionToken">...click to show token...</a>
                        </div>
                        <pre class="code prettyprint ng-binding" ng-if="!sessionToken">
        oc login {{loginBaseURL}}
        </pre>
                      </p>
                      <p>For other information about the command line tools, check the <a target="_blank" href="{{'cli' | helpLink}}">CLI Reference</a> and <a target="_blank" href="{{'basic_cli_operations' | helpLink}}">Basic CLI Operations</a>.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
