{% extends "modal_base.html" %}


{% block modal_class %}w-11/12 max-w-[90ch] max-h-[95%]{% 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}}" />
{% endif %}

<div class="markdown-content prose" data-content="{{text_content.text | escape }}">
  {{text_content.text | escape }}
</div>
<script src="/assets/marked.min.js"></script>
<script>
  function initialize() {
    marked.setOptions({
      breaks: true, gfm: true, headerIds: false, mangle: false,
      smartLists: true, smartypants: true, xhtml: false
    });
  }

  function renderStaticMarkdown() {
    document.querySelectorAll('.markdown-content').forEach(el => {
      const raw = el.getAttribute('data-content') || '';
      el.innerHTML = marked.parse(raw);
    });
  }

  function processMarkdown() {
    initialize();
    renderStaticMarkdown();
  }

  document.body.addEventListener('htmx:afterSettle', processMarkdown);
</script>
{% endblock %}

{% block primary_actions %}
{% endblock %}