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

    <div class="page-header">
        <h2>Edit Feature Mapper Item</h2>
    </div>
    <form name="featureMapperForm" class="form-inline" ng-submit="update(featureMapperForm.$valid)" novalidate>


        <!-- Bootstrap Grid System with Panels-->
        <div class ="container-fluid">
            <div class="row">
                <div class="col-lg-10">
                    <kbd>Features & Capabilities</kbd>
                </div>
                <div class="col-md-2">
                    <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>
            <!-- End of Line -->


            <div class="row">
                <div class="col-md-3">
                    <span class="label label-info" >Cluster:<br></span>
                    <input name="cluster" type="text" ng-model="featureMapper.cluster" id="cluster" class="form-control">
                </div>
                <div class="col-md-3">
                    <span class="label label-info" >Cluster:<br></span>
                    <input name="zone" type="text" ng-model="featureMapper.zone" id="zone" class="form-control">
                </div>
                <div class="col-md-2">
                    <span class="label label-info" >CLLI:<br></span>
                    <input name="clli" type="text" ng-model="featureMapper.clli" id="clli" class="form-control" maxlength="12" size="12">
                </div>
                <div class="col-md-2">
                    <span class="label label-info" >Effective Start Date:<br></span>
                    <input name="date_start" type="text" ng-model="featureMapper.date_start" id="date_start" class="form-control" placeholder="MM/DD/YYYY" maxlength="10" size="10">
                </div>
                <div class="col-md-2">
                    <span class="label label-info" >Effective End Date:<br></span>
                    <input name="date_end " type="text" ng-model="featureMapper.date_end" id="date_end " class="form-control" placeholder="MM/DD/YYYY" maxlength="10" size="10">
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-6">
                    <span class="label label-info" >Site Description:<br></span>
                    <input name="site_description" type="text" ng-model="featureMapper.site_description" id="site_description" class="form-control"size="20">
                </div>

                <div class="col-md-6">
                    <span class="label label-info" >Site Type:<br></span>
                    <input name="site_type" type="text" ng-model="featureMapper.site_type" id="site_type" class="form-control" size="20" >
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <span class="label label-info" >Common Name:<br></span>
                    <input name="common_name" type="text" ng-model="featureMapper.address.common_name" id="common_name" class="form-control">
                </div>
                <div class="col-lg-3">
                    <span class="label label-info" >Street1:<br></span>
                    <input name="street1" type="text" ng-model="featureMapper.address.street1" id="street1" class="form-control">
                </div>
                <div class="col-lg-3">
                    <span class="label label-info" >Street2:<br></span>
                    <input name="street2" type="text" ng-model="featureMapper.address.street2" id="street2" class="form-control">
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <span class="label label-info" >City:<br></span>
                    <input name="city" type="text" ng-model="featureMapper.address.city" id="city" class="form-control">
                </div>
                <div class="col-lg-1">
                    <span class="label label-info" >State:<br></span>
                    <input name="state" type="text" ng-model="featureMapper.address.state" id="state" class="form-control" maxlength="2" size="2">
                </div>
                <div class="col-lg-2">
                    <span class="label label-info" >Postal Code:<br></span>
                    <input name="postal_code" type="text" ng-model="featureMapper.address.postal_code" id="postal_code" class="form-control" maxlength="10" size="10">
                </div>
                <div class="col-lg-3">
                    <span class="label label-info" >Country:<br></span>
                    <input name="country" type="text" ng-model="featureMapper.address.country" id="country" class="form-control">
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <span class="label label-info" >Floor:<br></span>
                    <input name="floor" type="text" ng-model="featureMapper.address.floor" id="floor" class="form-control" size="40">
                </div>
                <div class="col-lg-3">
                    <span class="label label-info" >Section:<br></span>
                    <input name="section" type="text" ng-model="featureMapper.address.section" id="section" class="form-control" size="40">
                </div>
            </div>
            <!-- End of Line -->


            <div class="row">
                <div class="col-lg-2">
                    <span class="label label-info" >AIC Version:<br></span>
                    <input name="aic_version" type="text" ng-model="featureMapper.aic_version" id="aic_version" class="form-control" maxlength="4" size="4">
                </div>
                <div class="col-lg-2">
                    <span class="label label-info" >Contrail Version:<br></span>
                    <input name="contrail_version" type="text" ng-model="featureMapper.contrail_version" id="contrail_version" class="form-control" maxlength="4" size="4">
                </div>
                <div class="col-lg-2">
                    <span class="label label-info" >Placement Exception:<br></span>
                    <input name="placement_exception" type="text" ng-model="featureMapper.placement_exception" id="placement_exception" class="form-control" maxlength="3" size="3">
                </div>
                <div class="col-lg-2">
                    <span class="label label-info" >Placement Waiver:<br></span>
                    <input name="placement_waiver" type="text" ng-model="featureMapper.placement_waiver" id="placement_waiver" class="form-control" maxlength="3" size="3">
                </div>
                <div class="col-lg-2">
                    <span class="label label-info" >myLogins Access:<br></span>
                    <input name="myLogins_access" type="text" ng-model="featureMapper.myLogins_access" id="myLogins_access" class="form-control" maxlength="3" size="3">
                </div>
                <div class="col-lg-2">
                    <span class="label label-info" >ush Access:<br></span>
                    <input name="ush_access" type="text" ng-model="featureMapper.ush_access" id="ush_access" class="form-control" maxlength="3" size="3">
                </div>
            </div>
            <!-- End of Line -->
        </div>

        <div class ="container-fluid">
            <div class="row">
                <div class="col-lg-4">
                    <span class="label label-info" >Compute Features:<br></span>
                    <div ng-repeat ="compute_feature in featureMapper.compute_features| filter:''">
                        <input name="compute_feature" type="text" ng-model="compute_feature" id="compute_feature" class="form-control">
                        <a class="btn btn-primary" ng-click="saveMember(compute_feature, featureMapper.compute_features, $index);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-click="removeMember(compute_feature, featureMapper.compute_features);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>

                    </div>
                    <input name="compute_feature" type="text" ng-model="compute_feature" id="compute_feature" class="form-control">
                    <a class="btn btn-primary" ng-click="addMember(compute_feature, featureMapper.compute_features);">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>

                <div class="col-lg-4">
                    <span class="label label-info" >Networks:<br></span>
                    <div ng-repeat ="network in featureMapper.networks| filter:''">
                        <input name="network" type="text" ng-model="network" id="network" class="form-control">
                        <a class="btn btn-primary" ng-click="saveMember(network, featureMapper.networks, $index);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-click="removeMember(network, featureMapper.networks);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>

                    </div>
                    <input name="network" type="text" ng-model="network" id="network" class="form-control">
                    <a class="btn btn-primary" ng-click="addMember(network, featureMapper.networks);">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>

                </div>

                <div class="col-lg-4">
                    <span class="label label-info" >Workloads:<br></span>
                    <div ng-repeat ="workload in featureMapper.workloads| filter:''">
                        <input name="workload" type="text" ng-model="workload" id="workload" class="form-control">
                        <a class="btn btn-primary" ng-click="saveMember(compute_feature, featureMapper.workloads, $index);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-click="removeMember(workload, featureMapper.workloads);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>

                    </div>
                    <input name="workload" type="text" ng-model="workload" id="workload" class="form-control">

                    <a class="btn btn-primary" ng-click="addMember(workload, featureMapper.workloads);">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-4">
                    <span class="label label-info" >Tools:<br></span>
                    <div ng-repeat ="tool in featureMapper.tools| filter:''">
                        <input name="tool" type="text" ng-model="tool" id="tool" class="form-control">
                        <a class="btn btn-primary" ng-click="saveMember(tool, featureMapper.tools, $index);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-click="removeMember(tool, featureMapper.tools);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>

                    </div>
                    <input name="tool" type="text" ng-model="tool" id="tool" class="form-control">

                    <a class="btn btn-primary" ng-click="addMember(tool, featureMapper.tools);">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>
                <div class="col-lg-4">
                    <span class="label label-info" >Storage:<br></span>
                    <div ng-repeat ="storage in featureMapper.storages| filter:''">
                        <input name="storage" type="text" ng-model="storage" id="storage" class="form-control">
                        <a class="btn btn-primary" ng-click="saveMember(storage, featureMapper.storages, $index);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-click="removeMember(storage, featureMapper.storages);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>

                    </div>
                    <input name="storage" type="text" ng-model="storage" id="storage" class="form-control">
                    <a class="btn btn-primary" ng-click="addMember(storage, featureMapper.storages);">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>
                <div class="col-lg-4">
                    <span class="label label-info" >Support Models:<br></span>
                    <div ng-repeat ="support_model in featureMapper.support_models| filter:''">
                        <input name="support_model" type="text" ng-model="support_model" id="support_model" class="form-control">
                        <a class="btn btn-primary" ng-click="saveMember(support_model, featureMapper.support_models, $index);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-click="removeMember(support_model, featureMapper.support_models);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>
                    </div>
                    <input name="support_model" type="text" ng-model="support_model" id="support_model" class="form-control">
                    <a class="btn btn-primary" ng-click="addMember(support_model, featureMapper.support_models);">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>
            </div>
            <!-- End of Line -->
        </div>
    </form>
</section>
