{% load static %}
{% load i18n %}
{% load content_filters %}
{% load pdf_filters %}
{% load render_bundle from webpack_loader %}
{% comment %}
    These file does not inherit from _raw.html,
    because xhtml2pdf does not work in combination with tailwind css,
    so that no resources like tailwind from _raw.html can be incorporated.
    Tailwind css uses the @media without a mediatype, but xhtml2pdf expects the media identifier.
    See https://github.com/xhtml2pdf/xhtml2pdf/issues/498 for more information.
    Once this issue is fixed, we can use tailwind in the pdf context.
{% endcomment %}
{# djlint:off H006,H016,H025,H030,H031 #}
<html>
    <head>
        <!-- these style settings are only set to pdf exported pages
        for detailed information about the applied library concepts see
        the documentation of xhtml2pdf -->
        {% render_bundle 'pdf' 'css' %}
        <style>
            .content {
                padding-bottom: 30px;
            }
            {% if language.slug == "zh" %}
                html, body, pdftoc {
                    font-family: "Noto Sans SC", sans-serif;
                }
                .content {
                    -pdf-word-wrap: CJK;
                }
            {% elif language.slug == "am" or language.slug == "ti" %}
                html, body, pdftoc {
                    font-family: "Noto Sans Ethiopic", sans-serif;
                }
            {% elif language.slug == "el" %}
                html, body, pdftoc {
                    font-family: "Open Sans", sans-serif;
                }
            {% elif language.slug == "ka" %}
                html, body, pdftoc {
                font-family: "Noto Sans Georgian", sans-serif;
            }
            {% elif right_to_left %}
                html, body {
                    font-family: "DejaVu", sans-serif;
                }
            {% else %}
                html, body {
                    font-family: "DejaVu", sans-serif;
                }
                pdftoc, h1 {
                    font-family: "Raleway", sans-serif;
                }
            {% endif %}
        </style>
    </head>
    <body>
        <div id="header">
            <!-- make sure that image size fits in static frame to avoid problems -->
            <!-- only applicable if icon is present -->
            {% if region.icon and region.icon.file %}
                <img src="{% get_media_prefix %}{{ region.icon.file.name }}"
                     height="32"
                     alt="{{ region.icon.alt_text }}" />
            {% endif %}
        </div>
        <div id="footer">
            <table>
                <tr>
                    <td id="first-footer">
                        <pdf:pagenumber />
                    </td>
                    <td id="second-footer">
                        {{ region.full_name }}
                    </td>
                    <td id="third-footer">
                        <img src="{% static 'logos/'|add:BRANDING|add:'/'|add:BRANDING|add:'-logo.png' %}"
                             height="40"
                             alt="{{ BRANDING_TITLE }}" />
                    </td>
                </tr>
            </table>
        </div>
        {% if right_to_left %}
            <div>
                <pdf:language name="arabic" />
            </div>
        {% endif %}
        <div class="{% if right_to_left %}right-to-left{% endif %}">
            {% if amount_pages > 1 %}
                <!-- if the user selected several pages, additionally insert table of content -->
                <h1 id="title_page">
                    {{ language.table_of_contents }}
                </h1>
                <!-- according to xhtml2pdf documentation all custom tags like <pdf:toc />, <pdf:nextpage>, etc.
                should be wrapped inside block tags like <div> to avoid problems -->
                <div class="toc">
                    <pdf:toc />
                </div>
                <div>
                    <pdf:nextpage />
                </div>
            {% endif %}
            {% for page, info in annotated_pages %}
                {# djlint:off #}
                {% if info.open %}
                    <ul>
                        <li>{% else %}</li>
                    <li>
                {% endif %}
                {% get_public_translation page language.slug as page_translation %}
                <h1 class="level-{{ page.depth|add:"-1" }}">{{ page_translation.title }}</h1>
                <div class="content">
                    {% if page.mirrored_page_first %}
                        {{ page_translation.mirrored_translation_text|pdf_strip_fontstyles|pdf_truncate_links:50|safe }}
                    {% endif %}
                    {{ page_translation.content|pdf_strip_fontstyles|pdf_truncate_links:50|safe }}
                    {% if not page.mirrored_page_first %}
                        {{ page_translation.mirrored_translation_text|pdf_strip_fontstyles|pdf_truncate_links:50|safe }}
                    {% endif %}
                </div>
                {% for close in info.close %}
                        </li>
                    </ul>
                {% endfor %}
                {# djlint:on #}
            {% endfor %}
        </div>
    </body>
</html>
{# djlint:on #}
