{% extends "frog/email.html" %}
{% load tablecols %}

{% block content %}
    <table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
        {% if images %}
        <tr><td colspan="4"><h2>Images</h2></td></tr>
        {% for row in images|tablecols:4 %}
        <tr style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
            {% for obj in row %}
            <td class="content-block" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                <a href='{{SITE_URL}}/v/0/{{obj.guid}}'>
                    <img src='{{SITE_URL}}{{obj.thumbnail.url}}' width="200" height="200" />
                </a><br />
                <a href='{{SITE_URL}}/v/0/{{obj.guid}}' style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; color: #348eda; text-decoration: underline; margin: 0;">{{obj.title}}</a><br />
                <span>{{obj.author.get_full_name}}</span>
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
        {% endif %}
        {% if videos %}
        <tr><td colspan="3"><h2>Videos</h2></td></tr>
        {% for row in videos|tablecols:4 %}
        <tr style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
            {% for obj in row %}
            <td class="content-block" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                <a href='{{SITE_URL}}/v/0/{{obj.guid}}'>
                    <img src='{{SITE_URL}}{{obj.thumbnail.url}}' width="200" height="200" />
                </a><br />
                <a href='{{SITE_URL}}/v/0/{{obj.guid}}' style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; color: #348eda; text-decoration: underline; margin: 0;">{{obj.title}}</a><br />
                <span>{{obj.author.get_full_name}}</span>
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
        {% endif %}
    </table>
{% endblock %}

{% block footer %}
<a href="{{SITE_URL}}/w/{{gallery.id}}" class="btn-primary" itemprop="url" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; line-height: 2; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background: #348eda; margin: 0; border-color: #348eda; border-style: solid; border-width: 10px 20px;">View Gallery</a>
{% endblock %}
