<div class="row" ng-if="ruletypepossibilities">
    <div class="col-xs-8">
        <label>
            <translate>model.styles.editor.rule.symbol_type.title</translate>
        </label>
        <button type="button" class="btn btn-default form-control" ng-model="component.symbolType" ng-change="switchRuleSymbolType()" data-html="1" bs-options="x.key as ('model.styles.editor.rule.symbol_type.'+x.key) | translate for x in ruletypepossibilities[selectsymbol.type]" bs-select>
        </button>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-6">
                <label>
                    <translate>model.styles.editor.symbolizers.common.stroke.color</translate>
                </label>
                <xgos-colour-picker colour="(component.Stroke | cssParam:'stroke')['__text']"></xgos-colour-picker>
            </div>
        </div>
    </div>
    <div class="col-xs-12" ng-if="usehash">
        <div class="row">
            <div class="col-xs-6">
                <label>
                    <translate>model.styles.editor.symbolizers.hash.color</translate>
                </label>
                <xgos-colour-picker colour="(component.Fill | cssParam:'hash-color')['__text']"></xgos-colour-picker>
            </div>
        </div>
        <label>
            <translate>model.styles.editor.symbolizers.hash.label</translate>
        </label>
        <div class="btn btn-default" data-placement="bottom" style="background-image: {{selectedHashBgrd}}" data-template="js/XG/widgets/mapapp/style/views/symbolizer/sldpolygonsymbolizerhashing.html" data-animation="am-fade-and-scale" data-auto-close="true" bs-popover>
            {{component.hashtemplate}}
        </div>
    </div>
    <div class="col-xs-12">
        <label>
            <translate>model.styles.editor.symbolizers.common.stroke.type</translate>
        </label>
        <button type="button" class="btn btn-default form-control" ng-model="stroke.type" ng-change="changeStrokeType()" data-html="1" bs-options="x.key as x.label | translate for x in stroke.types" bs-select>
        </button>
    </div>
    <div class="col-xs-12">
        <label>
            <translate>model.styles.editor.symbolizers.common.stroke.width</translate>
        </label>
        <number-input-with-text-value ng-model="(component.Stroke | cssParam:'stroke-width')['__text']" 
                                      min="1" max="20"
                                      ng-disabled="!component.Stroke" />
    </div>
    <div class="col-xs-12">
        <label>
            <translate>model.styles.editor.symbolizers.line.linejoin.title</translate>
        </label>
        <button type="button" class="btn btn-default form-control" ng-model="(component.Stroke | cssParam:'stroke-linejoin')['__text']" data-html="1" bs-options="x.key as x.label | translate for x in lineJoinOptions" ng-disabled="!component.Stroke" bs-select>
        </button>
    </div>
</div>
<div class="row" ng-if="component.componentShowHide && !isannotation">
    <div class="col-xs-12">
        <label translate>model.styles.editor.symbolizers.unit.select</label>
        <select class="form-control" ng-model="component._uom">
            <option value="" translate>model.styles.editor.symbolizers.unit.meter</option>
            <!--Quand pixel sera géré on ajoutera une value-->
            <option value="" translate>model.styles.editor.symbolizers.unit.px</option>
        </select>
    </div>
</div>
