s s tickets

<div fxLayout="column"
     fxLayoutGap="30px"
     fxFlex="100%"
     fxLayoutAlign="space-between">

    <div fxLayout="column"
         fxLayoutGap="30px">

        <div>
            <div fxFlex="100%"
                 fxFlex.gt-md="60%">
                <div fxLayout="column"
                     fxLayoutGap="30px">

                    <div class="mat-table-container without-header">
                        <table mat-table
                               [dataSource]="statDataSource">

                            <ng-container matColumnDef="ticketType">
                                <th mat-header-cell
                                    *matHeaderCellDef
                                    [ngStyle]="{'font-weight': 'bold'}">
                                </th>
                                <td mat-cell
                                    *matCellDef="let row">
                                    {{ row.ticketType }}
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="available">
                                <th mat-header-cell
                                    *matHeaderCellDef
                                    [ngStyle]="{'font-weight': 'bold'}">
                                    <app-translate key="Event.SingleSponsorship.Tickets.Available">
                                        Available
                                    </app-translate>
                                </th>
                                <td mat-cell
                                    *matCellDef="let row"
                                    [ngStyle]="{'padding-left': '30px'}">
                                    {{ row.available }}
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="created">
                                <th mat-header-cell
                                    *matHeaderCellDef
                                    [ngStyle]="{'font-weight': 'bold'}">
                                    <app-translate key="Event.SingleSponsorship.Tickets.Created">
                                        Created
                                    </app-translate>
                                </th>
                                <td mat-cell
                                    *matCellDef="let row"
                                    [ngStyle]="{'padding-left': '30px'}">
                                    {{ row.created }}
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="remaining">
                                <th mat-header-cell
                                    *matHeaderCellDef
                                    [ngStyle]="{'font-weight': 'bold'}">
                                    <app-translate key="Event.SingleSponsorship.Tickets.Remaining">
                                        Remaining
                                    </app-translate>
                                </th>
                                <td mat-cell
                                    *matCellDef="let row"
                                    [ngStyle]="{'padding-left': '30px'}">
                                    {{ row.remaining }}
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="createTickets">
                                <th mat-header-cell
                                    *matHeaderCellDef
                                    [ngStyle]="{'font-weight': 'bold'}">
                                </th>
                                <td mat-cell
                                    *matCellDef="let row"
                                    [ngStyle]="{'padding-left': '30px'}">
                                    <button *ngIf="row.remaining > 0"
                                            mat-flat-button
                                            color="primary"
                                            class="btn-sm"
                                            (click)="onCreateTickets(row)"
                                            [disabled]="!((hasAnyManager | async) && (hasEventRepresentative | async))">
                                        {{ 'Event.SingleSponsorship.Tickets.CreateTickets' | translate: 'Create Tickets'
                                        |
                                        async
                                        }}
                                    </button>
                                </td>
                            </ng-container>

                            <tr mat-header-row
                                *matHeaderRowDef="displayedColumns; sticky: true"></tr>

                            <tr mat-row
                                *matRowDef="let row; columns: displayedColumns;"></tr>

                        </table>
                    </div>

                    <div fxLayout="column"
                         fxLayoutGap="20px">

                        <button *ngIf="!(hasAnyManager | async)"
                                mat-flat-button
                                color="primary"
                                type="button"
                                (click)="onLink()">
                            <app-translate key="Event.SingleSponsorship.Tickets.NoManagerLink">
                                You will need to set the sponsorship manager before creating tickets.
                            </app-translate>
                        </button>

                        <button *ngIf="!(hasEventRepresentative | async)"
                                mat-flat-button
                                color="primary"
                                type="button"
                                (click)="onLink()">
                            <app-translate key="Event.SingleSponsorship.Tickets.NoMainRepresentativeLink">
                                You will need to set the sponsorship representative before creating tickets.
                            </app-translate>
                        </button>

                    </div>
                </div>
            </div>
        </div>

        <div fxFlex="100%">
            <div class="mat-table-container without-header"
                 fxFlex="100%">

                <table mat-table
                       [dataSource]="tableDataSource"
                       matSort>

                    <ng-container matColumnDef="ticketStatusId">
                        <th mat-header-cell
                            *matHeaderCellDef
                            mat-sort-header>
                            {{ 'StatusLabel' | translate: 'Status' | async }}
                        </th>
                        <td mat-cell
                            *matCellDef="let row"
                            [matTooltip]="row.ticketStatusId | ticketStatus | async | tooltip"
                            [ngStyle]="{'color': '#' + (row.ticketStatusId | ticketStatusColor | async)}">
                            {{ row.ticketStatusId | ticketStatus | async | dataSlice}}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="ticketType">
                        <th mat-header-cell
                            *matHeaderCellDef
                            mat-sort-header
                            [ngStyle.gt-sm]="{'width': '20%'}">
                            {{ 'Tickets.TicketTable.TicketType' | translate: 'Ticket Type' | async }}
                        </th>
                        <td mat-cell
                            *matCellDef="let row"
                            [ngStyle.gt-sm]="{'width': '20%'}"
                            [matTooltip]="row.ticketType">
                            {{ row.ticketType }}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="assignedTo">
                        <th mat-header-cell
                            *matHeaderCellDef
                            mat-sort-header>
                            {{ 'Event.TicketsAttendee.Table.AssignedTo' | translate: 'Assigned To' |
                            async }}
                        </th>
                        <td mat-cell
                            *matCellDef="let row"
                            [matTooltip]="row.assignedTo | tooltip">
                            {{ row.assignedTo | dataSlice }}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="assignedName">
                        <th mat-header-cell
                            *matHeaderCellDef
                            mat-sort-header>
                            {{ 'Event.SingleSponsorship.Tickets.Table.AssignedName' | translate: 'Assigned / Name' |
                            async }}
                        </th>
                        <td mat-cell
                            *matCellDef="let row"
                            [matTooltip]="row.assignedName | tooltip">
                            {{ row.assignedName | dataSlice }}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="assignedEmail">
                        <th mat-header-cell
                            *matHeaderCellDef
                            mat-sort-header>
                            {{ 'Event.SingleSponsorship.Tickets.Table.AssignedEmail' | translate: 'Assigned / Email' |
                            async }}
                        </th>
                        <td mat-cell
                            *matCellDef="let row"
                            [matTooltip]="row.assignedEmail | tooltip">
                            {{ row.assignedEmail | dataSlice }}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="isPersonalization">
                        <th mat-header-cell
                            *matHeaderCellDef
                            mat-sort-header>
                            <app-translate key="PersonalizationLabel">
                                Personalization
                            </app-translate>
                        </th>
                        <td mat-cell
                            *matCellDef="let row">
                            <mat-checkbox color="primary"
                                          [checked]="row.isPersonalization"
                                          [ngStyle]="{'margin-bottom': '0', 'pointer-events': 'none', 'opacity': '.7'}"
                                          (click)="$event.stopPropagation()">
                            </mat-checkbox>
                        </td>
                    </ng-container>

                    <tr mat-header-row
                        *matHeaderRowDef="tableDisplayedColumns; sticky: true"></tr>

                    <tr mat-row
                        *matRowDef="let row; columns: tableDisplayedColumns;"
                        (click)="onTicket(row)"
                        [style.pointer-events]="(hasTicketAccess | async) ? 'initial' : 'none'"
                        [class.table-link]="hasTicketAccess | async"></tr>

                    <tr class="mat-row"
                        *matNoDataRow>
                        <td class="mat-cell"
                            colspan="4">{{ 'TableNoSearchResult' | translate: 'No data matching the filter' | async }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </div>

    <div fxLayout="row"
         fxLayoutGap="16px"
         fxLayoutAlign="end end">
        <div fxFlex.xs="50%">
            <button mat-flat-button
                    color="primary"
                    fxFlex="100%"
                    [routerLink]="['../../']">
                {{ 'ButtonClose' | translate: 'Close' | async }}
            </button>
        </div>
    </div>

</div>