popout_point.html

{% load wagtailcore_tags wagtailimages_tags shared_filters %}

{% if not is_outside_block %}
  <div
    class="
      {% if not page.root_page.content_is_full_width %}
        max-w-[100ch]
      {% else %}
        max-w-[100%]
      {% endif %}

      {% if page.root_page.content_is_centered %}
        mx-auto
      {% endif %}
    "
  >
{% endif %}

    <div class="__js-root">
      <ui-popout>
        <template slot="toggler">
          {% if name %}{{ name }}{% else %}{{ self.name }}{% endif %}
        </template>
        <ui-popout-content>
          <div>
            {% if guarantor_page %}
              <div
                class="
                  !text-grey-250 [&_*]:!text-grey-250

                  mb-3 flex gap-2 items-center justify-end
                "
              >
                <div class="mr-2">
                  Garant programového bodu:
                </div>

                {% with self.page.specific.get_profile_image as profile_image %}

                  {% if profile_image %}
                    {% image profile_image fill-150x150 class="w-10 h-10 opacity-75 m-0 p-0 rounded-full" %}
                  {% endif %}
                {% endwith %}

                <strong>
                  <a href="{{ guarantor_page.url }}">
                    {{ guarantor_page.title }}
                  </a>
                </strong>
              </div>
            {% endif %}

            {% if content %}
              <div class="prose max-w-screen-lg">
                {{ content|richtext }}
              </div>
            {% else %}
              {% for block in self.content %}
                {% include_block block %}
              {% endfor %}
            {% endif %}
          </div>
        </ui-popout-content>
      </ui-popout>
    </div>

{% if not is_outside_block %}
  </div>
{% endif %}