<div class="documents-link-layer row">
    <div  class="all-packages-layer col-md-4">
        <div class="documents-container">
            <div class="documents-header">{{ 'documents.headers.SELECT_PACKAGE' | translate }}</div>
            <div class="documents-list">
                <div ng-click="selectPackage(package)" class="package-layer {{getPackageClass(package)}}" ng-repeat="package in packages">
                    <span class="flag-icon flag-icon-{{package.countryCode}}"></span> {{package.packageName}}
                </div>
            </div>
        </div>
    </div>

    <div class="documents-link-area col-md-8">
        <div class="documents-big-container col-md-12">
            <div class="col-md-6">
                <div id="linked-documents"
                    class="documents-container"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'documentDropped(\'linked-documents\')'}">
                    <div class="documents-header">{{ 'documents.headers.LINKED_DOCUMENTS' | translate }}</div>
                    <div id='linked-documents-list' class="documents-list">
                        <div class="linked-documents-layer document-row linked"
                            ng-repeat="document in selectedPackage.documents"
                            data-drag="true"
                            id-document="{{document.idDocument}}"
                            drop-to="all-documents"
                            jqyoui-draggable="{animate:true, onStart:'documentDragStart(\'linked-documents-list\')', onStop:'documentDragStop(\'linked-documents-list\')', scroll: false}"
                            data-jqyoui-options="{revert: true}">
                            <div class="document-icon-layer">
                                <span class="{{document.extension}} document-icon glyphicon glyphicon-file"></span>
                                <div class="document-icon-text">{{document.extension}}</div>
                            </div>
                            ({{document.documentType}}) {{document.documentName}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div id="all-ducuments"
                    class="documents-container"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'documentDropped(\'all-documents\')'}">
                    <div class="documents-header">{{ 'documents.headers.ALL_DOCUMENTS' | translate }}</div>
                    <div id='all-documents-list' class="documents-list">
                        <div ng-if="document.isNotLinked"
                            class="all-documents-layer document-row not-linked"
                            ng-repeat="document in documents"
                            data-drag="true"
                            id-document="{{document.idDocument}}"
                            drop-to="linked-documents"
                            jqyoui-draggable="{animate:true, onStart:'documentDragStart(\'all-documents-list\')', onStop:'documentDragStop(\'all-documents-list\')', scroll: false}"
                            data-jqyoui-options="{revert: true}">
                            <div class="document-icon-layer">
                                <span class="{{document.extension}} document-icon glyphicon glyphicon-file"></span>
                                <div class="document-icon-text">{{document.extension}}</div>
                            </div>
                            ({{document.documentType}}) {{document.documentName}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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