<div class="account-profile {headerImageIsMissing ? 'header-image-is-missing' : ''}"
     style="background-image: url({headerImage});">
  <div class="account-profile-grid-wrapper">
    <div class="account-profile-grid">
      <AccountProfileHeader {account} {relationship} {verifyCredentials} />
      <AccountProfileFollow {account} {relationship} {verifyCredentials} />
      <AccountProfileNote {account} />
      <AccountProfileDetails {account} {relationship} {verifyCredentials} />
    </div>
  </div>
</div>
<style>
  .account-profile {
    position: relative;
    background-size: cover;
    background-position: center;
    padding-top: 175px;
  }

  .account-profile.header-image-is-missing {
    padding-top: 0;
    background-color: #ccc;
  }

  .account-profile-grid {
    display: grid;
    grid-template-areas: "avatar     name        followed-by   follow"
                         "avatar     username    username      follow"
                         "avatar     note        note          follow"
                         "details    details     details       details";
    grid-template-columns: min-content auto 1fr min-content;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    padding: 20px;
    justify-content: center;
  }

  @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
    :global(.account-profile-grid-wrapper) {
      -webkit-backdrop-filter: blur(7px) saturate(110%);
      backdrop-filter: blur(7px) saturate(110%);
      background-color: var(--account-profile-bg-backdrop-filter);
    }
  }

  @supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
    :global(.account-profile-grid-wrapper) {
      background-color: var(--account-profile-bg);
    }
  }

  @media (max-width: 767px) {
    .account-profile-grid {
      display: grid;
      grid-template-areas: "avatar     name          follow"
                           "avatar     username      follow"
                           "avatar     followed-by   follow"
                           "note       note          note"
                           "details    details       details";
      grid-template-columns: min-content minmax(auto, 1fr) min-content;
      grid-template-rows: min-content min-content 1fr min-content;
      padding: 10px;
    }
  }
</style>
<script>
  import AccountProfileHeader from './AccountProfileHeader.html'
  import AccountProfileFollow from './AccountProfileFollow.html'
  import AccountProfileNote from './AccountProfileNote.html'
  import AccountProfileDetails from './AccountProfileDetails.html'
  import { store } from '../../_store/store'

  export default {
    store: () => store,
    computed: {
      headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
      headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static
    },
    components: {
      AccountProfileHeader,
      AccountProfileFollow,
      AccountProfileNote,
      AccountProfileDetails
    }
  }
</script>