<div layoutDirection="row" layoutDirection-xs="column" class="fl-content" appLayoutGap="10px">
  <div layoutDirection="column" appFlex="45">
    <h2 class="fl-detail" i18n>Client info</h2>
    <p class="fl-detail" *ngIf="object.company" i18n>Company: {{ object.company }}</p>
    <p class="fl-detail" i18n>Name: {{ object.name }}</p>
    <p class="fl-detail" i18n>Country: {{ object.country_name }}</p>
    <p class="fl-detail" i18n>
      City: {{ object.city }}<span *ngIf="object.state">, {{ object.state }}</span>
    </p>
    <p class="fl-detail" i18n>Address: {{ object.address1 }}</p>
    <p class="fl-detail" *ngIf="object.address2">{{ object.address2 }}</p>
    <p class="fl-detail" i18n>Zip code: {{ object.zip_code }}</p>
    <p class="fl-detail" i18n>Phone: {{ object.phone }}</p>
    <p class="fl-detail" i18n>ID: {{ object.id }}</p>
    <p class="fl-detail" i18n>Created on: <app-date-displayer [date]="object.date_created"></app-date-displayer></p>
    <p class="fl-detail" i18n>
      Client is on a billing agreement: {{ object.has_billing_agreement | yesNo }}
    </p>
  </div>
  <div layoutDirection="column" appFlex="55" *ngIf="notificationsSettings">
    <h2 class="fl-detail" i18n>Your notification settings</h2>
    <div class="display-flex" *ngFor="let setting of notificationsSettings.detail | keyvalue">
      <mat-checkbox disabled [checked]="setting.value.enabled">{{setting.value.display_name}}</mat-checkbox>
      <app-icon *ngIf="setting.key === 'get_all_ticket_notifications'" [icon]="{
        name: 'info',
        class: 'small-info-icon',
        marginLeft: '10px',
        marginTop: '10px',
        tooltip: getAllTicketNotificationsTooltip,
        tooltipDirection: 'left'
      }"></app-icon>
    </div>
  </div>
</div>
