{% extends "modal_base.html" %}

{% block modal_class %}w-11/12 max-w-[90ch] max-h-[95%] overflow-y-auto{% endblock %}

{% block modal_content %}
{% if text_content.url_info.image_id %}
<img class="rounded-t-md overflow-clip" src="/file/{{text_content.url_info.image_id}}" alt="Screenshot of the site" />
{% endif %}
<div id="reader-{{text_content.id}}" class="markdown-content prose" data-content="{{text_content.text | escape }}">
  {{text_content.text | escape }}
</div>

<script>
  (function () {
    const readerElementId = "reader-{{text_content.id}}";
    const contentDiv = document.getElementById(readerElementId);

    if (!contentDiv) {
      console.error("Markdown content div #" + readerElementId + " not found for processing.");
      return;
    }

    const scrollableModalContainer = contentDiv.closest('.overflow-y-auto.max-h-\\[95\\%\\]');

    if (scrollableModalContainer) {
      setTimeout(() => {
        scrollableModalContainer.scrollTop = 0;
      }, 10);
    } else {
      console.warn('Scrollable modal container not found for #', readerElementId);
    }
  })();
</script>
{% endblock %}

{% block primary_actions %}
{% endblock %}