<div class="fl-content fl-content-min-height" layoutDirection-lt-sm="column">
  <div layoutDirection="column" appFlex="50" ltSmFlex="100">
    <p class="fl-detail" i18n>Description: {{ object.description | nullValue }}</p>
    <p class="fl-detail" i18n>Created at: <app-date-displayer [date]="object.created_at" withTime></app-date-displayer></p>
    <p class="fl-detail" i18n>Updated at: <app-date-displayer [date]="object.updated_at" withTime></app-date-displayer></p>
    <p class="fl-detail" i18n>Is public: {{ object.is_public | yesNo | nullValue }}</p>
    <p class="fl-detail" i18n>Region: {{ object.region | nullValue }}</p>
  </div>
  <div layoutDirection="column" appFlex="50" ltSmFlex="100" class="wrap-text-content" *ngIf="object.extra_specs">
    <p class="fl-detail" i18n>Extra specs: <span *ngIf="!hasExtraSpecs()">n/a</span></p>
    <div layoutDirection="row" *ngFor="let property of object.extra_specs | keyvalue" class="property-row">
      <p appFlex="50" class="fl-detail">{{property.key}}:</p>
      <p appFlex="50" class="fl-detail">{{property.value}}</p>
    </div>
  </div>
</div>
