<h4></h4>
<div class="imp_panel">

    <div class="imp_file_drop">

        <div ng-drop-zone
             max-filesize="6000"
             class="dropzone-container"
             drop-action="/services/{portalid}/file/uploadProcess"
             remove-action="/services/{portalid}/file/removeUploaded"
             process-id="uploadProcessID"
             dropzone-component="dropzoneComponent"></div>
    </div>


    <button  class="btn btn-default" type="button" ng-click="importFile()">
        <span>{{ 'importexportwidget.import' | translate }}</span>
        <span class="glyphicon glyphicon-upload" ></span>
    </button>

    <button  class="btn btn-default" type="button" ng-click="clearDropzone()">
        <span>{{ 'importexportwidget.deleteAll' | translate }}</span>
        <span class="glyphicon glyphicon-remove" ></span>
    </button>

    <img src="img/common/wait.gif" class="imp_waitImg" ng-show="waitImport"/>
</div>

<div class="imp_corresp_bloc" ng-show="importedFeatures.length > 0">
    <table class="imp_corresp_table">
        <tr>
            <th>
                <div class="imp_source_comp">
                    <button ng-model="selectedImpFeature" class="btn btn-default"
                            bs-options="impfeat.alias for impfeat in importedFeatures"
                            ng-change="selectedImpLayerChange() "
                            placeholder="Source" bs-select>
                    </button>
                </div>
            </th>
            <th>
                <div class="imp_dest_comp">
                    <button ng-model="importDestFeature" class="btn btn-default"
                            bs-options="featureType.name for featureType  in destinationFeatures"
                            ng-change="destinationLayerChange()"
                            ng-disabled="selectedImpFeature == null"
                            placeholder="Destination" bs-select>
                    </button>
                </div>
            </th>
            <th>
                 <span title="{{ 'importexportwidget.options' | translate }}"
                    data-template="js/XG/widgets/utilities/model/views/popoverimportoptions.html"
                    data-placement="left" data-animation="am-flip-x"
                    ng-click="closeCfgPopovers()"
                    bs-popover >
                    <span class="fa fa-gears" ></span>
                </span>
            </th>
        </tr>
        <tr ng-repeat="impCorrespAttr in impCorrespAttrArray"
            ng-show="selectedImpFeature != null && importDestFeature != null">
            <td>
                {{impCorrespAttr.source}}
            </td>
            <td>
                <select  class="form-control" ng-model="impCorrespAttr.destination"
                         ng-change="destAttChanged(impCorrespAttr)"
                         ng-show="!simpleconf.showaliases" >
                    <option ng-repeat="att in impCorrespAttr.choices | orderBy:'name'"
                            ng-selected="impCorrespAttr.destination == att.name"
                            ng_attr-title="{{att.alias}}"
                            value="{{att.name}}">
                        {{att.name}}</option>
                </select>
                <select class="form-control"
                         ng-change="destAttChanged(impCorrespAttr)"
                         ng-model="impCorrespAttr.destination" ng-show="simpleconf.showaliases">
                    <option ng-repeat="att in impCorrespAttr.choices | orderBy:'alias'"
                            ng-selected="impCorrespAttr.destination == att.name"
                            ng-attr-title="{{att.name}}"
                            value="{{att.name}}">
                        {{att.alias}}</option>
                </select>
            </td>
        </tr>
    </table>
    <div id="imp_apply_rules_chkbox" ng-show="selectedImpFeature != null && importDestFeature != null">
        <input type="checkbox" id="applyRulesImportChkBox" ng-model="applyRules"/>
        <label for="applyRulesImportChkBox">
            <span>{{ 'importexportwidget.applyrules' | translate }}</span>
        </label>
    </div>
    <div class="imp_corresp_buttons"
         ng-show="selectedImpFeature != null && importDestFeature != null">

        <button  class="btn btn-default" ng-click="validateCorrespondence()"
                 ng-disabled="waitImport">
            <span>{{ 'importexportwidget.confirm' | translate }}</span>
            <span class="glyphicon glyphicon-ok" ></span>
        </button>

        <button  class="btn btn-default" ng-click="unselectCorrespondence()"
                 ng-disabled="waitImport">
            <span>{{ 'importexportwidget.unselect' | translate }}</span>
            <span class="glyphicon glyphicon-erase" ></span>
        </button>

        <button  class="btn btn-default" ng-click="cancelCorrespondence()"
                 ng-disabled="waitImport">
            <translate>{{ 'importexportwidget.cancel' | translate }}</translate>
            <span class="glyphicon glyphicon-ban-circle" ></span>
        </button>

    </div>
</div>

<div class="imp_after_message" ng-show="nbImportedRows > 0" >
    {{nbImportedRows + ' '}}<span>{{ 'importexportwidget.succesMsg' | translate }}</span>
</div>
