<div class="formgrid grid" *ngIf="style">
    <div class="field col-12">
        <label class="text-gray-600 ">
            {{ 'CSS_STYLE.BORDER' | translate }}
        </label>

        <div class="formgrid grid">
            <div class="field col-12 md:col-3">
                <label class="text-gray-600 font-normal font-italic">
                    {{ 'CSS_STYLE.BORDER_WIDTH' | translate }}
                    <input id="heightInput" type="text" class="w-full" [(ngModel)]="style!.borderWidth" (ngModelChange)="styleChange.emit(style)" pInputText placeholder="{{ 'CSS_STYLE.PX_PLACEHOLDER' | translate }}" />
                </label>
            </div>

            <div class="field col-12 md:col-3">
                <label class="text-gray-600 font-normal font-italic">
                    {{ 'CSS_STYLE.BORDER_STYLE' | translate }}
                    <p-dropdown [options]="borderStyles" (ngModelChange)="styleChange.emit(style)" [(ngModel)]="style!.borderStyle" optionLabel="label" optionValue="id"></p-dropdown>
                </label>
            </div>

            <div class="field col-12 md:col-3">
                <label class="text-gray-600 font-normal font-italic">
                    {{ 'CSS_STYLE.BORDER_RADIUS' | translate }}
                    <input type="text" class="w-full" (ngModelChange)="styleChange.emit(style)" [(ngModel)]="style!.borderRadius" pInputText placeholder="{{ 'CSS_STYLE.PX_PLACEHOLDER' | translate }}" />
                </label>
            </div>

            <div class="field col-12 md:col-3">
                <label class="text-gray-600 font-normal font-italic">
                    {{ 'CSS_STYLE.BORDER_COLOR' | translate }}
                    <br/>
                    <p-colorPicker id="backgroundColor" (ngModelChange)="styleChange.emit(style)" [(ngModel)]="style!.borderColor"></p-colorPicker>
                </label>
            </div>
        </div>

        <label class="text-gray-600 w-full">
            {{ 'CSS_STYLE.FONT' | translate }}
        </label>

        <div class="formgrid grid">
            <div class="field col-12 md:col-6">
                <label class="text-gray-600 font-normal font-italic">
                    {{ 'CSS_STYLE.FONT_SIZE' | translate }}
                    <input type="text" class="w-full" (ngModelChange)="styleChange.emit(style)" [(ngModel)]="style!.fontSize" pInputText placeholder="{{ 'CSS_STYLE.PX_PLACEHOLDER' | translate }}" />
                </label>
            </div>

            <div class="field col-12 md:col-6">
                <label class="text-gray-600 font-normal font-italic">
                    {{ 'CSS_STYLE.FONT_COLOR' | translate }}
                    <br />
                    <p-colorPicker class="w-full" (ngModelChange)="styleChange.emit(style)" [(ngModel)]="style!.color"></p-colorPicker>
                </label>
            </div>
        </div>
    </div>

    <div class="field col-12">
        <label class="text-gray-600">
            {{ 'CSS_STYLE.BACKGROUND_COLOR' | translate }}
            <br/>
            <p-colorPicker id="backgroundColor" (ngModelChange)="styleChange.emit(style)" [(ngModel)]="style!.backgroundColor"></p-colorPicker>
        </label>
    </div>

    <div class="field col-12">
        <label class="text-gray-600">
            {{ 'CSS_STYLE.PADDING' | translate }}
            <input type="text" class="w-full" (ngModelChange)="styleChange.emit(style)" [(ngModel)]="style!.padding" pInputText placeholder="{{ 'CSS_STYLE.PX_PLACEHOLDER' | translate }}" />
        </label>
    </div>

</div>