<rd-header>
  <rd-header-title title-text="Create registry"></rd-header-title>
  <rd-header-content> <a ui-sref="portainer.registries">Registries</a> &gt; Add registry </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title">
            Registry provider
          </div>

          <div class="form-group"></div>

          <div class="form-group" style="margin-bottom: 0;">
            <div class="boxselector_wrapper">
              <div>
                <input type="radio" id="registry_quay" ng-model="model.Type" ng-value="RegistryTypes.QUAY" />
                <label for="registry_quay" ng-click="selectQuayRegistry()">
                  <div class="boxselector_header">
                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
                    Quay.io
                  </div>
                  <p>Quay container registry</p>
                </label>
              </div>
              <div>
                <input type="radio" id="registry_azure" ng-model="model.Type" ng-value="RegistryTypes.AZURE" />
                <label for="registry_azure" ng-click="selectAzureRegistry()">
                  <div class="boxselector_header">
                    <i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px;"></i>
                    Azure
                  </div>
                  <p>Azure container registry</p>
                </label>
              </div>
              <div>
                <input type="radio" id="registry_gitlab" ng-model="model.Type" ng-value="RegistryTypes.GITLAB" />
                <label for="registry_gitlab" ng-click="selectGitlabRegistry()">
                  <div class="boxselector_header">
                    <i class="fab fa-gitlab" aria-hidden="true" style="margin-right: 2px;"></i>
                    Gitlab
                  </div>
                  <p>Gitlab container registry</p>
                </label>
              </div>
              <div>
                <input type="radio" id="registry_custom" ng-model="model.Type" ng-value="RegistryTypes.CUSTOM" />
                <label for="registry_custom" ng-click="selectCustomRegistry()">
                  <div class="boxselector_header">
                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
                    Custom registry
                  </div>
                  <p>Define your own registry</p>
                </label>
              </div>
            </div>
          </div>

          <registry-form-quay
            ng-if="model.Type === RegistryTypes.QUAY"
            model="model"
            form-action="create"
            form-action-label="Add registry"
            action-in-progress="state.actionInProgress"
          ></registry-form-quay>

          <registry-form-azure
            ng-if="model.Type === RegistryTypes.AZURE"
            model="model"
            form-action="create"
            form-action-label="Add registry"
            action-in-progress="state.actionInProgress"
          ></registry-form-azure>

          <registry-form-custom
            ng-if="model.Type === RegistryTypes.CUSTOM"
            model="model"
            form-action="create"
            form-action-label="Add registry"
            action-in-progress="state.actionInProgress"
          ></registry-form-custom>

          <registry-form-gitlab
            ng-if="model.Type === RegistryTypes.GITLAB"
            model="model"
            retrieve-registries="retrieveGitlabRegistries"
            create-registries="createGitlabRegistries"
            projects="gitlabProjects"
            state="state"
            action-in-progress="state.actionInProgress"
            reset-defaults="useDefaultGitlabConfiguration"
          ></registry-form-gitlab>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
