<div
  class="dualListBox"
  ng-if="data.leftData || data.rightData"
  ng-class="{'tabulated': hasTabs}"
>
  <!-- Left part -->
  <div class="left-part">
    <!-- Bouton d'ajout des onglets -->
    <div class="clearfix" ng-if="data.tabs=='left'">
      <div class="addtab">
        <div
          class="btn btn-default btn-small"
          ng-class="{'addTabsToBranch':(!data.leftData || data.leftData.length==0)}"
          ng-click="addTabsToBranch()"
          title="{{'tools.builder.form.tabs.addtab' | translate}}"
        >
          <span
            ng-show="(!data.leftData || data.leftData.length==0)"
          >
            <i class="fa fa-check"></i>
            <translate>tools.builder.form.tabs.activate</translate>
          </span>
          <span ng-show="data.leftData.length>0">
            <i class="fa fa-plus"></i>
            <translate>tools.builder.form.tabs.add</translate>
          </span>
        </div>
      </div>

      <!-- Onglets -->
      <div
        ng-if="data.leftData.length>0"
        bs-tabs
        class="scrolledTabs formTabRender editable"
        ng-model="data.activeTab"
      >
        <div ng-repeat="tab in data.leftData" title="{{tab.title|translate}}" bs-pane>
          <div class="editPanel">
            <button
              class="btn btn-default toggle_edit"
              ng-if="!editMode"
              ng-click="toggleTabEditMode(1)"
              title="{{'tools.builder.form.tabs.tabedit' | translate}}"
            >
              <i class="fa fa-pencil"></i>
              {{'tools.builder.form.tabs.edit' | translate}}
            </button>
            <div class="edit_form clearfix" ng-if="editMode">
              <div class="tab_name">
                <input type="text" ng-model="tab.title" class="form-control input-sm" />
              </div>
              <div class="tab_actions">
                <button class="btn btn-success btn-xs" ng-click="toggleTabEditMode(0)"  > <i class="fa fa-check"></i></button>
                <button class="btn btn-default btn-xs" ng-click="moveTab($index,'left')" ng-class="$index==0?'disabled':''"><i class="fa fa-arrow-left"></i> </button>
                <button class="btn btn-default btn-xs" ng-click="moveTab($index,'right')"  ng-class="$index==data.leftData.length-1?'disabled':''"><i class="fa fa-arrow-right"></i> </button>
                <span>|</span>
                <button class="btn btn-danger btn-xs" ng-click="removeTab($index)"><i class="fa fa-remove"></i></button>
              </div>
            </div>
            <div
              class="title"
              ng-class="{'dualListBox-filters': addfilters}"
            >
              <span>{{data.leftTitle|translate}}</span>
              <span ng-if="addfilters" class="filter-input">
                <input type="text" class="form-control" ng-model="filter.leftFilter" ng-change="filterBox(filter.leftFilter, true)"/>
              </span>
            </div>
            <ul class="list" ui-on-Drop="onDrop($event,$data,tab.fields, false)">
              <li
                ui-draggable="true"
                drag="leftElement"
                on-drop-success="dropSuccessHandler($event,$index,tab.fields)"
                ng-repeat="leftElement in tab.fields track by $index"
              >
                <div
                class="btn btn-xs btn-default"
                ng-click="moveItem(tab.fields,$index,'up')"
                ng-disabled="isFirstItem($index)"
                >
                  <i class="fa fa-arrow-up"></i>
                </div>

                <div
                  type="button"
                  class="btn btn-xs btn-default"
                  ng-click="moveItem(tab.fields,$index,'down')"
                  ng-disabled="isLastItem(tab.fields,$index)"
                >
                  <i class="fa fa-arrow-down"></i>
                </div>
                {{leftElement[data.leftDisplayAttribute]|translate}}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Box without tabs -->
    <div ng-if="data.tabs!=='left'">
      <!-- Titre et filtre de la box -->
      <div class="title"
           ng-class="{'dualListBox-filters': addfilters}">
        <span>{{data.leftTitle|translate}}</span>
        <span ng-if="addfilters">
        <input type="text" class="form-control" ng-model="filter.leftFilter" ng-change="filterBox(filter.leftFilter, true)"/>
      </span>
      </div>

      <ul class="list" ui-on-Drop="onDrop($event,$data,data.leftData, false)">
        <li
          ui-draggable="true"
          drag="leftElement"
          on-drop-success="dropSuccessHandler($event,$index,data.leftData,'left')"
          ng-repeat="leftElement in data.leftData track by $index"
        >
          {{leftElement[data.leftDisplayAttribute]|translate}}
        </li>
      </ul>
    </div>
  </div>

  <!-- Middle part -->
  <div ng-class="{'dualListBox-tabs-margin': data.tabs==='left'}" class="middle-part">
    <button
        type="button"
        class="btn btn-md btn-default"
        title="{{'dualListBox.moveAllToLeft' | translate}}"
        ng-click="moveAllItems(false)"
    >
      <span class="glyphicon glyphicon-arrow-left"></span>
    </button>
    <button
        type="button"
        class="btn btn-md btn-default"
        title="{{'dualListBox.moveAllToRight' | translate}}"
        ng-click="moveAllItems(true)"
    >
      <span class="glyphicon glyphicon-arrow-right"></span>
    </button>
  </div>

  <!-- Right part -->
  <!-- Titre et Filtre -->
  <div class="right-part">
    <div class="title"
         ng-class="{'dualListBox-filters': addfilters}">
      <span>{{data.rightTitle|translate}}</span>
      <span ng-if="addfilters" class="filter-input">
        <input type="text" class="form-control" ng-model="filter.rightFilter" ng-change="filterBox(filter.rightFilter, false)"/>
      </span>
    </div>

    <!-- Box -->
    <ul class="list" ui-on-Drop="onDrop($event,$data,data.rightData, true)" ng-class="{'dualListBox-tabs-margin': data.tabs==='left'}">
      <li
        ui-draggable="true"
        drag="rightElement"
        on-drop-success="dropSuccessHandler($event,$index,data.rightData, 'right')"
        ng-repeat="rightElement in data.rightData track by $index"
      >
        {{rightElement[data.rightDisplayAttribute]|translate}}
      </li>
    </ul>
  </div>
</div>
