<div class="elementFiliereDialog">
  <h3 class="modalTitle">
    Filière
  </h3>
  <div class="modalBody ">
    <div class="row spbrow">
      <div class="col-xs-4">
        <label class="control-label">Type</label>
        <select
          class="form-control"
          ng-options="filiere.id as filiere.properties.nom for filiere in FiliereTypeFeatures"
          ng-model="currentElement.properties.id_type"
          ng-change="setUpdateLayerGroup('{{currentElement.properties.id_type}}')"
        ></select>
      </div>
      <div class="col-xs-4">
        <label class="control-label">Composant</label>
        <select
          class="form-control"
          ng-options="feature.name as feature.name for feature in featureTypesList | filter:feature.name='kis_anc_ef'"
          ng-model="currentElement.properties.identifiant"
        ></select>
      </div>
      <div class="col-xs-4">
        <label class="control-label">Alias</label>
        <input
          type="text"
          class="form-control"
          ng-model="currentElement.properties.alias"
        />
      </div>
    </div>
    <div class="row spbrow">
      <!-- <div class="col-xs-6" ng-show="!currentElement.geometry">
                <label class="control-label">Geometrie</label>
                <select class="form-control" ng-options="geometrie as geometrie for geometrie in ['POINT','LineString','Polygon']"
                    ng-model="currentElement.properties.geometrie"></select>
            </div> -->
    </div>

    <div class="row">
      <div class="col-xs-12">
        <label class="control-label">Représentation schématique</label>
      </div>
    </div>

    <div>
      <div class="row" ng-if="currentElementRepresentations.length<=5">
        <div class="col-xs-12">
          <button
            type="button"
            class="btn btn-xs btn-default pull-right"
            ng-click="addRepresentationToFiliere()"
          >
            Ajouter
          </button>
        </div>
      </div>
      <div class="row representationFiliere">
        <div class="col-xs-12">
          <table class="table table-bordered">
            <tr>
              <th class="col-xs-6">Image</th>
              <!--          <th class="col-xs-4">Url</th>-->
              <th class="col-xs-6"></th>
            </tr>
            <tr
              ng-repeat="url in currentElementRepresentations track by $index"
            >
              <td class="text-center">
                <div>
                  <img class="thmb" ng-src="{{url}}" ng-if="url&&url!=''" />
                </div>
              </td>
              <!--               <td>
                                        <input type="text" class="form-control" ng-model="url" disabled>
                                    </td>-->
              <td class="text-center">
                <span class="input-group-btn">
                  <button
                    class="btn btn-default"
                    type="button"
                    ng-click="pickRepresentationElementFiliere($index)"
                  >
                    Choisir...
                  </button>
                  <div
                    class="btn btn-sm btn-danger"
                    ng-click="removeRepresentationToFiliere($index)"
                    ng-disabled="$index==0"
                  >
                    <i class="fa fa-times"></i>
                  </div>
                </span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div ng-if="repVectorielleEfActive">
      <div class="row">
        <div class="col-xs-12">
          <button
            type="button"
            class="btn btn-xs btn-primary pull-right"
            ng-click="addRepresentationVectorielleToFiliere()"
          >
            <i class="fa fa-book"></i> Bibliothèque de symboles
          </button>

          <label class="control-label">Représentation symbolique</label>
        </div>
      </div>
      <div class="row representationFiliereVectorielle">
        <div class="col-xs-12">
          <table class="table table-bordered">
            <tr>
              <th class="col-xs-6">Représentation</th>
              <th class="col-xs-6"></th>
            </tr>
            <tr
              ng-repeat="x in currentElementRepresentationsVectorielles track by $index"
            >
              <td class="text-center">
                <anc-edit-dessin-filiere
                  modele-name="x.modele"
                  editable="false"
                  zoom-on-feature="true"
                ></anc-edit-dessin-filiere>
              </td>
              <!--               <td>
                                                                <input type="text" class="form-control" ng-model="url" disabled>
                                                            </td>-->
              <td class="text-left">
                <div>
                  <label> Nom </label>
                  <input
                    type="text"
                    ng-model="x.label"
                    class="form-control"
                    disabled
                  />
                </div>

                <div
                  class="btn btn-sm btn-danger text-center"
                  style="margin-top: 5px;"
                  ng-click="removeRepresentationVectorielle($index)"
                >
                  <i class="fa fa-times"></i> Supprimer la liaison avec ce
                  symbole
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 text-right">
        <hr />

        <button
          type="button"
          class="btn btn-default"
          ng-click="addUpdateElementFiliere()"
        >
          Enregistrer
        </button>
      </div>
    </div>
  </div>
</div>
