{% extends "email/som/empty.html" %}
{% load email_components static %}

{% block extra_css %}
    <style type="text/css">
        h1.divider {
            background-color: #fcf8e3;
            color: #000;
            border: 1px solid #000;
        }
        .example {
            margin: 10px 0;
        }
        .hover-highlight:hover {
            outline: 2px dashed #ccc;
        }
        .separator {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
            text-align: center;
        }
    </style>
{% endblock extra_css %}

{% block emailbody %}
    <h1 class="divider">GENERIC base elements</h1>

    <div class="separator">emailheader</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailheader %}{% endemailheader %}
        </div>
    </div>

    <div class="separator">emailheading</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailheading %}This is a heading{% endemailheading %}
        </div>
    </div>

    <div class="separator">emailcontent</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailcontent %}
                Only makes a grey block that can contain other elements or text - shouldn't be used without wrapping emailparagraph
            {% endemailcontent %}
        </div>
    </div>

    <div class="separator">emailparagraph</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailparagraph %}This is just plain text, nothing else.{% endemailparagraph %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emaildel</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailparagraph %}Next block of text {% emaildel %}will be printed in strikethrough letters{% endemaildel %}{% endemailparagraph %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailbold</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailparagraph %}Next block of text {% emailbold %}will be printed in bold letters{% endemailbold %}{% endemailparagraph %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailitalic</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
            {% emailparagraph %}Next block of text {% emailitalic %}will be printed in italic letters{% endemailitalic %}{% endemailparagraph %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailcolor</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
            {% emailparagraph %}Next block of text {% emailcolor color="#CC3388" %}will be printed in colored letters{% endemailcolor %}{% endemailparagraph %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailsmall</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailsmall %}This is some small text.{% endemailsmall %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailmedium</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailmedium %}This is some medium sized text.{% endemailmedium %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailcenter</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailcenter %}This is some centered text.{% endemailcenter %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailparagraph (with emaillink)</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailparagraph %}This is some text with a link to {% emaillink placeholder="RegioHelden"%}https://regiohelden.de{% endemaillink %}.{% endemailparagraph %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailparagraph (with emailnowrap)</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailparagraph %}This is some text with a link to {% emailnowrap %}this text will never wrap{% endemailnowrap %}.{% endemailparagraph %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailsection</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailsection %}This is a section{% endemailsection %}
                This text does not belong to the section anymore but shows the included margin.
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailsection center="true"</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailsection center="true" %}This is a centered section{% endemailsection %}
                This text does not belong to the section anymore but shows the included margin.
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailsectionheadline</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailsectionheadline %}This is a section headline for inline use{% endemailsectionheadline %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emaileyecatcher</div>
    <div class="example">
        <div class="hover-highlight">
            {% emaileyecatcher image="img/email/som/eyecatcher_impressions.png" heading="This is an eyecatcher"%}What a beautiful thing - looks like it's made of angel tears{% endemaileyecatcher %}
        </div>
    </div>

    <div class="separator">emaileyecatcher (without subline)</div>
    <div class="example">
        <div class="hover-highlight">
            {% emaileyecatcher image="img/email/som/eyecatcher_impressions.png" heading="This is an eyecatcher" %}{% endemaileyecatcher %}
        </div>
    </div>

    <div class="separator">emaileyecatcher (without subline and image)</div>
    <div class="example">
        <div class="hover-highlight">
            {% emaileyecatcher image="" heading="This is an eyecatcher" %}{% endemaileyecatcher %}
        </div>
    </div>

    <div class="separator">emailserviceemployee</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailserviceemployee service_employee=service_employee %}{% endemailserviceemployee %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailstripline</div>
        <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailstripline %}{% endemailstripline %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emaillist (default), emaillistitem</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emaillist %}
                    {% emaillistitem %}First line in this awesome list{% endemaillistitem %}
                    {% emaillistitem %}Second line makes it look gorgeous{% endemaillistitem %}
                {% endemaillist %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emaillist (ordered), emaillistitem</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emaillist ordered=True %}
                    {% emaillistitem %}First line in this awesome list{% endemaillistitem %}
                    {% emaillistitem %}Second line makes it look gorgeous{% endemaillistitem %}
                {% endemaillist %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailwarning</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailwarning %}This is severe! Take cover.{% endemailwarning %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailtable etc.</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailtable heading="Look at this awesome table!" %}
                    {% emailtable_thead %}
                        {% emailtable_tr %}
                            {% emailtable_th %}Name{% endemailtable_th %}
                            {% emailtable_th %}Calls{% endemailtable_th %}
                        {% endemailtable_tr %}
                    {% endemailtable_thead %}
                    {% emailtable_tbody %}
                        {% emailtable_tr %}
                            {% emailtable_td %}Hotel{% endemailtable_td %}
                            {% emailtable_td %}112{% endemailtable_td %}
                        {% endemailtable_tr %}
                        {% emailtable_tr %}
                            {% emailtable_td %}Restaurant{% endemailtable_td %}
                            {% emailtable_td %}87{% endemailtable_td %}
                        {% endemailtable_tr %}
                    {% endemailtable_tbody %}
                {% endemailtable %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailtable class="report-table" etc.</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailparagraph %}
                    {% emailsmall %}Just a simple table without any heading, columns are 50% width{% endemailsmall %}
                {% endemailparagraph %}
                {% emailtable class="report-table" %}
                    {% emailtable_thead %}
                        {% emailtable_tr %}
                            {% emailtable_th style="width: 50%;" %}Name{% endemailtable_th %}
                            {% emailtable_th style="width: 50%;" %}Calls{% endemailtable_th %}
                        {% endemailtable_tr %}
                    {% endemailtable_thead %}
                    {% emailtable_tbody %}
                        {% emailtable_tr %}
                            {% emailtable_td %}Left side{% endemailtable_td %}
                            {% emailtable_td %}Right side{% endemailtable_td %}
                        {% endemailtable_tr %}
                        {% emailtable_tr %}
                            {% emailtable_td %}Left side{% endemailtable_td %}
                            {% emailtable_td %}Right side{% endemailtable_td %}
                        {% endemailtable_tr %}
                    {% endemailtable_tbody %}
                {% endemailtable %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailcolorpreview</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailcolorpreview color="#FF0022" %}{% endemailcolorpreview %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailcolorpreview (with alternative placeholder text)</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailcolorpreview color="#FF2288" placeholder="Some pink-ish color" %}{% endemailcolorpreview %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailbutton</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailbutton link="https://regiohelden.de" %}Visit us now!{% endemailbutton %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailbutton center="true"</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailbutton link="https://regiohelden.de" center="true" %}Visit us now!{% endemailbutton %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailspacer</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailspacer %}{% endemailspacer %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailimage</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailimage alt_text="my awesome image" width=100 %}cid:{% static "img/email/som/cta.png" %}{% endemailimage %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailstarrating</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailstarrating score=3 %}{% endemailstarrating %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailstar size_px=40 color="black"</div>
    <div class="example">
        {% emailcontent %}
            <div class="hover-highlight">
                {% emailstar size_px=40 color="black" %}{% endemailstar %}
            </div>
        {% endemailcontent %}
    </div>

    <div class="separator">emailfooter</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailfooter %}{% endemailfooter %}
        </div>
    </div>

    <div class="separator">emailunsubscribe</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailunsubscribe %}The email unsubscription text may appear.{% endemailunsubscribe %}
        </div>
    </div>

    <h1 class="divider">META elements</h1>

    <div class="separator">emailsalutation</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailsalutation service_employee=service_employee %}There might be a sentence prepended to the salutation.{% endemailsalutation %}
        </div>
    </div>

    <div class="separator">emailsalutation (no service employee)</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailsalutation %}There might be a sentence prepended to the salutation.{% endemailsalutation %}
        </div>
    </div>

    <div class="separator">emailsalutation (no service employee, no text)</div>
    <div class="example">
        <div class="hover-highlight">
            {% emailsalutation %}{% endemailsalutation %}
        </div>
    </div>
{% endblock %}
