<section ng-controller="InfrastructureRequestsController" ng-init="findOne()">

    <div class="page-header">
        <h2>Edit Feature Mapper Item</h2>
    </div>
    <form name="infrastructureRequestForm" class="form-inline" ng-submit="update(infrastructureRequestForm.$valid)" novalidate>
        <fieldset>
            <!-- Bootstrap Grid System with Panels-->
            <!-- Infrastructure Request Details -->
            <div class ="panel panel-group panel-primary">
                <div class="row">
                    <div class="panel-title" >
                        <div class="col-lg-10">
                            Infrastructure Request Details
                        </div>
                        <div class="col-lg-2 text-right" >
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">
                                    <i class="glyphicon glyphicon-save"></i>
                                </button>
                            </div>
                            <div ng-show="error" class="text-danger">
                                <strong ng-bind="error"></strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-heading">
                    <div class="row">
                        <div class="col-lg-3">
                            Request Source:
                        </div>
                        <div class="col-lg-3">
                            Request ID:
                        </div>
                        <div class="col-lg-6">
                            Request Notes:
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-3">
                            <input name="cluster" type="text" ng-model="infrastructureRequest.requestSource" id="requestSource" class="form-control" placeholder="Request Source">
                        </div>
                        <div class="col-lg-3">
                            <input name="zone" type="text" ng-model="infrastructureRequest.requestID" id="requestID" class="form-control" placeholder="Request ID">
                        </div>
                        <div class="col-lg-6">
                            <input name="clli" type="text" ng-model="infrastructureRequest.note" id="note" class="form-control" placeholder="Request Notes">
                        </div>
                    </div>
                </div>
            </div>

            <!-- All Hosting -->
            <div class ="panel panel-group panel-default">
                <div class ="container">
                    <div class="panel-title">
                        <div class="row">
                            <div class="col-lg-10">
                                <kbd>Add Hosting Requests</kbd>
                            </div>
                            <div class="col-lg-2 text-right">
                                <a class="btn btn-primary" ng-click="addHosting(infrastructureRequest.hostings);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div ng-repeat="hosting in infrastructureRequest.hostings track by $index" ng-init="hostingsIndex = $index">

                        <!-- New Hostings -->
                        <div class="panel-heading">
                            <div class="col-lg-10">
                                <kbd>New Hosting Requests</kbd>
                            </div>
                            <div class="col-lg-2 text-right">
                                <a class="btn btn-primary" ng-click="addNewHosting(infrastructureRequest.hostings[hostingsIndex].newHostings);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div ng-repeat="newHosting in infrastructureRequest.hostings[hostingsIndex].newHostings track by $index" ng-init="newHostingsIndex = $index">
                                <div class="col-lg-12">
                                    <a class="btn btn-primary" ng-show="newHostingsIndex > -1" ng-click="newHostingsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings, newHostingsIndex);">
                                        <i class="glyphicon glyphicon-trash"></i>
                                        <kbd>New Host {{newHostingsIndex + 1}} of {{infrastructureRequest.hostings[hostingsIndex].newHostings.length}}</kbd>
                                    </a>
                                </div>

                                <!-- Related Applications -->
                                <div class="col-lg-10">
                                    <kbd>Related Applications - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].relatedApplications.length}}</kbd>
                                </div>
                                <div class="col-lg-2 text-right">
                                    <a class="btn btn-primary" ng-click="addRelatedApplication(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].relatedApplications);">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </a>
                                </div>

                                <div ng-repeat="relatedApplication in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].relatedApplications| filter:'' track by $index" ng-init="relatedApplicationsIndex = $index">
                                    <div class="col-lg-3">
                                        {{relatedApplicationsIndex + 1}}:
                                        <input name="MOTSID" type="text" ng-model="relatedApplication.MOTSID" id="MOTSID" class="form-control" placeholder="MOTS ID">
                                    </div>
                                    <div class="col-lg-3">
                                        <input name="MOTSAcronym" type="text" ng-model="relatedApplication.MOTSAcronym" id="MOTSAcronym" class="form-control" placeholder="MOTS Acronym">
                                    </div>
                                    <div class="col-lg-4">
                                        <input name="MOTSName" type="text" ng-model="relatedApplication.MOTSName" id="MOTSName" class="form-control" placeholder="MOTS Name">
                                    </div>
                                    <div class="col-lg-2 text-right">
                                        <a class="btn btn-primary" ng-click="saveMember(relatedApplication, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].relatedApplications, relatedApplicationsIndex);">
                                            <i class="glyphicon glyphicon-save"></i>
                                        </a>
                                        <a class="btn btn-primary" ng-show="relatedApplicationsIndex > -1" ng-click="relatedApplicationsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].relatedApplications, relatedApplicationsIndex);">
                                            <i class="glyphicon glyphicon-trash"></i>
                                        </a>
                                    </div>
                                </div>

                                <!-- Packages -->
                                <div class="col-lg-10">
                                    <kbd>Packages - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].packages.length}}</kbd>
                                </div>
                                <div class="col-lg-2 text-right">
                                    <a class="btn btn-primary" ng-click="addPackage(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].packages);">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </a>
                                </div>

                                <div ng-repeat="package in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].packages| filter:'' track by $index" ng-init="packagesIndex = $index">
                                    <div class="col-lg-3">
                                        {{packagesIndex + 1}}:
                                        <input name="offeringName" type="text" ng-model="package.offeringName" id="offeringName" class="form-control" placeholder="Offering Name">
                                    </div>
                                    <div class="col-lg-7">
                                        <input name="offeringVersion" type="text" ng-model="package.offeringVersion" id="offeringVersion" class="form-control" placeholder="Offering Version">
                                    </div>
                                    <div class="col-lg-2 text-right">

                                        <a class="btn btn-primary" ng-click="saveMember(package, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].packages, packagesIndex);">
                                            <i class="glyphicon glyphicon-save"></i>
                                        </a>
                                        <a class="btn btn-primary" ng-show="packagesIndex > -1" ng-click="packagesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].packages, packagesIndex);">
                                            <i class="glyphicon glyphicon-trash"></i>
                                        </a>
                                    </div>
                                </div>

                                <!-- Environments -->
                                <div class="col-lg-10">
                                    <kbd>Environments - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments.length}}</kbd>
                                </div>
                                <div class="col-lg-2 text-right">
                                    <a class="btn btn-primary" ng-click="addEnvironment(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments);">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </a>
                                </div>

                                <div ng-repeat="environment in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments| filter:'' track by $index" ng-init="environmentsIndex = $index">
                                    <div class="col-lg-3">
                                        {{environmentsIndex + 1}}:
                                        <input name="supportClass" type="text" ng-model="environment.supportClass" id="supportClass" class="form-control" placeholder="Support Class">
                                    </div>
                                    <div class="col-lg-3">
                                        <input name="name" type="text" ng-model="environment.name" id="name" class="form-control" placeholder="Name">
                                    </div>
                                    <div class="col-lg-4">
                                        <input name="description" type="text" ng-model="environment.description" id="description" class="form-control" placeholder="Description">
                                    </div>
                                    <div class="col-lg-2 text-right">
                                        <a class="btn btn-primary" ng-click="saveMember(environment, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments, environmentsIndex);">
                                            <i class="glyphicon glyphicon-save"></i>
                                        </a>
                                        <a class="btn btn-primary" ng-click="environmentsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments, environmentsIndex);">
                                            <i class="glyphicon glyphicon-trash"></i>
                                        </a>
                                    </div>

                                    <!-- Tenant / Quota -->
                                    <div class="col-lg-10">
                                        <kbd>Tenant / Quota - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas.length}}</kbd>
                                    </div>
                                    <div class="col-lg-2 text-right">
                                        <a class="btn btn-primary" ng-click="addTenantQuota(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas);">
                                            <i class="glyphicon glyphicon-plus"></i>
                                        </a>
                                    </div>
                                    <div ng-repeat="tenantQuota in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas| filter:'' track by $index" ng-init="tenantQuotasIndex = $index">
                                        <div class="col-lg-3">
                                            {{tenantQuotasIndex + 1}}:
                                            <input name="name" type="text" ng-model="tenantQuota.name" id="name" class="form-control" placeholder="Name">
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="description" type="text" ng-model="tenantQuota.description" id="description" class="form-control" placeholder="Description">
                                        </div>
                                        <div class="col-lg-2">
                                            <input name="flavor" type="text" ng-model="tenantQuota.flavor" id="flavor" class="form-control" placeholder="Flavor">
                                        </div>
                                        <div class="col-lg-2">
                                            <input name="type" type="text" ng-model="tenantQuota.type" id="type" class="form-control" placeholder="Type">
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="saveMember(tenantQuota, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas, tenantQuotasIndex);">
                                                <i class="glyphicon glyphicon-save"></i>
                                            </a>
                                            <a class="btn btn-primary" ng-click="tenantQuotasIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas, tenantQuotasIndex);">
                                                <i class="glyphicon glyphicon-trash"></i>
                                            </a>
                                        </div>
                                        
                                        <!-- Site -->
                                        <div class="col-lg-10">
                                            <kbd>Sites - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addSite(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="site in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites| filter:'' track by $index" ng-init="sitesIndex = $index">
                                            <div class="col-lg-3">
                                                {{sitesIndex + 1}}:
                                                <input name="siteZone" type="text" ng-model="site.zone" id="siteZone" class="form-control" placeholder="Zone" ng-style="{width: 200 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="siteCluster" type="text" ng-model="site.cluster" id="siteCluster" class="form-control" placeholder="Cluster" ng-style="{width: 200 + 'px'}">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="siteDescription" type="text" ng-model="site.description" id="siteDescription" class="form-control" placeholder="Description">
                                            </div>
                                            <div class="col-lg-4">
                                                <input name="siteType" type="text" ng-model="site.type" id="siteType" class="form-control" placeholder="Type">
                                            </div>

                                            <div class="col-lg-3">
                                                <input name="addressCommonName" type="text" ng-model="site.address.commonName" id="addressCommonName" class="form-control" placeholder="Common Name">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="addressStreet1" type="text" ng-model="site.address.street1" id="addressStreet1" class="form-control" placeholder="Street1">
                                            </div>
                                            <div class="col-lg-6">
                                                <input name="addressStreet2" type="text" ng-model="site.address.street2" id="addressStreet1" class="form-control" placeholder="Street2">
                                            </div>

                                            <div class="col-lg-3">
                                                <input name="addressCity" type="text" ng-model="site.address.city" id="addressCity" class="form-control" placeholder="City">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="addressState" type="text" ng-model="site.address.state" id="addressState" class="form-control" placeholder="State" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="addressPostalCode" type="text" ng-model="site.address.postalCode" id="addressPostalCode" class="form-control" placeholder="Postal Code" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-4">
                                                <input name="addressCountry" type="text" ng-model="site.address.country" id="addressCountry" class="form-control" placeholder="Country" ng-style="{width: 150 + 'px'}">
                                            </div>

                                            <div class="col-lg-3">
                                                <input name="addressFloor" type="text" ng-model="site.address.floor" id="addressFloor" class="form-control" placeholder="Floor">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="addressSection" type="text" ng-model="site.address.section" id="addressSection" class="form-control" placeholder=Section>
                                            </div>
                                            <div class="col-lg-4">
                                                <input name="addressCLLI" type="text" ng-model="site.address.clli" id="addressCLLI" class="form-control" placeholder="CLLI">
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(site, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites, sitesIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="sitesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites, sitesIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>

                                            <!-- Dependencies -->
                                            <div class="col-lg-10">
                                                <kbd>Dependency - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites[sitesIndex].dependencies.length}}</kbd>
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="addDependency(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites[sitesIndex].dependencies);">
                                                    <i class="glyphicon glyphicon-plus"></i>
                                                </a>
                                            </div>
                                            <div ng-repeat="dependency in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites[sitesIndex].dependencies| filter:'' track by $index" ng-init="dependenciesIndex = $index">
                                                <div class="col-lg-3">
                                                    {{dependenciesIndex + 1}}:
                                                    <input name="dependencyReason" type="text" ng-model="dependency.reason" id="dependencyReason" class="form-control" placeholder="Reason">
                                                </div>
                                                <div class="col-lg-3">
                                                    <input name="dependencyType" type="text" ng-model="dependency.type" id="dependencyType" class="form-control" placeholder="Type">
                                                </div>
                                                <div class="col-lg-4">
                                                    <input name="dependencyNote" type="text" ng-model="dependency.note" id="dependencyNote" class="form-control" placeholder="Note">
                                                </div>
                                                <div class="col-lg-2 text-right">
                                                    <a class="btn btn-primary" ng-click="saveMember(mgtModel, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites[sitesIndex].dependencies, dependenciesIndex);">
                                                        <i class="glyphicon glyphicon-save"></i>
                                                    </a>
                                                    <a class="btn btn-primary" ng-click="dependenciesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].sites[sitesIndex].dependencies, dependenciesIndex);">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Compute -->
                                        <div class="col-lg-10">
                                            <kbd>Compute - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].computes.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addCompute(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].computes);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="compute in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].computes| filter:'' track by $index" ng-init="computesIndex = $index">
                                            <div class="col-lg-3">
                                                {{computesIndex + 1}}:
                                                <input name="vCPU" type="text" ng-model="compute.vCPU" id="vCPU" class="form-control" placeholder="vCPU">
                                            </div>
                                            <div class="col-lg-1">
                                                <input name="CPU" type="text" ng-model="compute.CPU" id="CPU" class="form-control" placeholder="CPU">
                                            </div>
                                            <div class="col-lg-1">
                                                <input name="RAM" type="text" ng-model="compute.RAM" id="RAM" class="form-control" placeholder="RAM">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="certOS" type="text" ng-model="compute.certOS" id="certOS" class="form-control" placeholder="certOS">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="certOSVer" type="text" ng-model="compute.certOSVer" id="certOSVer" class="form-control" placeholder="certOSVer">
                                            </div>
                                            <div class="col-lg-3 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(compute, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].computes, computesIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="computesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].computes, computesIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <!-- Storage -->
                                        <div class="col-lg-10">
                                            <kbd>Storage - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].storages.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addStorage(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].storages);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="storage in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].storages| filter:'' track by $index" ng-init="storagesIndex = $index">
                                            <div class="col-lg-3">
                                                {{storagesIndex + 1}}:
                                                <input name="type" type="text" ng-model="storage.type" id="type" class="form-control" placeholder="Type">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="mgAmount" type="text" ng-model="storage.mgAmount" id="mgAmount" class="form-control" placeholder="mgAmount">
                                            </div>
                                            <div class="col-lg-5">
                                                <input name="fileSystemPath" type="text" ng-model="compute.fileSystemPath" id="fileSystemPath" class="form-control" placeholder="fileSystemPath">
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(storage, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].storages, storagesIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="storagesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].tenantQuotas[tenantQuotasIndex].storages, storagesIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Workload -->
                                    <div class="col-lg-10">
                                        <kbd>Workload - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads.length}}</kbd>
                                    </div>
                                    <div class="col-lg-2 text-right">
                                        <a class="btn btn-primary" ng-click="addWorkload(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads);">
                                            <i class="glyphicon glyphicon-plus"></i>
                                        </a>
                                    </div>

                                    <div ng-repeat="workload in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads| filter:'' track by $index" ng-init="workloadsIndex = $index">
                                        <div class="col-lg-2">
                                            {{workloadsIndex + 1}}:
                                            <input name ="instanceCount" type="number" ng-model="workload.instanceCount" id="instanceCount" class="form-control" min="1" max='999' ng-style="{width: 75 + 'px'}">
                                        </div>
                                        <div class="col-lg-2">
                                            <input name="description" type="text" ng-model="workload.description" id="description" class="form-control" placeholder="Description">
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <label>BML?</label>
                                            <input name="BMLRequired" type="radio" ng-model="workload.BMLRequired" id="BMLRequired" class="form-control" value="Bare Metal Required">
                                        </div>
                                        <div class="col-lg-2">
                                            <input name="hypervisor" type="text" ng-model="workload.hypervisor" id="hypervisor" class="form-control" placeholder="Hypervisor" ng-style="{width: 150 + 'px'}">
                                        </div>
                                        <div class="col-lg-2">
                                            <label>K-IOPS:</label>
                                            <input name="IOPSMaxRequired" type="number" ng-model="workload.IOPSMaxRequired" id="IOPSMaxRequired" class="form-control" min="10" max='999' ng-style="{width: 75 + 'px'}">
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="saveMember(workload, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads, workloadsIndex);">
                                                <i class="glyphicon glyphicon-save"></i>
                                            </a>
                                            <a class="btn btn-primary" ng-click="workloadsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads, workloadsIndex);">
                                                <i class="glyphicon glyphicon-trash"></i>
                                            </a>
                                        </div>

                                        <!-- Payloads -->
                                        <div class="col-lg-10">
                                            <kbd>Payloads - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].payloads.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addMgtModel(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].payloads);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="payload in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].payloads| filter:'' track by $index" ng-init="payloadsIndex = $index">
                                            <div class="col-lg-3">
                                                {{payloadsIndex + 1}}:
                                                <input name="payloadContainerSW" type="text" ng-model="payload.containerSW" id="payloadContainerSW" class="form-control" placeholder="Container SW" ng-style="{width: 200 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="payloadContainerSWVer" type="text" ng-model="payload.containerSWVer" id="payloadContainerSWVer" class="form-control" placeholder="Container SW Ver" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="payloadNLSCharSet" type="text" ng-model="payload.NLSCharSet" id="payloadNLSCharSet" class="form-control" placeholder="NLS Char Set" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="payloadNLSNCharCharSet" type="text" ng-model="payload.NLSNCharCharSet" id="payloadNLSNCharCharSet" class="form-control" placeholder="NLS NChar Set" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="payloadNote" type="text" ng-model="payload.note" id="payloadNote" class="form-control" placeholder="Note">
                                            </div>
                                            <div class="col-lg-1 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(payload, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].payloads, payloadsIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="payloadsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].payloads, payloadsIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <!-- Mgt Models -->
                                        <div class="col-lg-10">
                                            <kbd>Management Model - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].mgtModels.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addMgtModel(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].mgtModels);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="mgtModel in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].mgtModels| filter:'' track by $index" ng-init="mgtModelsIndex = $index">
                                            <div class="col-lg-4">
                                                {{mgtModelsIndex + 1}}:
                                                <input name="mgtModelType" type="text" ng-model="mgtModel.type" id="mgtModelType" class="form-control" placeholder="Type">
                                            </div>
                                            <div class="col-lg-6">
                                                <input name="mgtModelNote" type="text" ng-model="mgtModel.note" id="mgtModelNote" class="form-control" placeholder="Note">
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(mgtModel, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].mgtModels, mgtModelsIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="mgtModelsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].mgtModels, mgtModelsIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <!-- Network Gateways -->
                                        <div class="col-lg-10">
                                            <kbd>Network Gateway - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].networkGateways.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addNetworkGateway(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].networkGateways);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="networkGateway in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].networkGateways| filter:'' track by $index" ng-init="networkGatewaysIndex = $index">
                                            <div class="col-lg-3">
                                                {{networkGatewaysIndex + 1}}:
                                                <input name="networkGatewayType" type="text" ng-model="networkGateway.type" id="networkGatewayType" class="form-control" placeholder="Type">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="networkGatewayName" type="text" ng-model="networkGateway.name" id="networkGatewayName" class="form-control" placeholder="Name" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="networkGatewayDescription" type="text" ng-model="networkGateway.description" id="networkGatewayDescription" class="form-control" placeholder="Description">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="networkGatewayNote" type="text" ng-model="networkGateway.note" id="networkGatewayNote" class="form-control" placeholder="Note">
                                            </div>
                                            <div class="col-lg-1 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(networkGateway, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].networkGateways, networkGatewaysIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="networkGatewaysIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].networkGateways, networkGatewaysIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <!-- Security -->
                                        <div class="col-lg-10">
                                            <kbd>Security - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].securitys.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addSecurity(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].securitys);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="security in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].securitys| filter:'' track by $index" ng-init="securitysIndex = $index">
                                            <div class="col-lg-4">
                                                {{securitysIndex + 1}}:
                                                <input name="securityHandles" type="text" ng-model="security.handles" id="securityHandles" class="form-control" placeholder="Handles">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="securityStores" type="text" ng-model="security.stores" id="securityStores" class="form-control" placeholder="Stores">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="securityOther" type="text" ng-model="security.other" id="securityOther" class="form-control" placeholder="Other">
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(security, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].securitys, securitysIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="securitysIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].securitys, securitysIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <!-- Site -->
                                        <div class="col-lg-10">
                                            <kbd>Sites - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addSite(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="site in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites| filter:'' track by $index" ng-init="sitesIndex = $index">
                                            <div class="col-lg-3">
                                                {{sitesIndex + 1}}:
                                                <input name="siteZone" type="text" ng-model="site.zone" id="siteZone" class="form-control" placeholder="Zone" ng-style="{width: 200 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="siteCluster" type="text" ng-model="site.cluster" id="siteCluster" class="form-control" placeholder="Cluster" ng-style="{width: 200 + 'px'}">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="siteDescription" type="text" ng-model="site.description" id="siteDescription" class="form-control" placeholder="Description">
                                            </div>
                                            <div class="col-lg-4">
                                                <input name="siteType" type="text" ng-model="site.type" id="siteType" class="form-control" placeholder="Type">
                                            </div>

                                            <div class="col-lg-3">
                                                <input name="addressCommonName" type="text" ng-model="site.address.commonName" id="addressCommonName" class="form-control" placeholder="Common Name">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="addressStreet1" type="text" ng-model="site.address.street1" id="addressStreet1" class="form-control" placeholder="Street1">
                                            </div>
                                            <div class="col-lg-6">
                                                <input name="addressStreet2" type="text" ng-model="site.address.street2" id="addressStreet1" class="form-control" placeholder="Street2">
                                            </div>

                                            <div class="col-lg-3">
                                                <input name="addressCity" type="text" ng-model="site.address.city" id="addressCity" class="form-control" placeholder="City">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="addressState" type="text" ng-model="site.address.state" id="addressState" class="form-control" placeholder="State" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="addressPostalCode" type="text" ng-model="site.address.postalCode" id="addressPostalCode" class="form-control" placeholder="Postal Code" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-4">
                                                <input name="addressCountry" type="text" ng-model="site.address.country" id="addressCountry" class="form-control" placeholder="Country" ng-style="{width: 150 + 'px'}">
                                            </div>

                                            <div class="col-lg-3">
                                                <input name="addressFloor" type="text" ng-model="site.address.floor" id="addressFloor" class="form-control" placeholder="Floor">
                                            </div>
                                            <div class="col-lg-3">
                                                <input name="addressSection" type="text" ng-model="site.address.section" id="addressSection" class="form-control" placeholder=Section>
                                            </div>
                                            <div class="col-lg-4">
                                                <input name="addressCLLI" type="text" ng-model="site.address.clli" id="addressCLLI" class="form-control" placeholder="CLLI">
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(site, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites, sitesIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="sitesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites, sitesIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>

                                            <!-- Dependencies -->
                                            <div class="col-lg-10">
                                                <kbd>Dependency - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites[sitesIndex].dependencies.length}}</kbd>
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="addDependency(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites[sitesIndex].dependencies);">
                                                    <i class="glyphicon glyphicon-plus"></i>
                                                </a>
                                            </div>
                                            <div ng-repeat="dependency in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites[sitesIndex].dependencies| filter:'' track by $index" ng-init="dependenciesIndex = $index">
                                                <div class="col-lg-3">
                                                    {{dependenciesIndex + 1}}:
                                                    <input name="dependencyReason" type="text" ng-model="dependency.reason" id="dependencyReason" class="form-control" placeholder="Reason">
                                                </div>
                                                <div class="col-lg-3">
                                                    <input name="dependencyType" type="text" ng-model="dependency.type" id="dependencyType" class="form-control" placeholder="Type">
                                                </div>
                                                <div class="col-lg-4">
                                                    <input name="dependencyNote" type="text" ng-model="dependency.note" id="dependencyNote" class="form-control" placeholder="Note">
                                                </div>
                                                <div class="col-lg-2 text-right">
                                                    <a class="btn btn-primary" ng-click="saveMember(mgtModel, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites[sitesIndex].dependencies, dependenciesIndex);">
                                                        <i class="glyphicon glyphicon-save"></i>
                                                    </a>
                                                    <a class="btn btn-primary" ng-click="dependenciesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].sites[sitesIndex].dependencies, dependenciesIndex);">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Compute -->
                                        <div class="col-lg-10">
                                            <kbd>Compute - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].computes.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addCompute(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].computes);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="compute in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].computes| filter:'' track by $index" ng-init="computesIndex = $index">
                                            <div class="col-lg-3">
                                                {{computesIndex + 1}}:
                                                <input name="vCPU" type="text" ng-model="compute.vCPU" id="vCPU" class="form-control" placeholder="vCPU">
                                            </div>
                                            <div class="col-lg-1">
                                                <input name="CPU" type="text" ng-model="compute.CPU" id="CPU" class="form-control" placeholder="CPU">
                                            </div>
                                            <div class="col-lg-1">
                                                <input name="RAM" type="text" ng-model="compute.RAM" id="RAM" class="form-control" placeholder="RAM">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="certOS" type="text" ng-model="compute.certOS" id="certOS" class="form-control" placeholder="certOS">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="certOSVer" type="text" ng-model="compute.certOSVer" id="certOSVer" class="form-control" placeholder="certOSVer">
                                            </div>
                                            <div class="col-lg-3 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(compute, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].computes, computesIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="computesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].computes, computesIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <!-- Storage -->
                                        <div class="col-lg-10">
                                            <kbd>Storage - {{infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].storages.length}}</kbd>
                                        </div>
                                        <div class="col-lg-2 text-right">
                                            <a class="btn btn-primary" ng-click="addStorage(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].storages);">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </a>
                                        </div>
                                        <div ng-repeat="storage in infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].storages| filter:'' track by $index" ng-init="storagesIndex = $index">
                                            <div class="col-lg-3">
                                                {{storagesIndex + 1}}:
                                                <input name="type" type="text" ng-model="storage.type" id="type" class="form-control" placeholder="Type">
                                            </div>
                                            <div class="col-lg-2">
                                                <input name="mgAmount" type="text" ng-model="storage.mgAmount" id="mgAmount" class="form-control" placeholder="mgAmount" ng-style="{width: 150 + 'px'}">
                                            </div>
                                            <div class="col-lg-5">
                                                <input name="fileSystemPath" type="text" ng-model="compute.fileSystemPath" id="fileSystemPath" class="form-control" placeholder="fileSystemPath">
                                            </div>
                                            <div class="col-lg-2 text-right">
                                                <a class="btn btn-primary" ng-click="saveMember(storage, infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].storages, storagesIndex);">
                                                    <i class="glyphicon glyphicon-save"></i>
                                                </a>
                                                <a class="btn btn-primary" ng-click="storagesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].newHostings[newHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].storages, storagesIndex);">
                                                    <i class="glyphicon glyphicon-trash"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modify Hostings -->
                        <div class="panel-heading">
                            <div class="col-lg-10">
                                <kbd>Modify Hosting Requests</kbd>
                            </div>
                            <div class="col-lg-2 text-right">
                                <a class="btn btn-primary" ng-click="modifyHostingsIndex = addModifyHosting(infrastructureRequest.hostings[hostingsIndex].modifyHostings);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div ng-repeat="modifyHosting in infrastructureRequest.hostings[hostingsIndex].modifyHostings track by $index" ng-init="modifyHostingsIndex = $index">
                                <div class="col-lg-12">
                                    <a class="btn btn-primary" ng-click="modifyHostingsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].modifyHostings, modifyHostingsIndex);">
                                        <i class="glyphicon glyphicon-trash"></i>
                                        <kbd>Modify Host {{modifyHostingsIndex + 1}} of {{infrastructureRequest.hostings[hostingsIndex].modifyHostings.length}}</kbd>
                                    </a>
                                </div>
                                <div class="col-lg-12">
                                    <input name="targetName" type="text" ng-model="modifyHosting.targetName" id="targetName" class="form-control" placeholder="Target Name">
                                </div>

                                <!-- Compute -->
                                <div class="col-lg-10">
                                    <kbd>Compute - {{infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].computes.length}}</kbd>
                                </div>
                                <div class="col-lg-2 text-right">
                                    <a class="btn btn-primary" ng-click="addCompute(infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].computes);">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </a>
                                </div>
                                <div ng-repeat="compute in infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].computes| filter:'' track by $index" ng-init="computesIndex = $index">
                                    <div class="col-lg-3">
                                        {{computesIndex + 1}}:
                                        <input name="vCPU" type="text" ng-model="compute.vCPU" id="vCPU" class="form-control" placeholder="vCPU">
                                    </div>
                                    <div class="col-lg-1">
                                        <input name="CPU" type="text" ng-model="compute.CPU" id="CPU" class="form-control" placeholder="CPU">
                                    </div>
                                    <div class="col-lg-1">
                                        <input name="RAM" type="text" ng-model="compute.RAM" id="RAM" class="form-control" placeholder="RAM">
                                    </div>
                                    <div class="col-lg-2">
                                        <input name="certOS" type="text" ng-model="compute.certOS" id="certOS" class="form-control" placeholder="certOS">
                                    </div>
                                    <div class="col-lg-2">
                                        <input name="certOSVer" type="text" ng-model="compute.certOSVer" id="certOSVer" class="form-control" placeholder="certOSVer">
                                    </div>
                                    <div class="col-lg-3 text-right">
                                        <a class="btn btn-primary" ng-click="saveMember(compute, infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].computes, computesIndex);">
                                            <i class="glyphicon glyphicon-save"></i>
                                        </a>
                                        <a class="btn btn-primary" ng-click="computesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].environments[environmentsIndex].workloads[workloadsIndex].computes, computesIndex);">
                                            <i class="glyphicon glyphicon-trash"></i>
                                        </a>
                                    </div>
                                </div>

                                <!-- Storage -->
                                <div class="col-lg-10">
                                    <kbd>Storage - {{infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].storages.length}}</kbd>
                                </div>
                                <div class="col-lg-2 text-right">
                                    <a class="btn btn-primary" ng-click="addStorage(infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].storages);">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </a>
                                </div>
                                <div ng-repeat="storage in infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].storages| filter:'' track by $index" ng-init="storagesIndex = $index">
                                    <div class="col-lg-3">
                                        {{storagesIndex + 1}}:
                                        <input name="type" type="text" ng-model="storage.type" id="type" class="form-control" placeholder="Type">
                                    </div>
                                    <div class="col-lg-2">
                                        <input name="mgAmount" type="text" ng-model="storage.mgAmount" id="mgAmount" class="form-control" placeholder="mgAmount" ng-style="{width: 150 + 'px'}">
                                    </div>
                                    <div class="col-lg-5">
                                        <input name="fileSystemPath" type="text" ng-model="compute.fileSystemPath" id="fileSystemPath" class="form-control" placeholder="fileSystemPath">
                                    </div>
                                    <div class="col-lg-2 text-right">
                                        <a class="btn btn-primary" ng-click="saveMember(storage, infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].storages, storagesIndex);">
                                            <i class="glyphicon glyphicon-save"></i>
                                        </a>
                                        <a class="btn btn-primary" ng-click="storagesIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].modifyHostings[modifyHostingsIndex].storages, storagesIndex);">
                                            <i class="glyphicon glyphicon-trash"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Decomm Hostings -->
                        <div class="panel-heading">
                            <div class="col-lg-10">
                                <kbd>Decomm Hosting Requests</kbd>
                            </div>
                            <div class="col-lg-2 text-right">
                                <a class="btn btn-primary" ng-click="addDecommHosting(infrastructureRequest.hostings[hostingsIndex].decommHostings);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div ng-repeat="decommHosting in infrastructureRequest.hostings[hostingsIndex].decommHostings track by $index" ng-init="decommHostingsIndex = $index">
                                <div class="col-lg-12">
                                    <a class="btn btn-primary" ng-click="decommHostingsIndex = removeMember(infrastructureRequest.hostings[hostingsIndex].decommHostings, decommHostingsIndex);">
                                        <i class="glyphicon glyphicon-trash"></i>
                                        <kbd>Decomm Host {{decommHostingsIndex + 1}} of {{infrastructureRequest.hostings[hostingsIndex].decommHostings.length}}</kbd>
                                    </a>
                                </div>

                                <div class="col-lg-3">
                                    <input name="targetName" type="text" ng-model="decommHosting.targetName" id="targetName" class="form-control" placeholder="Target Name">
                                </div>
                                <div class="col-lg-9">
                                    <input name="note" type="text" ng-model="decommHosting.note" id="note" class="form-control" placeholder="Note">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- All Other Requests -->
            <div class ="panel panel-group panel-default">
                <div class ="container">
                    <div class="panel-title">
                        <div class="row">
                            <div class="col-lg-10">
                                <kbd>Edit Other Requests</kbd>
                            </div>
                            <div class="col-lg-2 text-right">
                                <a class="btn btn-primary" ng-click="addOtherRequest(infrastructureRequest.otherRequests);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div ng-repeat="otherRequest in infrastructureRequest.otherRequests track by $index" ng-init="otherRequestsIndex = $index">

                        <!-- Equipment Requests -->
                        <div class="panel-heading">
                            <div class="col-lg-10">
                                <kbd>Equipment Requests</kbd>
                            </div>
                            <div class="col-lg-2  text-right">
                                <a class="btn btn-primary" ng-click="addEquipment(infrastructureRequest.otherRequests[otherRequestsIndex].equipments);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div ng-repeat="equipment in infrastructureRequest.otherRequests[otherRequestsIndex].equipments| filter:'' track by $index" ng-init="equipmentsIndex = $index">
                                <div class="col-lg-12">
                                    <a class="btn btn-primary" ng-click="equipmentsIndex = removeMember(infrastructureRequest.otherRequests[otherRequestsIndex].equipments, equipmentsIndex);">
                                        <i class="glyphicon glyphicon-trash"></i>
                                        <kbd>Equipment Requests {{equipmentsIndex + 1}} of {{infrastructureRequest.otherRequests[otherRequestsIndex].equipments.length}}</kbd>
                                    </a>
                                </div>
                                <div class="col-lg-3">
                                    {{equipmentsIndex + 1}}:
                                    <input name ="instanceCount" type="number" ng-model="equipment.instanceCount" id="instanceCount" class="form-control" min="1" max='999' ng-style="{width: 75 + 'px'}">
                                </div>
                                <div class="col-lg-2">
                                    <input name="name" type="text" ng-model="equipment.name" id="name" class="form-control" placeholder="Name">
                                </div>
                                <div class="col-lg-2">
                                    <input name="ALMID" type="text" ng-model="equipment.ALMID" id="ALMID" class="form-control" placeholder="ALMID">
                                </div>
                                <div class="col-lg-2">
                                    <input name="note" type="text" ng-model="equipment.note" id="note" class="form-control" placeholder="Note">
                                </div>
                                <div class="col-lg-3 text-right">
                                    <a class="btn btn-primary" ng-click="saveMember(equipment, infrastructureRequest.otherRequests[otherRequestsIndex].equipments, equipmentsIndex);">
                                        <i class="glyphicon glyphicon-save"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Feature Requests -->
                        <div class="panel-heading">
                            <div class="col-lg-10">
                                <kbd>Feature Requests</kbd>
                            </div>
                            <div class="col-lg-2 text-right">
                                <a class="btn btn-primary" ng-click="addFeature(infrastructureRequest.otherRequests[otherRequestsIndex].features);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div ng-repeat="feature in infrastructureRequest.otherRequests[otherRequestsIndex].features| filter:'' track by $index" ng-init="featuresIndex = $index">
                                <div class="col-lg-12">
                                    <a class="btn btn-primary" ng-click="featuresIndex = removeMember(infrastructureRequest.otherRequests[otherRequestsIndex].features, featuresIndex);">
                                        <i class="glyphicon glyphicon-trash"></i>
                                        <kbd>Feature Requests {{equipmentsIndex + 1}} of {{infrastructureRequest.otherRequests[otherRequestsIndex].equipments.length}}</kbd>
                                    </a>
                                </div>

                                <div class="col-lg-3">
                                    {{featuresIndex + 1}}:
                                    <input name="name" type="text" ng-model="feature.name" id="name" class="form-control" placeholder="Name">
                                </div>
                                <div class="col-lg-2">
                                    <input name="action" type="text" ng-model="feature.action" id="action" class="form-control" placeholder="Action">
                                </div>

                                <div class="col-lg-2">
                                    <input name="description" type="text" ng-model="feature.description" id="description" class="form-control" placeholder="Description">
                                </div>
                                <div class="col-lg-2">
                                    <input name="note" type="text" ng-model="feature.note" id="note" class="form-control" placeholder="Note">
                                </div>
                                <div class="col-lg-3 text-right">
                                    <a class="btn btn-primary" ng-click="saveMember(feature, infrastructureRequest.otherRequests[otherRequestsIndex].features, featuresIndex);">
                                        <i class="glyphicon glyphicon-save"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Process Requests -->
                        <div class="panel-heading">
                            <div class="col-lg-10" >
                                <kbd>Process Requests</kbd>
                            </div>
                            <div class="col-lg-2 text-right">
                                <a class="btn btn-primary" ng-click="addProcess(infrastructureRequest.otherRequests[otherRequestsIndex].processes);">
                                    <i class="glyphicon glyphicon-plus"></i>
                                </a>
                            </div>
                        </div>

                        <div ng-repeat="process in infrastructureRequest.otherRequests[otherRequestsIndex].processes| filter:'' track by $index" ng-init="processesIndex = $index">
                            <div class="panel-body">
                                <div class="col-lg-12">
                                    <a class="btn btn-primary" ng-click="processesIndex = removeMember(infrastructureRequest.otherRequests[otherRequestsIndex].processes, processesIndex);">
                                        <i class="glyphicon glyphicon-trash"></i>
                                        <kbd>Process Requests {{processesIndex + 1}} of {{infrastructureRequest.otherRequests[otherRequestsIndex].processes.length}}</kbd>
                                    </a>
                                </div>
                                <div class="col-lg-3">
                                    {{processesIndex + 1}}:
                                    <input name="name" type="text" ng-model="process.name" id="name" class="form-control" placeholder="Name">
                                </div>
                                <div class="col-lg-2">
                                    <input name="handler" type="text" ng-model="process.handler" id="action" class="form-control" placeholder="Handler">
                                </div>

                                <div class="col-lg-2">
                                    <input name="ALMTask" type="text" ng-model="process.ALMTask" id="ALMTask" class="form-control" placeholder="ALMTask">
                                </div>
                                <div class="col-lg-2">
                                    <input name="note" type="text" ng-model="process.note" id="note" class="form-control" placeholder="Note">
                                </div>
                                <div class="col-lg-3 text-right">
                                    <a class="btn btn-primary" ng-click="saveMember(process, infrastructureRequest.otherRequests[otherRequestsIndex].processes, processesIndex);">
                                        <i class="glyphicon glyphicon-save"></i>
                                    </a>
                                </div>

                                <!-- Argument List -->
                                <div class="col-lg-1">. </div>
                                <div class="col-lg-9">
                                    <kbd>Argument List - {{infrastructureRequest.otherRequests[otherRequestsIndex].processes[processesIndex].argumentLists.length}}</kbd>
                                </div>
                                <div class="col-lg-2 text-right">
                                    <a class="btn btn-primary" ng-click="addArgumentList(infrastructureRequest.otherRequests[otherRequestsIndex].processes[processesIndex].argumentLists);">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </a>
                                </div>

                                <div ng-repeat="argumentList in infrastructureRequest.otherRequests[otherRequestsIndex].processes[processesIndex].argumentLists| filter:'' track by $index" ng-init="argumentListsIndex = $index">
                                    <div class="col-lg-1">
                                        <a class="btn btn-primary" ng-click="argumentListsIndex = removeMember(infrastructureRequest.otherRequests[otherRequestsIndex].processes[processesIndex].argumentLists, argumentListsIndex);">
                                            <i class="glyphicon glyphicon-trash"></i>
                                        </a>
                                    </div>
                                    <div class="col-lg-3">
                                        {{argumentListIndex + 1}}:
                                        <input name="UID" type="text" ng-model="argumentList.UID" id="UID" class="form-control" placeholder="UID">
                                    </div>
                                    <div class="col-lg-2">
                                        <input name="hostName" type="text" ng-model="argumentList.hostName" id="hostName" class="form-control" placeholder="Host Name">
                                    </div>
                                    <div class="col-lg-6 text-right">
                                        <a class="btn btn-primary" ng-click="saveMember(argumentList, infrastructureRequest.otherRequests[otherRequestsIndex].processes[processesIndex].argumentLists, argumentListsIndex);">
                                            <i class="glyphicon glyphicon-save"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</section>
