<div fxLayout="row wrap">
  <div fxLayout="column" fxFlex="100" fxFlex.gt-md="50">
    <!-- Time line -->
    <mat-card class="default">
      <mat-card-title>Timeline</mat-card-title>
      <mat-card-content>
        <div class="timeline">
          <div class="timeline-item">
            <div class="timeline-badge">
              <img src="assets/images/face-6.jpg" alt="">
            </div>
            <div class="timeline-body">
              <div class="timeline-body-top" fxLayout="row">
                <a href="#" class="timeline-body-title mr-16"><b>Jhone Doe</b> updated his status</a>
                <span class="text-muted">1 hour ago</span>
                <span fxFlex></span>
              </div>
              <div class="timeline-body-content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus natus fugit porro at sunt mollitia repellendus deserunt, libero similique.</p>
              </div>
              <div class="timeline-body-actions">
                <a href="#" class="mr-16 text-muted">Like</a>
                <a href="#" class="text-muted">Comment</a>
              </div>
            </div>
          </div>

          <div class="timeline-item">
            <div class="timeline-badge">
              <img src="assets/images/face-2.jpg" alt="">
            </div>
            <div class="timeline-body">
              <div class="timeline-body-top" fxLayout="row">
                <a href="#" class="timeline-body-title mr-16"><b>Henry krick</b> added a new photo</a>
                <span class="text-muted">15 hours ago</span>
                <span fxFlex></span>
              </div>
              <div class="timeline-body-content">
                <img src="assets/images/photo-600_220.jpg" alt="">
              </div>
              <div class="timeline-body-actions">
                <a href="#" class="mr-16 text-muted">Like</a>
                <a href="#" class="text-muted">Comment</a>
              </div>
            </div>
          </div>

          <div class="timeline-item">
            <div class="timeline-badge">
              <mat-icon class="icon-badge mat-bg-primary">settings</mat-icon>
            </div>
            <div class="timeline-body">
              <div class="timeline-body-top" fxLayout="row">
                <a href="#" class="timeline-body-title mr-16"><b>New follower</b></a>
                <span class="text-muted">2 days ago</span>
                <span fxFlex></span>
              </div>
              <div class="timeline-body-content">
                <p><a class="mat-color-primary" href="">Kevin Huyn</a> and 34 others followed you.</p>
              </div>
              <div class="timeline-body-actions">
                <a href="#" class="mr-16 text-muted">Like</a>
                <a href="#" class="text-muted">Comment</a>
              </div>
            </div>
          </div>

          <div class="timeline-item">
            <div class="timeline-badge">
              <mat-icon class="icon-badge mat-bg-warn">settings</mat-icon>
            </div>
            <div class="timeline-body">
              <div class="timeline-body-top" fxLayout="row">
                <a href="#" class="timeline-body-title mr-16"><b>Membership upgraded</b></a>
                <span class="text-muted">5 days ago</span>
                <span fxFlex></span>
              </div>
              <div class="timeline-body-content">
                <p>Membership has been upgraded to pro</p>
              </div>
              <div class="timeline-body-actions">
                <a href="#" class="mr-16 text-muted">Like</a>
                <a href="#" class="text-muted">Comment</a>
              </div>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
    <!-- End Time line -->

    <mat-card class="default">
      <mat-card-title>Uploaded Photos</mat-card-title>
      <mat-card-content class="p-0">
          <mat-grid-list cols="3" rowHeight="1:1" class="app-gallery">
              <!-- Gallery item -->
              <mat-grid-tile *ngFor="let photo of photos">
                <img [src]="photo.url" alt="">
                <!-- item detail, show on hover -->
                <div class="gallery-control-wrap">
                  <div class="gallery-control">
                    <h4 class="photo-detail fz-1" [fxHide.lt-sm]="true">{{photo.name}}</h4>
                    <span fxFlex></span>
                    <button mat-icon-button [matMenuTriggerFor]="photoMenu" class="">
                      <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #photoMenu="matMenu">
                      <button mat-menu-item><mat-icon>send</mat-icon>Send as attachment</button>
                      <button mat-menu-item><mat-icon>favorite</mat-icon>Favorite</button>
                      <button mat-menu-item><mat-icon>delete</mat-icon>Delete</button>
                    </mat-menu>
                  </div>
                </div>
              </mat-grid-tile>
            </mat-grid-list>
      </mat-card-content>
    </mat-card>
  </div>
  
  <div fxLayout="column" fxFlex="100" fxFlex.gt-md="50">
    <mat-card class="default">
      <mat-card-title>Support Tickets</mat-card-title>
      <mat-card-content class="p-0">
        <mat-list class="compact-list mb-16">
          <mat-list-item class="" *ngFor="let t of tickets">
            <img mat-list-avatar class="mr-16" [src]="t.img" alt="">
            <div fxLayout="row" fxFlex="100">
              <h6 class="m-0 mr-16">{{t.name}}</h6>
              <span fxFlex></span>
              <div fxFlex="40">{{t.text | excerpt:20 }}</div>
              <span fxFlex></span>
              <small class="text-muted mr-16 ml-16">{{ t.date | relativeTime}}</small>
            </div>
            <mat-chip mat-sm-chip [color]="'warn'" [selected]="t.isOpen">{{t.isOpen ? 'active' : 'closed'}}</mat-chip>
          </mat-list-item>
        </mat-list>
        <div class="text-center">
          <button mat-button class="full-width">View all</button>
        </div>
      </mat-card-content>
    </mat-card>

    <mat-card class="default">
      <mat-card-title>Assigned Tasks</mat-card-title>
      <mat-card-content class="p-0">
        <div class="list-tasktype">
          <div class="tasktype-item" *ngFor="let t of tasks">
            <mat-checkbox class="mr-16"></mat-checkbox>
            <span>{{t.text}}</span>
            <span fxFlex></span>
            <mat-chip mat-sm-chip color="primary" [selected]="t.status ? true : false">{{t.status ? 'completed' : 'pending'}}</mat-chip>
            <button mat-icon-button mat-sm-button [matMenuTriggerFor]="taskMenu" class="tasktype-action ml-16">
                <mat-icon class="text-muted">more_vert</mat-icon>
            </button>
            <mat-menu #taskMenu="matMenu">
              <button mat-menu-item>
                <mat-icon>done</mat-icon>
                <span>Completed</span>
              </button>
              <button mat-menu-item>
                <mat-icon>edit</mat-icon>
                <span>Edit</span>
              </button>
              <button mat-menu-item>
                <mat-icon>delete</mat-icon>
                <span>Delete</span>
              </button>
            </mat-menu>
          </div>
        </div>
        <div class="text-center">
          <button mat-button class="full-width">View all</button>
        </div>
      </mat-card-content>
    </mat-card>

    <mat-card class="default">
      <mat-card-title>Activity</mat-card-title>
      <mat-card-content class="p-0" fxLayout="column">
        <div class="activity-data">
          <ngx-datatable class="material bg-white" 
          [columnMode]="'force'"  
          [headerHeight]="50"
          [footerHeight]="50" 
          [rowHeight]="50"
          [limit]="4"
          [rows]="activityData">
            <ngx-datatable-column name="Month" [flexGrow]="1">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.month }}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Spent" [flexGrow]="1">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.spent }}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Opened" [flexGrow]="1">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.opened }}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Closed" [flexGrow]="1">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.closed }}
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </div>
      </mat-card-content>
    </mat-card>

  </div>
</div>
