<div class="container">
  <div class="row" >
    <div class="col-12">
        <p style="text-align: center; font-size: 20px; background: #4859a5; color: white; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px;">Dashboard Columns</p>
    </div>
  </div>
  <div class="row" style="height: fit-content;margin: 0px; text-align: center; border: 1px solid #31428c4f; padding-top: 10px; box-shadow: 6px 5px 8px #4859a557;">
    <div class="col-12" style="margin : 0%; padding: 0%">
      <div class="row">
        <div class="col-6" style="font-size: 14px; font-weight: 500; text-align: left; padding-left: 70px;">
            <p>{{'COLUMN NAME' | translate}}</p>        
        </div>
        <div class="col-6" style="font-size: 14px; font-weight: 500;">
            <p>{{'COLUMN VISIBILITY' | translate}}</p>        
        </div>
      
      </div>
      <div class="row" *ngFor = "let d_column of dashboard_column; let i = index">
        <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500; color: #616161;">
            <p >{{d_column.name}}</p>
        </div>
        <div class="col-6" >
            <md-checkbox type="checkbox" [checked]="d_column.dash_column" (change)="selectedStatus(i,$event)"></md-checkbox>
        </div>
        
      </div>
      <div clas="row" style="margin-top: 30px;margin-bottom: 30px;text-align: center;">
          <div class="col-12">
              <button md-raised-button style="background: #31428c; color: white;" (click)="savereportPref()">{{'Save' | translate}}</button>
              <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'Cancel' | translate}}</button>
          </div>     
        </div>
    </div>
  </div>
</div>