{% extends "admin/base_site.html" %}
{% load i18n admin_urls %}

{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
&rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ module_name }}</a>
&rsaquo; <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}">{{ object|truncatewords:"18" }}</a>
&rsaquo; {% translate 'Preview' %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
<div id="preview-slack" class="module">
    <table style="width: 100%;">
        <thead>
            <th scope="col">Message</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <pre>{{ message }}</pre>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <em>
                        markdown is readable but you can always render this message in 
                        <a target="_blank" href="https://app.slack.com/block-kit-builder/{{ slack_team }}#{{ message_blocks|urlencode }}">
                            block-kit-builder
                        </a>
                    </em>
                </td>
            </tr>
        </tfoot>
    </table>
    &nbsp;
    {% for attachment in attachments %}
    <table style="width: 100%;">
        <thead>
            <th scope="col">Attachment</th>
        </thead>
        <tbody>
        <tr>
            <td>
                <pre>{{ attachment.0 }}</pre>
            </td>
        </tr>
        <tr>
            <td>
                <em>
                    markdown is readable but you can always render this attachment in 
                    <a target="_blank" href="https://app.slack.com/block-kit-builder/{{ slack_team }}#{{ attachment.1|urlencode }}">
                        block-kit-builder
                    </a>
                </em>
            </td>
        </tr>
        </tbody>
    </table>
    &nbsp;
    {% endfor %}
</div>
</div>
{% endblock %}