{% load static %}

<div class="flex flex-col">

  <div class="grow min-h-[50vh] grid grid-cols-1 gap-4 place-content-center text-center p-10 text-slate-800 dark:text-white dark:bg-mastodon-dark-bg bg-white">
    <p class="text-base">Über den Service <a href="https://www.mastofeed.com">www.mastofeed.com</a> wird mein Mastodon-Profil eingebunden.</p>
    <button id="btnMastodonAktiv" class="bg-petrol-500 text-white py-2 px-6 hover:scale-105 transition hover:bg-main-icon">Mastodon einbinden</button>
  </div>
  <iframe id="mastodonIfram" class="grow min-h-[50vh] hidden" allowfullscreen sandbox="allow-top-navigation allow-scripts"
    src=""></iframe>

  <div
    class="py-2 text-center text-sm font-bold bg-white border-t border-solid border-slate-500 text-slate-800 dark:text-white dark:bg-mastodon-dark-bg">
    <a rel="me" href="https://ruhr.social/@average" target="_blank">
      ./09_MASTODON PROFIL
    </a>
  </div>
</div>


<script>

  document.getElementById('btnMastodonAktiv').addEventListener("click", activateMastodon)

  function activateMastodon(ev) {

    ev.target.parentElement.classList.add('hidden')

    let box = document.getElementById('mastodonIfram');
    box.src = 'https://www.mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fruhr.social%2Fusers%2Faverage&theme=auto&size=100&header=false&replies=true&boosts=true';
    box.classList.remove('hidden')
  }

</script>