<div
  class="row"
  ng-init="textSymbolizer.Font = textSymbolizer.Font ? textSymbolizer.Font : {'CssParameter': []} "
>
  <div class="col-xs-12">
    <label>
      <translate>model.styles.editor.symbolizers.text.text.font</translate>
    </label>
    <select
      ng-model="(textSymbolizer.Font | cssParam:'font-family')['__text']"
      class="form-control"
    >
      <optgroup
        label="{{ 'model.styles.editor.symbolizers.text.text.common_fonts' | translate}}"
      >
        <option
          ng-repeat="font in availableFonts"
          ng-if="commonFonts.indexOf(font)!=-1"
          >{{font}}</option
        >
      </optgroup>
      <optgroup
        label="{{ 'model.styles.editor.symbolizers.text.text.all_fonts' | translate}}"
      >
        <option ng-repeat="font in availableFonts">{{font}}</option>
      </optgroup>
    </select>
  </div>

  <div class="col-xs-12">
    <label>
      <translate
        >model.styles.editor.symbolizers.text.text.style.title</translate
      >
    </label>
    <button
      type="button"
      class="btn btn-default form-control"
      ng-model="(textSymbolizer.Font | cssParam:'font-style')['__text']"
      data-html="1"
      bs-options="style.key as style.label | translate for style in fontStyles"
      bs-select
    ></button>
  </div>

  <div class="col-xs-12">
    <label>
      <translate
        >model.styles.editor.symbolizers.text.text.weight.title</translate
      >
    </label>
    <button
      type="button"
      class="btn btn-default form-control"
      ng-model="(textSymbolizer.Font | cssParam:'font-weight')['__text']"
      data-html="1"
      bs-options="weight.key as weight.label | translate for weight in fontWeights"
      bs-select
    ></button>
  </div>

  <div class="col-xs-12">
    <label>
      <translate>model.styles.editor.symbolizers.text.text.size</translate>
    </label>
    <input
      type="text"
      class="form-control"
      ng-model="(textSymbolizer.Font | cssParam:'font-size')['__text']"
    />
  </div>

  <div class="col-xs-12">
    <label translate>model.styles.editor.symbolizers.unit.select</label>
    <select class="form-control" ng-model="textSymbolizer._uom">
      <option value="" translate
        >model.styles.editor.symbolizers.unit.px_default</option
      >
      <option value="http://www.opengeospatial.org/se/units/metre" translate
        >model.styles.editor.symbolizers.unit.meter
      </option>
    </select>
  </div>
</div>
