{% extends "django_pymissive/base_preview.html" %}
{% load static i18n %}

{% block preview_stylesheet %}
<link rel="stylesheet" href="{% static 'django_pymissive/css/letter_page.css' %}">
<link rel="stylesheet" href="{% static 'django_pymissive/css/postal_preview.css' %}">
{% endblock %}

{% block preview_content %}
<div class="postal-preview">

    <div class="postal-recipient-picker-bar no-print">
        {% include "django_pymissive/includes/postal_recipient_preview_nav.html" %}
    </div>

    <div class="envelope">
        <div class="address-block sender-block">
            <div class="address-label">{% trans "Sender" %}</div>
            {% if sender.name %}<div class="address-name">{{ sender.name }}</div>{% endif %}
            {% for line in sender_address.text_3lines %}
            <div class="address-line">{{ line|join:" " }}</div>
            {% empty %}
            <div class="address-empty">{% trans "Not filled in" %}</div>
            {% endfor %}
        </div>
        {% if delivery_mode_display or priority_display or acknowledgement_display %}
        <div class="postal-meta">
            {% if delivery_mode_display %}
            <span class="meta-badge meta-delivery">{{ delivery_mode_display }}<small>{% trans "Delivery Mode" %}</small></span>
            {% endif %}
            {% if priority_display %}
            <span class="meta-badge meta-priority">{{ priority_display }}<small>{% trans "Priority" %}</small></span>
            {% endif %}
            {% if acknowledgement_display %}
            <span class="meta-badge meta-ack">{{ acknowledgement_display }}<small>{% trans "Acknowledgement Level" %}</small></span>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <div class="postal-preview-actions no-print">
        {% if campaign %}
        <a href="{% url 'django_pymissive:download_pdf' 'campaign' campaign.pk %}?type={{ campaign_preview_kind|urlencode }}"
           class="postal-preview-actions__link">
            {% trans "Download PDF" %}
        </a>
        {% elif postal_letter_recipient_pk %}
        <a href="{% url 'django_pymissive:download_pdf_recipient' 'missive' missive.pk postal_letter_recipient_pk %}"
           class="postal-preview-actions__link">
            {% trans "Download PDF" %}
        </a>
        {% else %}
        <a href="{% url 'django_pymissive:download_pdf' 'missive' missive.pk %}"
           class="postal-preview-actions__link">
            {% trans "Download PDF" %}
        </a>
        {% endif %}
    </div>

    {% include "django_pymissive/includes/postal_a4_letter_page.html" %}

    {% for doc in missive.attachments_physical %}
    {% if not doc.is_first_document %}
    <div class="pdf-attachment" data-pdf-url="{{ doc.attachment_download_url }}">
        <div class="pdf-attachment-label">
            <span aria-hidden="true">&#128196;</span>
            <span class="pdf-attachment-name">{{ doc.attachment_url.name|default:"unnamed" }}</span>
        </div>
        <div class="pdf-pages">
            <div class="pdf-loading">{% trans "Loading…" %}</div>
        </div>
    </div>
    {% endif %}
    {% endfor %}

</div>
{% endblock %}

{% block preview_scripts %}
{% trans "PDF.js unavailable." as pdfjs_msg_unavailable %}
{% trans "Open attachment" as pdfjs_msg_open %}
{% trans "Could not render document" as pdfjs_msg_error %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
(function () {
    var MSG_UNAVAILABLE = '{{ pdfjs_msg_unavailable|escapejs }}';
    var MSG_OPEN        = '{{ pdfjs_msg_open|escapejs }}';
    var MSG_ERROR       = '{{ pdfjs_msg_error|escapejs }}';

    function fallbackLink(url) {
        return '<a href="' + url + '" target="_blank" rel="noopener">' + MSG_OPEN + '</a>';
    }

    if (typeof pdfjsLib === 'undefined') {
        document.querySelectorAll('.pdf-attachment[data-pdf-url]').forEach(function (w) {
            w.querySelector('.pdf-pages').innerHTML =
                '<p class="pdf-error">' + MSG_UNAVAILABLE + ' ' + fallbackLink(w.dataset.pdfUrl) + '</p>';
        });
        return;
    }

    pdfjsLib.GlobalWorkerOptions.workerSrc =
        'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    async function renderAttachment(wrapper) {
        var url = wrapper.dataset.pdfUrl;
        var pagesEl = wrapper.querySelector('.pdf-pages');

        try {
            var resp = await fetch(url, { credentials: 'include' });
            if (!resp.ok) throw new Error('HTTP ' + resp.status + ' ' + resp.statusText);
            var buffer = await resp.arrayBuffer();

            var pdf = await pdfjsLib.getDocument({ data: buffer }).promise;
            pagesEl.innerHTML = '';

            for (var n = 1; n <= pdf.numPages; n++) {
                var page = await pdf.getPage(n);
                var unscaled = page.getViewport({ scale: 1 });
                var scale = (pagesEl.clientWidth || 794) / unscaled.width;
                var vp = page.getViewport({ scale: scale });

                var canvas = document.createElement('canvas');
                canvas.className = 'pdf-page';
                canvas.width = vp.width;
                canvas.height = vp.height;
                pagesEl.appendChild(canvas);

                await page.render({ canvasContext: canvas.getContext('2d'), viewport: vp }).promise;
            }
        } catch (err) {
            pagesEl.innerHTML =
                '<p class="pdf-error">' + MSG_ERROR + ': ' + err.message +
                ' \u2014 ' + fallbackLink(url) + '</p>';
        }
    }

    document.querySelectorAll('.pdf-attachment[data-pdf-url]').forEach(renderAttachment);
})();
</script>
{% endblock %}