<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div class="clearfix">
  <ol class="breadcrumb pull-left">
    <li><a href="#/stackVersions">{{'common.versions' | translate}}</a></li>
    <li class="active" ng-if="editController">{{displayName}}&nbsp;<span class="sub-text">({{repoVersionFullName}})</span></li>
    <li class="active" ng-if="createController">{{'versions.register' | translate}}</li>
  </ol>

  <div class="pull-right top-margin-4">
    <a href="#/stackVersions/create" class="btn btn-primary">
      <span class="glyphicon glyphicon-plus"></span>
        {{'versions.register' | translate}}
    </a>
  </div>
</div>
<hr>

<div id="upload-definition-file-panel" ng-if="createController">
  <div class="introduction-info hide-soft" ng-class="{'visible': allInfoCategoriesBlank()}" role="alert">{{'versions.introduction' | translate}}</div>
  <div class="clearfix register-version-options">
    <div class="col-sm-5 option-radio-button">
      <label class="option-label">
        <input type="radio" ng-model="selectedOption.index" value="1" ng-change="toggleOptionSelect()"> {{'versions.uploadFile' | translate}}
      </label>
    </div>
    <div class="col-sm-7">
      <input type="file" class="choose-file-input" ng-model="option1.file" onchange="angular.element(this).scope().onFileSelect(this)"/>
    </div>
  </div>
  <div class="clearfix register-version-options bottom-margin">
    <div class="col-sm-5 option-radio-button">
      <label class="option-label">
        <input type="radio" ng-model="selectedOption.index" value="2" ng-change="toggleOptionSelect()"> {{'versions.enterURL' | translate}}
      </label>
    </div>
    <div class="col-sm-7">
      <div class="form-group {{option2.name}}" ng-class="{'has-error': option2.url.hasError }">
        <div class=""><input type="text" class="form-control" ng-model="option2.url" ng-change="clearOptionsError()" ng-disabled="!(selectedOption.index==2)"></div>
      </div>
    </div>
    <div class="col-sm-12 read-info-button">
      <button class="btn btn-primary pull-right" ng-model="button" ng-click="readVersionInfo()"
            ng-disabled="readInfoButtonDisabled()">{{'versions.readInfo' | translate}}</button>
    </div>
  </div>
</div>

<accordion close-others="false" class="col-sm-2 left-menu-all-repos" ng-if="editController">
  <accordion-group ng-repeat="stackVersion in stackVersions" is-open="stackVersion.isOpened">
    <accordion-heading>
      <div class="row stack-version-title">
        <i class="glyphicon glyphicon-chevron-right" ng-class="{'opened': stackVersion.isOpened}"></i>
          {{stackVersion.name}}
      </div>
    </accordion-heading>
    <table class="table repos-table">
      <tbody>
      <tr ng-repeat="repo in stackVersion.repos">
        <td class="repos-td" ng-class="{'active': repo.isActive}">
            <a href="#/stackVersions/{{repo.stack_name}}/{{repo.repository_version}}/edit">{{repo.repository_version}}</a>
        </td>
      </tr>
      </tbody>
    </table>
  </accordion-group>
  <div class="alert alert-info" ng-show="stackVersions && !stackVersions.length">
    {{'versions.contents.empty' | translate}}
  </div>
</accordion>

