<article
  class='card-space-profile-card__container'
  data-test-profile-card
  ...attributes
>
  {{#if @isPreview}}
    <aside class='card-space-profile-card__preview'>Preview</aside>
  {{/if}}

  <section class='card-space-profile-card__card'>
    <figure
      class={{cn 'card-space-profile-card__profile-photo-container' card-space-profile-card__profile-photo-container--placeholder=(not @profilePhoto)}}
      data-test-profile-card-profile-photo
    >
      {{#if @profilePhoto}}
        <img
          src={{@profilePhoto}}
          class='card-space-profile-card__profile-photo'
          alt=''
          role='presentation'
        />
      {{else}}
        {{svg-jar
          'user'
          class='card-space-profile-card__profile-photo card-space-profile-card__profile-photo--placeholder'
          data-test-profile-card-placeholder-profile-photo=true
        }}
      {{/if}}
    </figure>

    <figure
      class={{cn 'card-space-profile-card__cover-photo-container' card-space-profile-card__cover-photo-container--placeholder=(not @coverPhoto)}}
      data-test-profile-card-cover-photo
    >
      {{#if @coverPhoto}}
        <img
          src={{@coverPhoto}}
          class='card-space-profile-card__cover-photo'
          alt=''
          role='presentation'
        />
      {{else}}
        {{svg-jar
          'image'
          class='card-space-profile-card__cover-photo  card-space-profile-card__cover-photo--placeholder'
          data-test-profile-card-placeholder-cover-photo=true
        }}
      {{/if}}
    </figure>

    <section class='card-space-profile-card__body'>
      <heading
        class='card-space-profile-card__heading'
        data-test-profile-card-name
      >
        {{or @name 'Name'}}
      </heading>

      <div
        class='card-space-profile-card__host'
        data-test-profile-card-host
      >
        {{or @host 'blank.card.space'}}
      </div>

      <div
        class='card-space-profile-card__category'
        data-test-profile-card-category
      >
        {{or @category 'Category'}}
      </div>

      <p
        class='card-space-profile-card__description'
        data-test-profile-card-description
      >
        {{or @description 'Description'}}
      </p>

      <Boxel::Button
        @kind='secondary-light'
        class='card-space-profile-card__button'
        data-test-profile-card-button-text
      >
        {{or @buttonText 'Button Text'}}
      </Boxel::Button>
    </section>
  </section>
</article>