<div class="c8y-cookie-banner">
  <div class="container">
    <div class="row p-t-16 p-b-16" *ngIf="showBanner">
      <div class="col-md-2" *ngIf="settings.cookieBannerTitle">
        <h3>{{ settings.cookieBannerTitle | translate }}</h3>
        <div class="p-b-16 visible-sm visible-xs"></div>
      </div>
      <div class="col-md-7">
        <div class="cookie-banner-content text-pre-line">
          {{ settings.cookieBannerText | translate }}
          <a
            href="{{ settings.policyUrl }}"
            target="_blank"
            rel="noopener noreferrer"
            *ngIf="settings.policyUrl"
            class="text-primary"
          >
            {{ 'See also our Privacy Notice.' | translate }}
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="row">
          <div class="col-sm-6 col-md-12">
            <div class="p-b-16 visible-sm visible-xs"></div>
            <button
              class="btn btn-primary btn-block"
              (click)="acceptCookies()"
              [disabled]="shouldDisable"
            >
              {{ 'Agree and proceed' | translate }}
            </button>
          </div>
          <div class="col-sm-6 col-md-12" *ngIf="!!cookiePreferences">
            <div class="p-b-16"></div>
            <button
              class="btn btn-primary btn-block"
              (click)="rejectCookies()"
              [disabled]="shouldDisable"
            >
              {{ 'Reject all`cookies`' | translate }}
            </button>
          </div>
          <div class="col-sm-6 col-md-12" *ngIf="!!cookiePreferences">
            <div class="p-b-16"></div>
            <button
              class="btn btn-default btn-block"
              (click)="onConfigurePreferences()"
              [disabled]="shouldDisable"
            >
              {{ 'Configure preferences' | translate }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>