<form ng-class="{'col-sm-10': editController, 'visible': !allInfoCategoriesBlank()}" class="form-horizontal register-version-form hide-soft" role="form" name="repoRegForm" novalidate>
  <div class="panel panel-default details-panel">
    <div class="panel-heading">
      <h3 class="panel-title">{{'common.details' | translate}}</h3>
        <div class="pull-right deregister-button" ng-switch="deleteEnabled"  ng-if="editController">
            <button ng-switch-when="false" class="btn disabled btn-default" tooltip="Cannot delete version already installed.">{{'versions.deregister' | translate}}</button>
            <button ng-switch-when="true" class="btn btn-danger" ng-click="delete()">{{'versions.deregister' | translate}}</button>
        </div>
    </div>
    <div class="panel-body">
      <div class="clearfix">
        <label class="control-label col-sm-3">{{'versions.details.stackName' | translate}}</label>
        <div class="version-info col-sm-7">{{stackNameVersion}}</div>
        <div class="col-sm-2 patch-icon" ng-if="isPatch"><span class="glyphicon glyphicon-tree-deciduous"></span>{{'versions.patch' | translate}}</div>
      </div>
      <div class="clearfix">
        <label class="control-label col-sm-3">{{'versions.details.displayName' | translate}}</label>
        <div class="version-info col-sm-9">{{displayName}}</div>
      </div>
      <div class="clearfix">
        <label class="control-label col-sm-3">{{'versions.details.version' | translate}}</label>
        <div class="version-info col-sm-9">{{version}}</div>
      </div>
      <div class="clearfix">
        <label class="control-label col-sm-3">{{'versions.details.actualVersion' | translate}}</label>
        <div class="version-info col-sm-9">{{actualVersion}}</div>
      </div>
    </div>
  </div>
  <div class="panel panel-default contents-panel">
    <div class="panel-heading">
      <h3 class="panel-title">{{'versions.contents.title' | translate}}</h3>
    </div>
    <div class="panel-body version-contents-body">
      <div class="alert alert-info hide-soft" ng-class="{'visible' : !services || !services.length}" role="alert">{{'versions.contents.empty' | translate}}</div>
      <div class="clearfix" ng-repeat="service in services">
        <label class="control-label col-sm-3">{{service.name}}</label>
        <div class="version-info col-sm-9">{{service.version}}</div>
      </div>
    </div>
  </div>
  <div class="panel panel-default repos-panel">
    <div class="panel-heading">
      <h3 class="panel-title">
          {{'versions.repos' | translate}}
          <button ng-show="supports.addingNewRepository" class="btn btn-primary pull-right btn-xs pull-up" ng-click="addRepository()">
              <span class="glyphicon glyphicon-plus"></span>
              {{'common.add' | translate:'{ term: "Repository" }'}}
          </button>
      </h3>
    </div>
    <div class="panel-body">
      <div class="alert alert-info" role="alert">{{'versions.alerts.baseURLs' | translate}}</div>
      <div class="alert alert-warning hide-soft" ng-class="{'visible' : hasValidationErrors()}" role="alert">{{'versions.alerts.validationFailed' | translate}}</div>
      <div class="border-bottom bottom-margin clearfix">
        <div class="col-sm-2"><h5><label>{{'versions.os' | translate}}</label></h5></div>
        <div class="name-label-adjust col-sm-2"><h5><label>{{'common.name' | translate}}</label></h5></div>
        <div class="col-sm-7"><h5><label >{{'versions.baseURL' | translate}}</label></h5></div>
      </div>
      <div class="alert alert-info hide-soft" ng-class="{'visible' : !osList || !osList.length}" role="alert">{{'versions.contents.empty' | translate}}</div>
      <div class="" ng-repeat="os in osList">
        <div ng-if="os.selected==true">
          <div class="clearfix border-bottom bottom-margin">
            <!-- show selected os in list table-->
            <div class="col-sm-2 os-type-label">
              <label>{{os.OperatingSystems.os_type}}</label>
            </div>
            <div class="col-sm-9">
              <div class="form-group {{repository.Repositories.repo_name}}" ng-class="{'has-error': repository.hasError }" ng-repeat="repository in os.repositories">
                <label class="repo-name-label control-label col-sm-3">{{repository.Repositories.repo_name}}</label>
                <div class="col-sm-9"><input type="text" class="form-control" ng-model="repository.Repositories.base_url"
                                         ng-change="clearError()" ng-disabled="!os.selected"></div>
              </div>
            </div>
            <div class="col-sm-1 remove-icon" ng-click="removeOS()"><span class="glyphicon glyphicon-minus"></span>{{'common.controls.remove' | translate}}</div>
          </div>
        </div>
      </div>
        <div class="btn-group pull-right" dropdown>
          <button class="btn dropdown-toggle">
            <span class="glyphicon glyphicon-plus"></span> {{'common.add' | translate: '{term: constants.os}'}} &nbsp;<span class="caret"></span></button>
          <ul class="dropdown-menu" ng-class="{'hidden': hasNotDeletedRepo()}">
            <li ng-repeat="os in osList"><a ng-if="os.selected==false" ng-click="addOS()">{{os.OperatingSystems.os_type}}</a></li>
          </ul>
        </div>
      <div class="clearfix">
        <div class="col-sm-12" id="skip-validation">
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="skipValidation" ng-change="clearErrors()">
              {{'versions.skipValidation' | translate}} <span class="glyphicon glyphicon-question-sign" tooltip-html-unsafe="{{'versions.alerts.skipValidationWarning' | translate}}"></span>
            </label>
          </div>
        </div>
        <div class="col-sm-12" id="use-redhat">
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="useRedhatSatellite" ng-change="clearErrors()">
              {{'versions.useRedhatSatellite' | translate}} <span class="glyphicon glyphicon-question-sign" tooltip-html-unsafe="{{'versions.alerts.useRedhatSatelliteWarning' | translate}}"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <button class="btn btn-primary pull-right left-margin" ng-click="save()"
            ng-disabled="isSaveButtonDisabled()">{{'common.controls.save' | translate}}</button>
    <button class="btn btn-default pull-right" ng-click="cancel()">{{'common.controls.cancel' | translate}}</button>
  </div>
</form>
