<div style="width:300px;">

    <!--gestionnaire de tab-->
  <div bs-active-pane="tabs.activeTab"  ng-model="tabs.activeTab"  bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title | translate}}"  bs-pane></div>
  </div>
  <!--Tab no 1 gestions des couche-->
  <div  ng-hide="tabs.activeTab != 0">
      <div class="row">
        <div class="col-xs-12">
            <label><translate>layermanager.transparency</translate> - <b>{{ layeropacity.value }} %</b></label>
            <div range-slider
                 min="0"
                 max="100"
                 model-max="layeropacity.value"
                 pin-handle="min"
                 class="lightslider"></div>
        </div>
    </div>
   <div class="input-group" ng-repeat="(key, value) in theConfig">
    <span class="input-group-addon">
      <input type="checkbox" aria-label="..." ng-model="theConfig[key].check" ng-click="getCheckedTrue(key)">
    </span>
    <input type="text" class="form-control" aria-label="..." ng-model="key" disabled="true">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button" ng-click="remove(key)"><span class="glyphicon glyphicon-remove" ></span></button>
      </span>
    </div>
  </div>

</div>
<!tabN-->
<div ng-hide="tabs.activeTab != 1" style="height:300px;overflow:auto;width:350px;">

  <div>
    <translate>dynamicstyle.Name</translate>
    <input type="text" ng-model="current.name"/>
  </div>
  <div>
    <translate>dynamicstyle.Url</translate>
    <input type="text" ng-model="current.wsURL"/>
  </div>
  <div>
    <translate>dynamicstyle.DescribeData</translate>
    <input type="text" ng-model="current.describeData"/>
  </div>
  <div>
    <button type="button" class="btn btn-default"  title="Configuration" ng-click="refreshData(current.wsURL,current.describeData)"><translate>dynamicstyle.RefreshData</translate></button>

  </div>
  <translate>dynamicstyle.Component</translate>
  <div model-component geomtype="" res="current.fti"> </div>
  <div>
    <translate>dynamicstyle.Attribute Value</translate>
  </div>
  <div>
    <select  class="form-control" ng-model="current.resultAttr" ng-if="resultData" ng-change="verifyTypeofData(current.resultAttr);sresultAttr(current.resultAttr)" >
      <option ng-repeat="(header, value) in resultData[0]"

      value="{{header}}">
      {{header}}</option>
    </select>
  </div>
  <div>
    <select  class="form-control" ng-model="current.attrLinkWS" ng-if="resultData" ng-change="sattrLinkWS(current.attrLinkWS)" >
      <option ng-repeat="(header, value) in resultData[0]"

      value="{{header}}">
      {{header}}</option>
    </select>
  </div>
  <div>
    <select  class="form-control" ng-model="current.attrLink" ng-change="sattrLink(current.attrLink)" >
      <option ng-repeat="att in current.fti.attributes"

      value="{{att.name}}">
      {{att.name}}
    </option>
  </select>
</div>
<div>
  <translate>dynamicstyle.Max_Value</translate>
  <input type="number" ng-model="current.maxValue"/>
</div>
<div>
  <translate>dynamicstyle.Min_Value</translate>
  <input type="number" ng-model="current.minValue"/>
</div>
<div>
  <translate>dynamicstyle.Iteration</translate>
  <input type="number" ng-model="current.iteration"/>
</div>



<div class="category_input">
  <div class="btn btn-default btn-xs pull-right" id="palette_picker" ng-click="openPalettesLibrary()">
    <i class="fa fa-columns"></i>
  </div>
  <label><translate>model.styles.editor.category.palette</translate></label>
  <palette-viewer palette="currentPalette.data"></palette-viewer>
</div>
<div>
  <button type="button" class="btn btn-default"  title="Calculate" ng-click="calculate(current.iteration)"><translate>dynamicstyle.Calculate</translate></button>
</div>
<div style="height:150px;overflow:auto">
  <table style"height:200px">
    <thead>
      <tr>
        <th ng-repeat="(header, value) in current.interv[0]">
          {{header}}
        </th>
      </tr>
    </thead>
    <tbody>
     <tr ng-repeat="row in current.interv">

      <td >
       <div style="background:{{row['hexa']}};width:25px;height:20px" >
       </div>

     </td>
     <td >
     <input type="number" ng-model="row['min']">


    </td>
         <td >
     <input type="number" ng-model="row['max']">


    </td>
  </tr>

</tbody>
</table>
</div>
<div>
  <button type="button" class="btn btn-default"  title="Apply To Map" ng-click="applytoMap()"><translate>dynamicstyle.Apply_to_Map</translate></button>
  <button type="button" class="btn btn-default"  title="Apply To Map" ng-click="Save(current.name)"><translate>dynamicstyle.Save</translate></button>
  <button type="button" class="btn btn-default"  title="Reset" ng-click="resetWidget()"><translate>dynamicstyle.reset</translate></button>
</div>
</div>


<!--button type="button" class="btn btn-default" ng-hide="mode!='config'" title="Configuration" ng-click="refreshData()">refreshData</button>

<thead>
  <tr>
    <th ng-repeat="(header, value) in resultData[0]">
      {{header}}
    </th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="row in resultData">
    <td ng-repeat="cell in row">
      {{cell}}
    </td>
  </tr>
</tbody!-->
