<div style="width:300px">
  <div
    model-component
    geom-exclude="NG"
    res="selectfti"
    style="padding-bottom:20px;"
  ></div>

  <div id="esri_style_buttons">
    <button
      class="btn btn-info"
      type="button"
      ng-click="defineStyle()"
      ng-disabled="selectfti == null"
    >
      <translate>esrisymbolstyle.symbol_button</translate>
    </button>

    <button
      class="btn btn-warning"
      type="button"
      ng-click="defineLabel()"
      ng-disabled="selectfti == null"
    >
      <translate>esrisymbolstyle.label_button</translate>
    </button>
  </div>

  <div id="esri_style_saved_params" class="row">
    <div class="col-md-12" ng-repeat="savedStylesParam in savedStylesParams">
      <div class="input-group" style="padding:0;">
        <input
          type="text"
          ng-model="savedStylesParam.name"
          ng-disabled="true"
          placeholder="{{savedStylesParam.name}}"
          class="form-control"
        />

        <span class="input-group-btn">
          <button
            type="button"
            ng-click="loadSavedStylesParam(savedStylesParam)"
            title="{{ 'esrisymbolstyle.edit_saved_style' | translate }}"
            class="btn btn-default btn-md"
          >
            <i class="fa fa-edit"></i>
          </button>

          <button
            type="button"
            ng-click="removeSavedStylesParam(savedStylesParam)"
            title="{{ 'esrisymbolstyle.delete_saved_style' | translate }}"
            class="btn btn-danger btn-md"
          >
            <i class="fa fa-trash"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>
