<script>
  /**
   * This script corresponds to initializeOnboardingTaskCard() which will display the task card
   */

  function closeTaskCard() {
    var taskCard = document.getElementsByClassName("onboarding-task-card")[0];
    taskCard.style.display = "none";

    localStorage.setItem('task-card-closed', 'yes');
  }
</script>
<style>
.onboarding-task-card {
  display: none;
}
</style>

<div class="onboarding-task-card">
  <button class="close" onclick="closeTaskCard()">
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.99974 5.58623L11.9497 0.63623L13.3637 2.05023L8.41374 7.00023L13.3637 11.9502L11.9497 13.3642L6.99974 8.41423L2.04974 13.3642L0.635742 11.9502L5.58574 7.00023L0.635742 2.05023L2.04974 0.63623L6.99974 5.58623Z" fill="white" />
    </svg>
  </button>

  <div>
    <img alt="onboarding task card image" class="task-card-image" src="<%= SiteConfig.onboarding_taskcard_image %>" />
  </div>

  <h1 class="task-card-title">You're now a part of the community!</h1>
  <p class="task-card-subtitle">SUGGESTED THINGS YOU CAN DO</p>
  <div class="task-card-action">
    <a class="task-card-link" href="/welcome">
      <p><span class="emoji">😊</span>Join the Welcome thread</p>
      <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
    </a>
  </div>

  <div class="task-card-action">
    <a class="task-card-link" href="/new">
      <p><span class="emoji">✍🏾</span>Write your first <%= community_name %> post</p>
      <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
    </a>
  </div>

  <div class="task-card-action">
    <a class="task-card-link" href="/settings">
      <p><span class="emoji">💅🏼</span>Customize your profile</p>
      <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
    </a>
  </div>
</div>
