<div class='container' fxLayout fxLayoutAlign='center start'>
    <div fxFlex class='info'>
        <div class='id'>
            Database id: {{ rawSurveyPoint.id }}
        </div>
        <div class='category'>
            Survey category: {{ rawSurveyPoint.category }} ({{ rawSurveyPoint.store }})
        </div>
        <div class='date'>
            Survey date: {{ rawSurveyPoint.date }}
        </div>
        <div class='status'>
            Status: {{ rawSurveyPoint.status }}
        </div>
        <div class='date'>
            Type: {{ rawSurveyPoint.type }}
        </div>
        <div class='project'>
            Project: {{ rawSurveyPoint.project }}
        </div>
    </div>
    <div class='buttons' fxFlex='1 1 60%'>
        <button class='action' mat-raised-button color='secondary'
            [disabled]='!newStatus'
            (click)="changeStatus($event)">
            Change status
            <mat-icon aria-label="change_status">swap_horiz</mat-icon>
        </button>
        <button class='action' mat-raised-button color='secondary'
            [disabled]='!category'
            (click)="reconcile($event)">
            Reconcile
            <mat-icon aria-label="reconcile">forward</mat-icon>
        </button>
        <button class='action' mat-raised-button color='primary'
            [disabled]='!canDelete'
            (click)="delete($event)">
            Delete
            <mat-icon aria-label="delete">delete</mat-icon>
        </button>
    </div>
</div>