<div id="link-customers-template-container" class="col-md-12">
    <h3>{{ 'users.headers.LINK_CUSTOMERS' | translate }}</h3>

    <div  class="all-commercial-leads-layer col-md-4">
        <div class="user-container">
            <div class="user-header">{{ 'users.headers.SELECT_COMMERCIAL_LEAD' | translate }}</div>
            <div class="user-list">
                <div ng-click="selectCommercialLead(commercialLead)" class="user-layer {{getUserClass(commercialLead)}}" ng-repeat="commercialLead in commercialLeads">
                    {{commercialLead.name}}
                </div>
            </div>
        </div>
    </div>

    <div class="user-link-area col-md-8">
        <div class="user-big-container col-md-12">
            <div class="col-md-6">
                <div id="linked-customers"
                    class="user-container"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'customerDropped(\'linked-customers\')'}">
                    <div class="user-header">{{ 'users.headers.LINKED_CUSTOMERS' | translate }}</div>
                    <div id="linked-customers-list" class="user-list">
                        <div class="linked-customers-layer customer-row"
                            ng-repeat="customer in selectedCommercialLead.linkedCustomers"
                            data-drag="true"
                            id-customer="{{customer.id}}"
                            drop-to="all-customers"
                            jqyoui-draggable="{animate:true, onStart:'customerDragStart(\'linked-customers-list\')', onStop:'customerDragStop(\'linked-customers-list\')', scroll: false}"
                            data-jqyoui-options="{revert: true}">
                            {{customer.name}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div id="all-customers"
                    class="user-container"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'customerDropped(\'all-customers\')'}">
                    <div class="user-header">{{ 'users.headers.ALL_CUSTOMERS' | translate }}</div>
                    <div id="all-customers-list" class="user-list">
                        <div ng-if="customer.isNotLinked"
                            class="all-custoemrs-layer customer-row"
                            ng-repeat="customer in customers"
                            data-drag="true"
                            id-customer="{{customer.id}}"
                            drop-to="linked-customers"
                            jqyoui-draggable="{animate:true, onStart:'customerDragStart(\'all-customers-list\')', onStop:'customerDragStop(\'all-customers-list\')', scroll: false}"
                            data-jqyoui-options="{revert: true}">
                            {{customer.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="users-link-buttons col-md-12">
        <div class="btn btn-primary" ng-click="updateLinkedCustomers()">
            {{ 'users.buttons.SAVE' | translate }}
        </div>
    </div>
</div>
