<div class="content">
  <div class="container">
    <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
    <div class="row">
      <div class="col-md-12">
        <alerts alerts="alerts"></alerts>
        <div ng-show="!pvcs || !(attach.deploymentConfig || attach.deployment)">Loading...</div>

        <div ng-show="pvcs && !pvcs.length && (attach.deploymentConfig || attach.deployment)" class="empty-state-message empty-state-full-page">
          <h2 class="text-center">No persistent volume claims.</h2>

          <p class="gutter-top">
            A <b>persistent volume claim</b> is required to attach to this 
            <span ng-if="attach.deploymentConfig">deployment config,</span>
            <span ng-if="attach.deployment">deployment,</span>
            but none are loaded on this project.
          </p>

          <p>
            To claim storage from a persistent volume, refer to the documentation on <a ng-href="{{'persistent_volumes' | helpLink}}">using persistent volumes</a>.
          </p>

          <p ng-if="attach.deploymentConfig"><a href="{{attach.deploymentConfig | navigateResourceURL}}">Back to deployment config</a></p>
          <p ng-if="attach.deployment"><a href="{{attach.deployment | navigateResourceURL}}">Back to deployment</a></p>
        </div>

        <div class="row" ng-show="pvcs && pvcs.length && (attach.deploymentConfig || attach.deployment)">        
          <div class="create-storage-icon col-md-2 gutter-top hidden-sm hidden-xs">
            <span class="fa fa-hdd-o icon-xl"></span>
          </div>

          <div class="col-md-8">
            <h1>Attach Storage</h1>
            <div>
              <span class="help-block">
                Attach an existing persistent volume claim to the template of 
                <span ng-if="attach.deploymentConfig">deployment config <b>{{attach.deploymentConfig.metadata.name}}</b>.</span>
                <span ng-if="attach.deployment">deployment <b>{{attach.deployment.metadata.name}}</b>.</span>
              </span>
            </div>
            <form name="attachPVCForm">
              <fieldset ng-disabled="disableInputs">
                <div class="form-group">
                  <label for="persistentVolumeClaim" class="required">Persistent volume claim</label>
                  <div>
                    <span id="persistent-volume-claim-help" class="help-block">Select the persistent volume claim to attach to.</span>
                  </div>
                  <table style="margin-bottom:0;background-color:transparent;" class="table table-condensed table-borderless">
                    <tbody>
                      <tr ng-repeat="pvc in pvcs track by (pvc | uid)">
                        <td style="padding-left:0;">
                          <input 
                            type="radio"
                            name="persistentVolumeClaim"
                            ng-model="attach.persistentVolumeClaim"
                            ng-value="pvc"
                            aria-describedby="pvc-help">
                        </td>
                        <td><a ng-href="{{pvc | navigateResourceURL}}">{{pvc.metadata.name}}</a></td>
                        <td ng-if="pvc.spec.volumeName">{{pvc.status.capacity['storage'] | usageWithUnits: 'storage'}}</td>
                        <td ng-if="!pvc.spec.volumeName">{{pvc.spec.resources.requests['storage'] | usageWithUnits: 'storage'}}</td>
                        <td>({{pvc.spec.accessModes | accessModes | join}})</td>
                        <td>
                          {{pvc.status.phase}}
                          <span ng-if="pvc.spec.volumeName">
                            to volume <strong>{{pvc.spec.volumeName}}</strong>
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <h3>Volume</h3>
                <div>
                  <span class="help-block">
                    Specify details about how volumes are going to be mounted inside containers.
                  </span>
                </div>

                <div class="form-group">
                  <label for="route-name">Mount path</label>
                  <input
                      id="mount-path"
                      class="form-control"
                      type="text"
                      name="mountPath"
                      ng-model="attach.mountPath"
                      ng-pattern="/^\/.*$/"
                      placeholder="example: /data"
                      autocorrect="off"
                      autocapitalize="off"
                      spellcheck="false"
                      aria-describedby="mount-path-help">
                  <div>
                    <span id="mount-path-help" class="help-block">Mount path for the volume inside the container. If not specified, the volume will not be mounted automatically.</span>
                  </div>
                  <div class="has-error" ng-show="attachPVCForm.mountPath.$error.pattern && attachPVCForm.mountPath.$touched">
                    <span class="help-block">
                      Mount path must be a valid path to a directory starting with <code>/</code>.
                    </span>
                  </div>
                  <div class="has-error" ng-show="isVolumeMountPathUsed">
                    <span class="help-block">
                      Volume mount in that path already exists. Please choose another mount path.
                    </span>
                  </div>
                </div>

                <div class="form-group">
                  <label for="volume-name">Volume name</label>
                  <input
                      id="volume-path"
                      class="form-control"
                      type="text"
                      name="volumeName"
                      ng-model="attach.volumeName"
                      placeholder="(generated if empty)"
                      autocorrect="off"
                      autocapitalize="off"
                      spellcheck="false"
                      aria-describedby="volume-name-help">
                  <div>
                    <span id="volume-name-help" class="help-block">Unique name used to identify this volume. If not specified, a volume name is generated.</span>
                  </div>
                </div>
                <div class="has-error" ng-show="isVolumeNameUsed">
                  <span class="help-block">
                    Volume name already exists. Please choose another name.
                  </span>
                </div>

                <div ng-show="attach.containers.all">
                  The volume will be mounted into all containers. You can <a href=""
                    ng-click="attach.containers.all = false">select specific containers</a> instead.
                </div>

                <div ng-show="!attach.containers.all" class="form-group">
                  <h3>Containers</h3>
                  <div>
                    <span class="help-block">
                      Attach the volume to the following containers:
                    </span>
                  </div>
                  <div class="checkbox" ng-repeat="container in (attach.deployment.spec.template.spec.containers || attach.deploymentConfig.spec.template.spec.containers)">
                    <label>
                      <input type="checkbox" ng-model="attach.containers.individual[container.name]">
                      <b>{{container.name}}</b> from image <i>{{container.image}}</i>
                    </label>
                  </div>
                  <div class="has-error" ng-show="!containerToAttachProvided()">
                    <span class="help-block">
                      You must select at least one container.
                    </span>
                  </div>
                </div>

                <div class="button-group gutter-top gutter-bottom">
                  <button type="submit"
                      class="btn btn-primary btn-lg"
                      ng-click="attachPVC()"
                      ng-disabled="attachPVCForm.$invalid || disableInputs || !attachPVC || !containerToAttachProvided()">Attach</button>
                  <a class="btn btn-default btn-lg" role="button" href="#" back>Cancel</a>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
