<div id="biztopology-config">
  <div>
    <div class="themes">
      <div>Thème</div>
      <select
          class="form-control"
          ng-model="config.theme"
          ng-change="retrieveComponents()"
          ng-options="theme for theme in themes | orderBy:'toString()'">
        <option value="" disabled selected hidden
                translate>model.featuretypes.actions.choisir
        </option>
      </select>
    </div>
  </div>

  <!-- ONGLETS -->
  <div
      bs-active-pane="assbizrules.activeTab"
      ng-model="assbizrules.activeTab"
      bs-tabs>
    <div
        ng-repeat="tab in tabs"
        title="{{ tab.title }}"
        class="tab-header"
        bs-pane></div>
  </div>

  <!-- PANNEAU DE L'ONGLET REGLES POUR PONCTUELLES -->
  <div class="tab-container"
       ng-show="assbizrules.activeTab === 0">
    <div class="comp-selection">
      <button
          type="button"
          class="btn btn-xs btn-info"
          title="Ajouter le composant à la liste de règles"
          ng-click="createEmptyRule()">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
      </button>
      <div class="select-component">
        <select
            class="comp-select"
            ng-model="draft.selectedPointComponent"
            ng-options="feature.alias for feature in configFeaturesPoints track by feature.uid">
          <option
              value=""
              disabled selected>
            {{'biztopology.config.components' | translate}}
          </option>
        </select>
      </div>
    </div>
    <table
        ng-if="config.rules.points.length>0"
        class="config-table">
      <tr class="config-table_headers">
        <th>{{'biztopology.config.component' | translate}}</th>
        <th>{{'biztopology.config.rules' | translate}}</th>
        <th>{{'biztopology.config.components' | translate}}</th>
        <th>{{'biztopology.config.action' | translate}}</th>
      </tr>
      <tr ng-repeat="rule in config.rules.points">
        <td class="rule-component">{{rule.component.alias}}</td>
        <td>
          <select
              class="operation-select"
              ng-model="rule.operation"
              ng-options="operation.alias for operation in pointOperations track by operation.id">
          </select>
        </td>
        <td>
          <select
              class="rule-targets"
              ng-model="rule.targetComponents"
              multiple="true"
              ng-options="target.alias for target in configFeaturesLines track by target.uid">
          </select>
        </td>
        <td>
          <button
              type="button"
              class="btn btn-xs btn-danger"
              ng-click="removeRule(rule.uuid)">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
        </td>
      </tr>
    </table>
  </div>

  <!-- PANNEAU DE L'ONGLET REGLES POUR LINEAIRES -->
  <div
      class="tab-container"
      ng-show="assbizrules.activeTab === 1">
    <div class="comp-selection">
      <button
          type="button"
          class="btn btn-xs btn-info"
          title="Ajouter le composant à la liste de règles"
          ng-click="createEmptyRule()">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
      </button>
      <div class="select-component">
        <select
            class="comp-select"
            ng-model="draft.selectedLineComponent"
            ng-options="feature.alias for feature in configFeaturesLines track by feature.uid">
          <option
              value=""
              disabled selected>
            {{'biztopology.config.components' | translate}}
          </option>
        </select>
      </div>
    </div>
    <table
        ng-if="config.rules.lines.length>0"
        class="config-table">
      <tr class="config-table_headers">
        <th>{{'biztopology.config.component' | translate}}</th>
        <th>{{'biztopology.config.rules' | translate}}</th>
        <th>{{'biztopology.config.components' | translate}}</th>
        <th>{{'biztopology.config.action' | translate}}</th>
      </tr>
      <tr ng-if="config.rules.lines.length>0"
        ng-repeat="rule in config.rules.lines">
        <td class="rule-component">{{rule.component.alias}}</td>
        <td>
          <select
              ng-model="rule.operation"
              ng-options="operation.alias for operation in lineOperations track by operation.id">
          </select>
        </td>
        <td>
          <select
              class="rule-targets maxWidth200"
              ng-model="rule.targetComponents"
              multiple="true"
              ng-options="target.alias for target in configFeaturesPoints track by target.uid">
          </select>
        </td>
        <td>
          <button type="button" class="btn btn-xs btn-danger" ng-click="removeRule(rule.uuid)">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
        </td>
      </tr>
    </table>
  </div>

  <div class="row">
    <div class="currentView">
      <span>Limiter l'analyse à la vue courante</span>
      <span>
        <input type="checkbox"
               ng-model="config.currentView"
               title="{{'biztopology.currentView' | translate}}">
      </span>
    </div>
    <div class="col-xs-12 text-right">
      <div
          class="btn btn-primary"
          ng-click="confirm('Confirmation')">
        <translate>geolocalisation.ConfigSave</translate>
      </div>
    </div>
  </div>
</div>