D-Net

import {Component} from '@angular/core';

import {Breadcrumb} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.component';

import {member, team} from './team';

@Component({

  selector: 'team',

  template: `

    <div>

      <div class="uk-section">

        <div class="uk-margin-large-left uk-margin-medium-bottom">

          <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>

        </div>

        <div class="uk-container">

          <h2 class="uk-text-center">Meet The Team</h2>

          <div class="uk-padding-small">

            <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1 uk-margin-large-top" uk-grid>

              <div *ngFor="let member of team;" class="uk-card uk-card-flip" [class.uk-active]="member.active === true">

                <div class="uk-card-flip-inner">

                  <div class="front">

                    <div class="uk-padding">

                      <div class="uk-text-center">

                        <img [src]="'assets/graph-assets/about/team/' + member.photo">

                        <div class="uk-margin-medium-top role">

                          <h6 class="portal-color">{{member.name}}</h6>

                          <div class="uk-text-muted">

                            {{member.role}}

                          </div>

                        </div>

                      </div>

                    </div>

                    <div class="uk-position-bottom-center uk-margin-bottom">

                      <a class="portal-link" (click)="member.active = true">Learn more</a>

                    </div>

                  </div>

                  <div class="back">

                    <div class="uk-padding">

                      <div class="uk-text-center">

                        <img [src]="'assets/graph-assets/about/team/' + member.photo">

                        <div class="uk-margin-medium-top">

                          <h6 class="uk-text-center portal-color">{{member.name}}</h6>

                        </div>

                      </div>

                      <div class="uk-margin-small-bottom">

                        <span class="uk-text-bold">Role: </span> {{member.role}}

                      </div>

                      <div class="uk-margin-small-bottom">

                        <span class="uk-text-bold">Affiliation: </span> {{member.affiliation}}

                      </div>

                      <div>

                        <span class="uk-text-bold">Country: </span> {{member.country}}

                      </div>

                      <!-- <div>

                         <span class="uk-text-bold">Responsibilities: </span> {{member.responsibilities}}

                       </div>-->

                    </div>

                    <div class="uk-position-bottom-center uk-margin-bottom">

                      <a class="portal-link" (click)="member.active = false">Back</a>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  `,

  styleUrls: ['team.component.css']

})

export class TeamComponent {

  public team: member[] = team;

  public breadcrumbs: Breadcrumb[] = [

    {

      name: 'home',

      route: '/'

    },

    {

      name: 'about',

      route: '/about'

    },

    {

      name: 'Team'

    }

  ];

}