<div class="modalBody editFeature">
  <div class="row">
    <div class="col-xs-12">
      <label translate>annotations.name</label>
      <input
        type="text"
        class="form-control"
        ng-model="editedFeature.properties.name"
      />
    </div>
  </div>
  <div ng-switch="editedFeature.properties.featureType">
    <!-- Feature type : Point -->
    <div ng-switch-when="Point" class="row">
      <div class="col-xs-6">
        <label translate>annotations.color</label>
        <xgos-colour-picker
          colour="editedStyle.image.fill.color"
        ></xgos-colour-picker>
      </div>
      <div class="col-xs-6">
        <label translate>annotations.size</label>
        <div
          range-slider
          min="1"
          max="100"
          model-max="editedStyle.image.radius"
          pin-handle="min"
        ></div>
      </div>
    </div>
    <!-- Feature type : LineString -->
    <div ng-switch-when="LineString" class="row">
      <div class="col-xs-6">
        <label translate>annotations.color_trait</label>
        <xgos-colour-picker
          colour="editedStyle.stroke.color"
        ></xgos-colour-picker>
      </div>
      <div class="col-xs-6">
        <label translate>annotations.epaisseur_line</label>
        <div
          range-slider
          min="1"
          max="100"
          model-max="editedStyle.stroke.width"
          pin-handle="min"
        ></div>
      </div>
    </div>
    <!-- Feature type : Polygon -->
    <div ng-switch-when="Polygon">
      <div class="row">
        <div class="col-xs-6">
          <label translate>annotations.remplissage</label>
          <xgos-colour-picker
            colour="editedStyle.fill.color"
          ></xgos-colour-picker>
        </div>
        <div class="col-md-6">
          <label translate>annotations.opacity</label>
          <div
            range-slider
            min="0"
            max="100"
            model-max="editedStyle.opacity"
            pin-handle="min"
          ></div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <label translate>annotations.color_trait</label>
          <xgos-colour-picker
            colour="editedStyle.stroke.color"
          ></xgos-colour-picker>
        </div>
        <div class="col-xs-6">
          <label translate>annotations.epaisseur_line</label>
          <div
            range-slider
            min="1"
            max="100"
            model-max="editedStyle.stroke.width"
            pin-handle="min"
          ></div>
        </div>
      </div>
    </div>
    <!-- Feature type : Text -->
    <div ng-switch-when="text">
      <div class="row">
        <div class="col-xs-12">
          <label translate>annotations.texte</label>
          <textarea class="form-control" ng-model="editedStyle.text"></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4">
          <label translate>annotations.color_popup</label>
          <xgos-colour-picker
            colour="editedStyle.backgroundColor"
          ></xgos-colour-picker>
        </div>
        <div class="col-xs-4">
          <label translate>annotations.color_texte</label>
          <xgos-colour-picker
            colour="editedStyle.textColor"
          ></xgos-colour-picker>
        </div>
        <div class="col-xs-4">
          <label translate>annotations.opacity</label>
          <div
            range-slider
            min="0"
            max="100"
            model-max="editedStyle.opacity"
            pin-handle="min"
          ></div>
        </div>
      </div>
    </div>
    <!-- Feature type : Label -->
    <div ng-switch-when="Label">
      <div class="row">
        <div class="col-xs-12">
          <label translate>annotations.texte</label>
          <textarea
            class="form-control"
            ng-model="editedStyle.text.text"
          ></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4">
          <label translate>annotations.color_texte</label>
          <xgos-colour-picker
            colour="editedStyle.text.fill.color"
          ></xgos-colour-picker>
        </div>
        <div class="col-xs-4">
          <label translate>annotations.color_outline</label>
          <xgos-colour-picker
            colour="editedStyle.text.stroke.color"
          ></xgos-colour-picker>
        </div>
        <div class="col-xs-4">
          <label translate>annotations.rotation</label>
          <div
            range-slider
            filter="showDegrees"
            decimal-places="10"
            min="0"
            max="6.28318530718"
            model-max="editedStyle.text.rotation"
            pin-handle="min"
          ></div>
          <!-- 6.283... = 2*PI -->
        </div>
      </div>
    </div>
    <!-- Feature type : Symbol -->
    <div ng-switch-when="Symbol" class="row">
      <div class="col-xs-12">
        <label translate>annotations.symbole</label>
        <image-library-picker
          image-picked="setImage(data)"
          image-selected="imageSelected"
        ></image-library-picker>
      </div>
      <div class="col-xs-6">
        <label translate>annotations.size</label>
        <div class="input-group">
          <span
            class="input-group-addon"
            style="width:85%;padding: 0px; color: transparent;text-align: center; background-color: transparent; border: 0px transparent;"
          >
            <div
              range-slider
              min="0.01"
              step="0.01"
              decimal-places="2"
              max="10"
              model-max="editedStyle.image.scale"
              pin-handle="min"
              style="width:100%;"
            ></div>
          </span>
          <input
            type="number"
            class="form-control ngrs-range-slider"
            step="0.01"
            placeholder=""
            aria-label=""
            aria-describedby="basic-addon1"
            style="height: 28px; margin-top: 2px;"
            ng-model="editedStyle.image.scale"
          />
        </div>
      </div>
      <div class="col-xs-6">
        <label translate>annotations.rotation</label>
        <div class="input-group">
          <span
            class="input-group-addon"
            style="width:85%;padding: 0px; color: transparent;text-align: center; background-color: transparent; border: 0px transparent;"
          >
            <div
              range-slider
              filter="showDegrees"
              decimal-places="10"
              min="0"
              max="6.28318530718"
              model-max="editedStyle.image.rotation"
              on-handle-up="convertDegrees(editedStyle.image.rotation, true)"
              pin-handle="min"
            ></div>
            <!-- 6.283... = 2*PI -->
          </span>
          <input
            type="number"
            class="form-control ngrs-range-slider"
            ng-change="convertDegrees(editedStyle.image.convertedRotation)"
            placeholder=""
            aria-label=""
            aria-describedby="basic-addon2"
            decimal-places="10"
            min="0"
            max="360"
            style="height: 28px; margin-top: 2px;"
            ng-model="editedStyle.image.convertedRotation"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 text-right">
      <hr />
      <div class="btn btn-primary" ng-click="applyFeatureModifications()">
        <translate>common.save</translate>
      </div>
    </div>
  </div>
</div>
