<bit-base-card
  class="tw-block tw-h-full tw-overflow-hidden tw-relative tw-transition-all hover:tw-scale-105 focus-within:tw-outline-none focus-within:tw-ring focus-within:tw-ring-primary-700 focus-within:tw-ring-offset-2"
>
  <div class="tw-flex tw-bg-secondary-100 tw-items-center tw-justify-end tw-pt-4 tw-pr-4">
    <bit-icon name="bwi-external-link"></bit-icon>
  </div>
  <div
    class="tw-flex tw-h-32 tw-bg-secondary-100 tw-items-center tw-justify-center tw-pb-2 tw-px-6 lg:tw-pb-4 lg:tw-px-12"
  >
    <div class="tw-flex tw-items-center tw-justify-center tw-size-28 lg:tw-w-40">
      <img
        #imageEle
        [src]="image()"
        alt=""
        class="tw-block tw-mx-auto tw-h-auto tw-max-w-full tw-max-h-full"
      />
    </div>

    @if (linkURL()) {
      <a
        class="tw-block tw-mb-0 tw-font-medium hover:tw-no-underline focus:tw-outline-none after:tw-content-[''] after:tw-block after:tw-absolute after:tw-size-full after:tw-left-0 after:tw-top-0 after:tw-w-full after:tw-h-40"
        [href]="linkURL()"
        rel="noopener noreferrer"
        target="_blank"
        title="{{ linkURL() }}"
      >
      </a>
    }
  </div>
  <bit-card-content>
    <h3 class="tw-text-main tw-m-0 tw-text-lg tw-font-medium">
      {{ name() }}
      @if (showConnectedBadge()) {
        <span class="tw-ml-3">
          @if (isConnected) {
            <span bitBadge variant="success">{{ "connected" | i18n }}</span>
          }
          @if (!isConnected) {
            <span bitBadge>{{ "off" | i18n }}</span>
          }
        </span>
      }
    </h3>
    @if (description()) {
      <p class="tw-mb-0 tw-mt-2 tw-font-medium">{{ description() }}</p>
    }
    @if (canSetupConnection()) {
      <button type="button" class="tw-mt-3" bitButton (click)="setupConnection()">
        @if (isUpdateAvailable) {
          <span>{{ "updateIntegrationButtonDesc" | i18n: name() }}</span>
        } @else {
          <span>{{ "connectIntegrationButtonDesc" | i18n: name() }}</span>
        }
      </button>
    }

    @if (showNewBadge()) {
      <span bitBadge class="tw-mt-3" variant="secondary">
        {{ "new" | i18n }}
      </span>
    }
  </bit-card-content>
</bit-base-card>
