{% load kmuhelper_tags %}

<html lang="de" style="height: 100%;">
<head>
    {% if isonline %}
        <title>E-Mail Viewer | KMUHelper</title>
    {% endif %}

    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% block extrahead %}

    {% endblock %}
</head>
<body style="height: 100%; margin: 0; padding: 0; font-size: 14px; color: #333; background: #fff; font-family: 'Roboto','Lucida Grande','DejaVu Sans','Bitstream Vera Sans',Verdana,Arial,sans-serif;">
<div id="container" style="position: relative; width: 100%; padding: 0; display: flex; flex-direction: column;">
    {% block header %}
        {% if not noheader %}
            <div id="header" style="flex-shrink: 0; color: {{ header_foreground|default:'#FFEE88' }}; background-color:
                    {{ header_background|default:'#AA1155' }}; width: auto; height: auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 40px; overflow: hidden;">
                <div id="branding" style="float: left;">
                    <h1 id="site-name" style=" padding: 0; margin: 0 20px 0 0; font-weight: 300; font-size: 24px;">
                        {% block title %}{{ header_title|default:'KMUHelper | E-Mail' }}{% endblock %}</h1>
                </div>
                <div id="user-tools"
                     style="float: right; padding: 0; margin: 0 0 0 20px; font-weight: 300; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; text-align: right; color: #F6C400;">

                </div>
            </div>
        {% endif %}
    {% endblock %}

    {% block content %}
        <div id="main" style="display: flex; flex: 1 0 auto;">
            <div class="content" style="flex: 1 0; max-width: 100%;">
                <div id="content" style="padding: 20px 40px;">
                    <h1 style="margin: 0 0 20px; font-weight: 300; font-size: 20px; color: #666;">
                        {% block subtitle %}{{ subtitle }}{% endblock %}</h1>

                    {% block precontent %}
                        {{ precontent|urlize|linebreaks }}
                    {% endblock %}
                    {% block maincontent %}
                        {{ text|urlize|linebreaks }}
                    {% endblock %}
                    {% block postcontent %}
                        <br>
                        {{ postconent|urlize|linebreaks }}
                    {% endblock %}
                </div>
            </div>
        </div>
    {% endblock %}
</div>

{% if isonline %}
    {% block attachments %}
        {% if attachments %}
            <hr>
            <h3 style="margin-left: 20px;">Anhänge</h3>
            <p style="margin-left: 20px;">Achtung: Es kann unter Umständen vorkommen, dass nicht mehr alle Anhänge
                verfügbar sind.</p>
            <ul>
                {% for attachment in attachments %}
                    <li><a href="{{ attachment.get_url }}">{{ attachment.filename }}</a></li>
                {% endfor %}
            </ul>
            <br>
        {% endif %}
    {% endblock %}
{% else %}
    {% block view_online_info %}
        {% if not disable_viewonline %}
            {% if view_online_url %}
                <hr>
                <p>E-Mail wird nicht richtig dargestellt? - Sie können die E-Mail unter folgendem Link auch in Ihrem
                    Webbrowser ansehen: <a href="{{ view_online_url }}">{{ view_online_url }}</a></p>
            {% endif %}
        {% endif %}
    {% endblock %}
{% endif %}
</body>
</html>