<modal-dialog>
    <div class="modal-header">
        <h3 class="modal-title" translate ng-if="item">Adjust Persistent Volume '{{ item.metadata.name }}'</h3>
        <h3 class="modal-title" translate ng-if="!item">Register Persistent Volume</h3>
    </div>
    <div class="modal-body">
        <table class="form-table-ct">
            <tr>
                <td class="top">
                    <label class="control-label" translate>Type</label>
                </td>
                <td ng-if="!item" class="dialog-wrapper">
                    <div id="volume-type" class="btn-group bootstrap-select form-control" dropdown>
                        <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                            <span class="pull-left">{{ selected.name }}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="type in types" ng-class="{ checked: selected.name == type.name }">
                                <a id="volume-type-{{type.type}}" ng-click="select(type)">{{type.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="help-block" ng-if="current_type == 'hostPath'"><strong  translate>Warning:</strong> <span translate>This option is for single node testing only – local storage will not work in a multi-node cluster</span></div>
                </td>
                <td ng-if="item" class="dialog-wrapper">
                    <span>{{ item.spec | formatVolumeType }}</span>
                </td>
            </tr>
            <tr>
                <td class="top">
                    <label class="control-label" for="modify-name"
                        translate>Name</label>
                </td>
                <td>
                    <input id="modify-name" class="form-control" type="text"
                        ng-if="!item" ng-model="fields.name" placeholder="eg: my-volume-name" autofocus>
                    <span id="modify-name" ng-if="item">{{ item.metadata.name }}</span>
                </td>
            </tr>

            <tr>
                <td class="top">
                    <label class="control-label" for="modify-capacity"
                        translate>Capacity</label>
                </td>
                <td>
                    <input id="modify-capacity" class="form-control" type="text"
                        ng-if="!item" ng-model="fields.capacity" placeholder="eg: 2Gi" autofocus>
                    <span id="modify-capacity" ng-if="item">{{ item.spec.capacity.storage }}</span>
                </td>
            </tr>

            <tr>
                <td class="top">
                    <label class="control-label"  translate>Reclaim Policy</label>
                </td>
                <td>
                    <label class="inline" ng-repeat="(key, value) in fields.reclaimPolicies">
                        <input id="modify-policy-{{key}}" type="radio" ng-model="fields.policy" value="{{key}}">
                        <span>{{ value }}</span>
                    </label>
                    <span id="last-policy"></span>
                </td>
            </tr>

            <tr>
                <td class="top">
                    <label class="control-label"  translate>Access Modes</label>
                </td>
                <td>
                    <label class="inline" ng-repeat="(key, value) in fields.accessModes">
                        <input id="modify-access-{{key}}" type="checkbox" ng-model="fields[key]">
                        <span>{{ value }}</span>
                    </label>
                    <span id="last-access"></span>
                </td>
            </tr>

            <tr ng-if="hasField('server')">
                <td class="top">
                    <label class="control-label" for="nfs-modify-server"
                        translate>Server</label>
                </td>
                <td>
                    <input id="nfs-modify-server" class="form-control" type="text"
                        ng-model="fields.server" placeholder="Hostname or IP address">
                </td>
            </tr>

            <tr ng-if="hasField('endpoint')">
                <td class="top">
                    <label class="control-label" for="modify-endpoint"
                        translate>Endpoint</label>
                </td>
                <td>
                    <div id="modify-endpoint" class="btn-group bootstrap-select form-control" dropdown>
                        <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                            <span class="pull-left">
                                <span ng-if="fields.endpoint">{{ fields.endpoint }}</span>
                            </span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="endpoint in fields.endpointOptions">
                                <a ng-click="setField('endpoint', endpoint.metadata.name)">{{ endpoint.metadata.name }}</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>

            <tr ng-if="hasField('glusterfsPath')">
                <td class="top">
                    <label class="control-label" for="modify-glusterfs-path"
                        translate>Volume Name</label>
                </td>
                <td>
                    <input id="modify-glusterfs-path" class="form-control" type="text"
                        ng-model="fields.glusterfsPath">
                </td>
            </tr>

            <tr ng-if="hasField('path')">
                <td class="top">
                    <label class="control-label" for="modify-path"
                        translate>Path</label>
                </td>
                <td>
                    <input id="modify-path" class="form-control" type="text"
                        ng-model="fields.path">
                </td>
            </tr>
            <tr ng-if="hasField('target')">
                <td class="top">
                    <label class="control-label" for="modify-iscsi-target"
                        translate>Target</label>
                </td>
                <td>
                    <input id="modify-iscsi-target" class="form-control" type="text"
                        ng-model="fields.target">
                </td>
            </tr>

            <tr ng-if="hasField('iqn')">
                <td class="top">
                    <label class="control-label" for="modify-iscsi-iqn"
                        translate>Qualified Name</label>
                </td>
                <td>
                    <input id="modify-iscsi-iqn" class="form-control" type="text"
                        ng-model="fields.iqn">
                </td>
            </tr>

            <tr ng-if="hasField('lun')">
                <td class="top">
                    <label class="control-label" for="modify-iscsi-lun"
                        translate>Logical Unit Number</label>
                </td>
                <td>
                    <input id="modify-iscsi-lun" class="form-control" type="text"
                        ng-model="fields.lun">
                </td>
            </tr>

            <tr ng-if="hasField('iface')">
                <td class="top">
                    <label class="control-label" for="modify-iscsi-iface"
                        translate>Interface</label>
                </td>
                <td>
                    <input id="modify-iscsi-iface" class="form-control" type="text"
                        ng-model="fields.iface">
                </td>
            </tr>

            <tr ng-if="hasField('fstype')">
                <td class="top">
                    <label class="control-label" for="modify-fstype"
                        translate>Filesystem Type</label>
                </td>
                <td>
                    <input id="modify-fstype" class="form-control" type="text"
                        ng-model="fields.fstype">
                </td>
            </tr>

            <tr ng-if="hasField('readOnly')">
                <td></td>
                <td>
                    <label>
                        <input id="modify-read-only" type="checkbox" ng-model="fields.readOnly">
                        <span translate>Read Only</span>
                    </label>
                </td>
            </tr>

        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default btn-cancel" translate>Cancel</button>
        <button class="btn btn-primary" ng-click="complete(performModify())">
            <span translate ng-if="item">Change</span>
            <span translate ng-if="!item">Register</span>
        </button>
    </div>
</modal-dialog>
