{% 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="w-full border-b-2 border-neutral" src="/file/{{text_content.url_info.image_id}}" alt="Screenshot of the site" />
{% endif %}
{% if text_content.file_info.mime_type == "image/png" or text_content.file_info.mime_type == "image/jpeg" %}
<figure>
  <img src="/file/{{text_content.file_info.id}}" alt="{{text_content.file_info.file_name}}" />
</figure>
{% endif %}
<div id="reader-{{text_content.id}}" class="markdown-content prose-tufte" 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 %}