@if (isPanelReady()) {

    <crt-interface-designer-properties-panel-wrapper
        [headerTitle]="'Rating settings'"
        [showHeader]="true"
        [canShowTooltip]="true"
    >
        <div class="section">
            <h4 class="section-title">General</h4>
            <div class="form-field">
                <label class="field-label" for="max-stars-input">Star count</label>
                <input
                    id="max-stars-input"
                    type="number"
                    class="field-input"
                    placeholder="Max star count"
                    [value]="maxStars()"
                    (change)="handlePropertyChange($event, maxStars, 'maxStars')"
                />
            </div>
            <div class="form-field">
                <label class="field-label" for="filled-color-input">
                    Star color (active)
                    <input
                        id="filled-color-input"
                        type="color"
                        [value]="filledColor()"
                        (change)="handlePropertyChange($event, filledColor, 'filledColor')"
                    />
                </label>
            </div>
            <div class="form-field">
                <label class="field-label" for="data-source-input">Data source</label>
                <input
                    id="data-source-input"
                    type="text"
                    class="field-input"
                    placeholder="Data source name"
                    [value]="dataSourceName()"
                    (change)="handlePropertyChange($event, dataSourceName, 'dataSourceName')"
                />
            </div>
            <div class="form-field">
                <label class="field-label" for="data-source-attribute-input">Data source attribute</label>
                <input
                    id="data-source-attribute-input"
                    type="text"
                    class="field-input"
                    placeholder="Data source attribute name"
                    [value]="dataSourceAttributeName()"
                    (change)="handlePropertyChange($event, dataSourceAttributeName, 'dataSourceAttributeName')"
                />
            </div>
        </div>
        <hr class="section-divider" />
        <div class="section">
            <h4 class="section-title">Advanced</h4>
            <div class="form-field">
                <label class="field-label" for="element-code-input">Element code</label>
                <input id="element-code-input" disabled type="text" class="field-input" [value]="elementCode()" />
            </div>
        </div>
    </crt-interface-designer-properties-panel-wrapper>
}