<app-notice [svg]="'assets/media/svg/icons/Tools/Compass.svg'">
  For more info please check the components's official demos & documentation
  <a
    class="font-weight-bold"
    href="https://ng-bootstrap.github.io/#/components/rating/examples"
    target="_blank"
    >demos & documentation</a
  >
</app-notice>

<div class="row">
  <div class="col-xl-6">
    <app-code-preview [viewItem]="exampleBasicDemo">
      <div class="example-preview">
        <div>
          <ngb-rating [(rate)]="currentRate"></ngb-rating>
          <div class="separator separator-dashed my-6"></div>
          <p>
            Rate: <b>{{ currentRate }}</b>
          </p>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleEventsAndReadonlyRatings">
      <div class="example-preview">
        <div>
          <p>
            Selected: <b>{{ selected }}</b>
          </p>
          <p>
            Hovered: <b>{{ hovered }}</b>
          </p>
          <div class="separator separator-dashed my-6"></div>
          <ngb-rating
            [(rate)]="selected"
            (hover)="hovered = $event"
            (leave)="hovered = 0"
            [readonly]="readonly"
          ></ngb-rating>
        </div>
        <div class="separator separator-dashed my-6"></div>
        <div>
          <button
            class="btn btn-sm btn-{{ readonly ? 'danger' : 'success' }}"
            (click)="readonly = !readonly"
          >
            {{ readonly ? "readonly" : "editable" }}
          </button>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleCustomStarTemplate">
      <p>
        Custom rating template provided as child element
      </p>
      <div class="example-preview">
        <div>
          <ngb-rating [(rate)]="currentRate1">
            <ng-template let-fill="fill" let-index="index">
              <span
                class="star"
                [class.filled]="fill === 100"
                [class.bad]="index < 3"
                >&#9733;</span
              >
            </ng-template>
          </ngb-rating>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>

      <div class="example-preview">
        <div>
          <p>
            Rate: <b>{{ currentRate1 }}</b>
          </p>
        </div>
      </div>
    </app-code-preview>
  </div>
  <div class="col-xl-6">
    <app-code-preview [viewItem]="exampleCustomDecimalRating">
      <p>
        Custom rating template provided via a variable. Shows fine-grained
        rating display
      </p>
      <div class="example-preview">
        <div>
          <ng-template #t let-fill="fill">
            <span class="star2" [class.full]="fill === 100">
              <span class="half" [style.width.%]="fill">&hearts;</span>&hearts;
            </span>
          </ng-template>

          <ngb-rating
            [(rate)]="currentRate2"
            [starTemplate]="t"
            [readonly]="true"
            max="5"
          ></ngb-rating>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>
      <div class="example-preview">
        <div>
          <pre>Rate: <b>{{currentRate2}}</b></pre>
          <button class="btn btn-sm btn-primary" (click)="currentRate2 = 1.35">
            1.35</button
          >&nbsp;
          <button class="btn btn-sm btn-primary" (click)="currentRate2 = 4.72">
            4.72
          </button>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleFormIntegration">
      <p>
        NgModel and reactive forms can be used without the 'rate' binding
      </p>
      <div class="example-preview">
        <div>
          <div class="form-group">
            <ngb-rating [formControl]="ctrl"></ngb-rating>
            <div class="form-text small">
              <div *ngIf="ctrl.valid" class="text-success">Thanks!</div>
              <div *ngIf="ctrl.invalid" class="text-danger">Please rate us</div>
            </div>
          </div>
        </div>

        <p>
          Model:
          <b>{{ ctrl.value }}</b>
        </p>
        <div>
          <button
            class="btn btn-sm btn-{{ ctrl.disabled ? 'danger' : 'success' }}"
            (click)="toggle()"
          >
            {{
              ctrl.disabled ? "control disabled" : " control enabled"
            }}</button
          >&nbsp;
          <button class="btn btn-sm btn-primary" (click)="ctrl.setValue(null)">
            Clear
          </button>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleGlobalConfigurationOfRatings">
      <p>
        This rating uses customized default values.
      </p>
      <div class="example-preview">
        <div>
          <ngb-rating [rate]="3" max="5" [readonly]="true"></ngb-rating>
        </div>
      </div>
    </app-code-preview>
  </div>
</div>
