{% load static %}

<div class="__js-root">
  <ui-popout>
    <template slot="toggler">
      {{ title }}
    </template>
    <ui-popout-content>
      <div class="flex flex-wrap gap-4 lg:flex-nowrap">
        <div class="grow lg:grow-0 lg:basis-2/3 prose max-w-screen-lg">
          {% include "patterns/atoms/text/paragraph.html" with text=hoax %}
          <img
            class="mt-10"
            src="{% static "images/hoax.webp" %}"
            alt="Hoax"
          >
          <h3 class="head-4xl mt-10">Jak to je?</h3>
          {% include "patterns/atoms/text/paragraph.html" with text=reality %}
        </div>
        <div class="lg:basis-1/3">
          <img
            class="w-full mb-3"
            src="{{ image_url }}"
            alt="Obrázek hoaxu"
          >
          <small class="text-grey-300">
            <i>{{ image_explanation }}</i>
          </small>
        </div>
      </div>
    </ui-popout-content>
  </ui-popout>
</div>
