<rd-header>
  <rd-header-title title-text="Registry details"></rd-header-title>
  <rd-header-content>
    <a ui-sref="portainer.registries">Registries</a> &gt; <a ui-sref="portainer.registries.registry({id: $ctrl.registry.Id})">{{ $ctrl.registry.Name }}</a>
  </rd-header-content>
</rd-header>

<div class="row" ng-if="!$ctrl.state.loading">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="registry_name" ng-model="$ctrl.formValues.Name" placeholder="e.g. my-registry" ng-change="$ctrl.onChangeName()" />
            </div>
          </div>
          <div class="form-group" ng-show="$ctrl.state.nameAlreadyExists">
            <div class="col-sm-12 small text-warning">
              <div>
                <p><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
              </div>
            </div>
          </div>
          <!-- !name-input -->
          <!-- registry-url-input -->
          <div class="form-group" ng-if="registry.Type !== RegistryTypes.DOCKERHUB && registry.Type !== RegistryTypes.QUAY && registry.Type !== RegistryTypes.GITLAB">
            <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
              Registry URL
              <portainer-tooltip message="'URL or IP address of a Docker registry. Any protocol or trailing slash will be stripped if present.'"> </portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="registry_url" ng-model="$ctrl.registry.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld" />
            </div>
          </div>
          <!-- !registry-url-input -->

          <!-- authentication-checkbox -->
          <div
            class="form-group"
            ng-if="
              $ctrl.registry.Type !== $ctrl.RegistryTypes.DOCKERHUB &&
              $ctrl.registry.Type !== $ctrl.RegistryTypes.QUAY &&
              $ctrl.registry.Type !== $ctrl.RegistryTypes.PROGET &&
              $ctrl.registry.Type !== $ctrl.RegistryTypes.AZURE
            "
          >
            <div class="col-sm-12">
              <label for="registry_auth" class="control-label text-left">
                Authentication
                <portainer-tooltip message="'Enable this option if you need to specify credentials to connect to this registry.'"> </portainer-tooltip>
              </label>
              <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.registry.Authentication" /><i></i> </label>
            </div>
          </div>
          <!-- !authentication-checkbox -->

          <!-- authentication-credentials -->
          <div ng-if="$ctrl.registry.Authentication">
            <!-- credentials-user -->
            <div class="form-group">
              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left">
                {{ $ctrl.registry.Type === $ctrl.RegistryTypes.ECR ? 'AWS Access Key' : 'Username' }}
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="credentials_username" ng-model="$ctrl.registry.Username" />
              </div>
            </div>
            <!-- !credentials-user -->
            <!-- credentials-password -->
            <div class="form-group">
              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">
                {{ $ctrl.passwordLabel() }}
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="password" class="form-control" id="credentials_password" ng-model="$ctrl.formValues.Password" placeholder="*******" />
              </div>
            </div>
            <!-- !credentials-password -->
          </div>
          <!-- !authentication-credentials -->

          <div ng-if="$ctrl.registry.Type == $ctrl.RegistryTypes.QUAY">
            <!-- organisation-checkbox -->
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left"> Use organisation registry </label>
                <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.registry.Quay.UseOrganisation" /><i></i> </label>
              </div>
            </div>
            <!-- !organisation-checkbox -->
            <div ng-if="$ctrl.registry.Quay.UseOrganisation">
              <!-- organisation_name -->
              <div class="form-group">
                <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left">Organisation name</label>
                <div class="col-sm-9 col-lg-10">
                  <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.registry.Quay.OrganisationName" required />
                </div>
              </div>
              <!-- !organisation_name -->
            </div>
          </div>

          <div ng-if="$ctrl.registry.Type == $ctrl.RegistryTypes.ECR">
            <!-- region -->
            <div class="form-group">
              <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left">Region</label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="$ctrl.registry.Ecr.Region" required />
              </div>
            </div>
            <div class="form-group" ng-show="registryFormEcr.registry_region.$invalid">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="registryFormEcr.registry_region.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                </div>
              </div>
            </div>
            <!-- !region -->
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="$ctrl.isUpdateButtonDisabled()"
                ng-click="$ctrl.updateRegistry()"
                button-spinner="$ctrl.state.actionInProgress"
              >
                <span ng-hide="$ctrl.state.actionInProgress">Update registry</span>
                <span ng-show="$ctrl.state.actionInProgress">Updating registry...</span>
              </button>
              <a type="button" class="btn btn-default btn-sm" ui-sref="portainer.registries">Cancel</a>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
