<!--
  ~ Copyright (C) 2017 Robert Bosch GmbH Copyright (C) 2017 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-page-content>
  <h2 class="page-heading">Colors</h2>
  <p>
    For more information on when and how to use which color, see the
    <a
      href="https://brandguide.bosch.com/document/337/en#/colors"
      rel="help noopener noreferrer external"
      target="_blank"
      >Bosch Brand Guide</a
    >. If you need the color specifications in your SCSS files import the variables:
    <code>&#64;import '~&#64;bci-web-core/common-styles/sass/bci/colors';</code>
  </p>
  <p>
    If you need them in TypeScript code, import the BOSCH_DDS_COLORS constant
    <code>import &#123; BOSCH_DDS_COLORS &#125; from '&#64;bci-web-core/core';</code>
    <br />
    This page shows what colors are available and property of BOSCH_DDS_COLORS you can use.
  </p>

  <ul>
    <li (click)="scrollIntoViewService.scrollIntoView('brand-section')"><a>Brand colors</a></li>
    <li (click)="scrollIntoViewService.scrollIntoView('basic-section')"><a>Basic colors</a></li>
    <li (click)="scrollIntoViewService.scrollIntoView('accent-section')"><a>Accent colors</a></li>
    <li (click)="scrollIntoViewService.scrollIntoView('functional-section')"><a>Functional colors</a></li>
    <li (click)="scrollIntoViewService.scrollIntoView('gradation-section')"><a>Color gradations</a></li>
  </ul>
  <hr />

  <h3 id="brand-section">Brand color</h3>
  <div style="display: flex; column-gap: 16px; flex-wrap: wrap">
    <mat-card *ngFor="let color of masterBrandColors" class="color-card">
      <div [style.background-color]="color.colorCode" class="color-container"></div>
      <mat-card-content>
        <p style="font-weight: 500">{{ color.name }}</p>
        <p>{{ color.colorCode }}</p>
      </mat-card-content>
    </mat-card>
  </div>
  <hr />

  <h3 id="basic-section">Basic colors</h3>
  <div style="display: flex; column-gap: 16px; flex-wrap: wrap">
    <mat-card *ngFor="let color of neutralColors" class="color-card">
      <div [style.background-color]="color.colorCode" class="color-container"></div>
      <mat-card-content>
        <p style="font-weight: 500">{{ color.name }}</p>
        <p>{{ color.colorCode }}</p>
      </mat-card-content>
    </mat-card>
  </div>
  <hr />

  <h3 id="accent-section">Accent colors</h3>
  <div style="display: flex; column-gap: 16px; flex-wrap: wrap">
    <mat-card *ngFor="let color of accentColors" class="color-card">
      <div [style.background-color]="color.colorCode" class="color-container"></div>
      <mat-card-content>
        <p style="font-weight: 500">{{ color.name }}</p>
        <p>{{ color.colorCode }}</p>
      </mat-card-content>
    </mat-card>
  </div>

  <h3 id="functional-section">Functional colors</h3>
  <div style="display: flex; column-gap: 16px; flex-wrap: wrap">
    <mat-card *ngFor="let color of functionalColors" class="color-card">
      <div [style.background-color]="color.colorCode" class="color-container"></div>
      <mat-card-content>
        <p style="font-weight: 500">{{ color.name }}</p>
        <p>{{ color.colorCode }}</p>
      </mat-card-content>
    </mat-card>
  </div>

  <hr />

  <h3 id="gradation-section">Color gradations</h3>
  <div style="display: flex; column-gap: 16px; flex-wrap: wrap">
    <div *ngFor="let shade of shades" class="shadeColor">
      <h4>{{ shade.name }}</h4>
      <table>
        <tr *ngFor="let color of shade.colors">
          <td [style.background-color]="color.colorCode" id="shadeBg"></td>
          <td style="font-weight: 500">{{ color.name }}</td>
          <td style="font-weight: 300">{{ color.colorCode }}</td>
        </tr>
      </table>
    </div>
  </div>
</bci-page-content>
