<style>
    .user-profile-groups .card-body {
        display: none;
    }

    .user-profile-groups .card-heading {
        border-bottom: none;
    }

    .user-profile-group-editing .card-body {
        display: block;
    }

    .user-profile-group-editing .card-heading {
        border-bottom: 1px solid #ddd;
    }

    .user-profile-groups .panel {
        cursor: move;
    }

    .pi-hover-input {
        width: 80%;
    }
</style>
<div class="row user-profile-page">
    <div class="col-md-7">
        <div class="card bg-success p-3">
            <div class="clearfix card-heading">
                <div class="float-right">
                    <button class="btn btn-link" data-ng-click="cancelAction()">{{'CANCEL' | translate}}</button>
                    <button class="btn btn-success" data-ng-click="saveAction()">{{'SAVE' | translate}}</button>
                </div>
                <h5 style="margin: 10px 0 0 0;">{{'FIELD_DISPLAY' | translate}}</h5>
            </div>
            <div class="card-text">
                <form class="input-group" ng-submit="AddCustomDisplay()" novalidate
                      name="displayForm" style="margin-bottom: 20px;">
                    <input class="form-control" type="text" placeholder="{{'TITLE' | translate}}"
                           data-ng-model="entity" required>
                    <button class="btn btn-secondary" ng-disabled="displayForm.$invalid">
                        {{'ADD_GROUP' | translate}}
                    </button>
                </form>
                <div pi-alert message="saveAlert.message" type="saveAlert.type"></div>
                <div class="user-profile-groups" ui-sortable="displaysOpts" data-ng-model="displays">
                    <div ng-repeat="display in displays" class="card bg-light mb-3"
                         data-ng-class="{'user-profile-group-editing': display.$isEditing}">
                        <div class="clearfix card-heading">
                            <div class="float-right user-profile-group-action">
                                <i class="fas fa-lg pi-icon-cursor" style="padding-right: 4px;"
                                   data-ng-class="{'fa-angle-up': display.$isEditing, 'fa-angle-down': !display.$isEditing}"
                                   data-ng-click="toggleGroup(display)"></i>
                                <button class="close" data-ng-click="removeDisplay($index)">
                                    &times;
                                </button>
                            </div>
                            <div pi-hover-input text="display.title">
                            </div>
                        </div>
                        <div class="card-body" ui-sortable data-ng-model="display.fields">
                            <div ng-repeat="displayField in display.fields" class="pi-widget">
                                <button class="close" data-ng-if="!display.name"
                                        data-ng-click="removeGroupField(display.fields, $index)">&times;
                                </button>
                                {{displayField.title}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-5 user-profile-source">
        <legend>{{'BASIC_FIELD' | translate}}</legend>
        <div ng-repeat="field in profile" class="pi-widget">
            <div class="float-right">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-link" data-toggle="modal" data-target="#userField{{field.name}}">
                    <i class="fas fa-plus fa-lg pi-icon-cursor"></i>
                </button>

                <!-- Modal -->
                <div class="modal fade" id="userField{{field.name}}" tabindex="-1" role="dialog" aria-labelledby="userFieldLabel{{field.name}}" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="list-group" ng-repeat="item in customGroup">
                                    <a href="javascript:void(0)" class="list-group-item list-group-item-action" data-ng-click="AddGroupField(item, $parent.$index)">{{item}}</a>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            {{field.title}}
        </div>
        <legend>{{'COMPOUND' | translate}}</legend>
        <div ng-repeat="compound in compounds" class="card bg-light mb-3">
            <div class="card-heading">
        <span class="float-right" data-ng-click="addDisplayGroup($index)">
          <i class="fas fa-plus fa-lg pi-icon-cursor"></i>
        </span>
                {{compound.title}}
            </div>
            <div class="card-text">
                <div class="pi-widget" ng-repeat="item in compound.fields">
                    {{item.title}}
                </div>
            </div>
        </div>
    </div>
</div>