<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">

    <!-- HEADER -->
    <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="space-between center">
        <h1 class="title">Colors</h1>

        <a md-raised-button class="reference-button md-white-bg"
           href="https://www.google.com/design/spec/style/color.html#color-color-palette"
           target="_blank">
            <md-icon>link</md-icon>
            <span>Reference</span>
        </a>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <md-tab-group class="color-tabs" md-dynamic-height="true" (selectChange)="selectColor($event)">

            <md-tab *ngFor="let color of ['primary', 'accent', 'warn']" label="{{color}}">
                <ng-template md-tab-label>
                    <span class="text-capitalize">{{color}}</span>
                </ng-template>
            </md-tab>

            <md-tab *ngFor="let color of (colors | keys)" label="{{color.key}}">
                <ng-template md-tab-label>
                    <span class="text-capitalize">{{color.key}}</span>
                </ng-template>
            </md-tab>

            <md-tab *ngFor="let color of ['white', 'black']" label="{{color}}">
                <ng-template md-tab-label>
                    <span class="text-capitalize">{{color}}</span>
                </ng-template>
            </md-tab>

        </md-tab-group>

        <div class="color-tabs-content p-24" fxLayout="column">

            <div class="h3 pb-16">Fuse has classes for every single color from
                <a href="https://www.google.com/design/spec/style/color.html#color-color-palette"
                   target="_blank">Material
                    Design Color Palette</a> for your convenient. You can use them with pretty much every
                element.
            </div>

            <div class="color-header colored-bg p-8"
                 [ngClass]="'md-'+selectedColor+'-bg'"
                 fxLayout="column">
                <div class="p-8">
                    <h3 class="text-capitalize">{{selectedColor}}</h3>
                </div>
                <div class="p-8" fxLayout="row">

                    <div fxFlex="30" fxLayoutAlign="start center">500</div>

                    <div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-bg'" fxFlex="30">
                        <div class="pb-4">.{{'md-'+selectedColor+'-bg'}}</div>
                        <div class="secondary-text pb-4">.secondary-text</div>
                        <div class="hint-text pb-4">.hint-text, .disabled-text</div>
                        <div class="divider">.divider</div>
                    </div>

                    <div fxFlex="30">
                    </div>

                    <div fxFlex="128px">
                        {{selectedColorDefaultValue}}
                    </div>
                </div>
            </div>

            <div class="color" fxLayout="column" fxFlex="1 0 auto" *ngIf="selectedColor != 'black' && selectedColor != 'white'">

                <div class="colored-bg p-8"
                     *ngFor="let hue of ['50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700']"
                     fxFlex="1 0 auto" fxLayout="row" fxLayout.sm="column"
                     [ngClass]="selectedColor+'-'+hue+'-bg'">

                    <div class="p-8" fxFlex="30" fxLayoutAlign="start center">{{hue}}</div>

                    <div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex="30">
                        <div class="pb-4">.{{'md-'+selectedColor+'-'+hue+'-bg'}}</div>
                        <div class="secondary-text pb-4">.secondary-text</div>
                        <div class="hint-text pb-4">.hint-text, .disabled-text</div>
                        <div class="divider">.divider</div>
                    </div>

                    <div class="p-8" fxFlex="30" fxLayoutAlign="start center">.{{selectedColor+'-'+hue+'-bg'}}</div>

                    <div class="fg-box mat-elevation-z2 p-8"
                         [ngClass]="selectedColor+'-'+hue+'-fg'" fxFlex="128px" fxLayoutAlign="center center">
                        .{{selectedColor+'-'+hue+'-fg'}}
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- / CONTENT -->
</div>
