@if (isPanelReady()) {
  <crt-interface-designer-properties-panel-wrapper
    [showHeader]="true"
    [headerTitle]="'Rating settings'"
    [canShowTooltip]="true"
  >
    <div class="panel-section">
      <h3 class="section-title">General</h3>

      <div class="input-wrapper">
        <div class="input-field">
          <label for="rating-star-count" class="input-label">Star count</label>
          <input
            id="rating-star-count"
            type="number"
            class="input-control"
            min="1"
            max="10"
            [value]="starCount()"
            (change)="onStarCountChange($event)"
          />
        </div>
      </div>

      <div class="input-wrapper">
        <div class="input-field">
          <label for="rating-size" class="input-label">Size</label>
          <select id="rating-size" class="input-control" [value]="size()" (change)="onSizeChange($event)">
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="large">Large</option>
          </select>
        </div>
      </div>

      <div class="input-wrapper">
        <div class="color-picker-field">
          <label for="rating-active-color" class="input-label">Star color (active)</label>
          <div class="color-picker-control">
            <div class="color-picker-swatch" [style.background-color]="activeColor()"></div>
            <div class="color-picker-arrow">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                <path fill="currentColor" d="M4 7l4 4 4-4z" />
              </svg>
            </div>
            <input
              id="rating-active-color"
              type="color"
              class="color-picker-input"
              [value]="activeColor()"
              (input)="onActiveColorChange($event)"
            />
          </div>
        </div>
      </div>

      <div class="input-wrapper">
        <div class="color-picker-field">
          <label for="rating-inactive-color" class="input-label">Star color (inactive)</label>
          <div class="color-picker-control">
            <div class="color-picker-swatch" [style.background-color]="inactiveColor()"></div>
            <div class="color-picker-arrow">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                <path fill="currentColor" d="M4 7l4 4 4-4z" />
              </svg>
            </div>
            <input
              id="rating-inactive-color"
              type="color"
              class="color-picker-input"
              [value]="inactiveColor()"
              (input)="onInactiveColorChange($event)"
            />
          </div>
        </div>
      </div>

      <div class="input-wrapper">
        <label class="checkbox-label">
          <input type="checkbox" [checked]="visible()" (change)="onVisibleChange($event)" />
          Visible
        </label>
      </div>
    </div>

    <div class="panel-section">
      <h3 class="section-title">Data</h3>

      <div class="input-wrapper">
        <div class="input-field">
          <label for="rating-source" class="input-label">Rating source</label>
          <select
            id="rating-source"
            class="input-control"
            [value]="ratingSource()"
            (change)="onRatingSourceChange($event)"
          >
            <option value="constant">Constant value</option>
            <option value="dataSource">Data source</option>
          </select>
        </div>
      </div>

      @if (ratingSource() === 'constant') {
        <div class="input-wrapper">
          <div class="input-field">
            <label for="rating-value-constant" class="input-label">Rating value</label>
            <input
              id="rating-value-constant"
              type="number"
              class="input-control"
              min="0"
              [max]="starCount()"
              [value]="ratingValueConstant()"
              (change)="onRatingValueConstantChange($event)"
            />
          </div>
        </div>
      } @else {
        <div class="input-wrapper">
          <div class="input-field">
            <label for="rating-ds-name" class="input-label"
              >Data source<span class="required-mark" aria-hidden="true"> *</span></label
            >
            <input
              id="rating-ds-name"
              type="text"
              class="input-control"
              placeholder="Example: PDS"
              required
              aria-required="true"
              [value]="dataSourceName()"
              (input)="onDataSourceNameChange($event)"
            />
          </div>
        </div>

        <div class="input-wrapper">
          <div class="input-field">
            <label for="rating-ds-attribute" class="input-label"
              >Data source attribute<span class="required-mark" aria-hidden="true"> *</span></label
            >
            <input
              id="rating-ds-attribute"
              type="text"
              class="input-control"
              placeholder="Example: UsrRating"
              required
              aria-required="true"
              [value]="dataSourceAttributePath()"
              (input)="onDataSourceAttributePathChange($event)"
            />
          </div>
        </div>
      }

      @if (validationMessage()) {
        <div class="input-wrapper">
          <span role="status" aria-live="polite" class="validation-message" data-testid="rating-panel-validation">{{
            validationMessage()
          }}</span>
        </div>
      }
    </div>

    <div class="panel-section">
      <h3 class="section-title">Behavior</h3>

      <div class="input-wrapper">
        <label class="checkbox-label">
          <input type="checkbox" [checked]="isReadOnly()" (change)="onReadOnlyChange($event)" />
          Read-only
        </label>
      </div>

      <div class="input-wrapper">
        <label class="checkbox-label">
          <input type="checkbox" [checked]="isDisabled()" (change)="onDisabledChange($event)" />
          Disabled
        </label>
      </div>
    </div>
  </crt-interface-designer-properties-panel-wrapper>
}