﻿<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Relationships</h3>
    </div>
    <div class="panel-body">
        <div ng-repeat="relationship in contactGroupMember.Relationships">
            <div class="form-group">
                <label for="inputRelationship" class="col-sm-2 control-label">Relationship</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputRelationship" placeholder="Relationship" ng-model="relationship.Name" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <button type="button" class="btn btn-default btn-xs" ng-click="contactGroupMember.removeRelationship(relationship)"><span class="glyphicon glyphicon-remove"></span> Remove</button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <button type="button" class="btn btn-default btn-xs" ng-click="contactGroupMember.addRelationship('')"><span class="glyphicon glyphicon-plus"></span> Add a Relationship</button>
            </div>
        </div>
    </div>
</div>
