{% if value | length > max_length %}
    <div class="d-flex">
        <span> {{ value | truncate(max_length) }} </span>
        <button class="btn btn-light btn-sm"
            aria-label="{{ _('View Details') }}"
            onclick="document.getElementById('{{ modal_id }}').showModal()"> <i class="fa fa-up-right-from-square"></i>
        </button>
    </div>
    <dialog id="{{ modal_id }}" class="border-1 rounded border-primary-subtle p-3">
        <h2>{{ modal_title }}</h2>

        <pre class="overflow-scroll bg-body-tertiary p-2 fs-5" style="max-height: 600px;">{{ value }}</pre>

        <div class="d-flex justify-content-end">
            <button class="btn btn-light" onclick="document.getElementById('{{ modal_id }}').close()">
                {{ _('Close') }}
            </button>
        </div>
    </dialog>
{% else %}
    {{ value }}
{% endif %}