<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>A Simple Responsive HTML Email</title>
    <style type="text/css">
      header {
        background:#191f2c;
        padding: 1.3em;
        text-align: center;
      }
      header img {
        max-width: 150px;
        width: 100%;
      }
      p {
        margin-bottom: 10px;
      }
      table {
        border-collapse: collapse;
        display: block;
        font-size: 0.85em;
        margin-top: 2em;
      }
      td, th {
        padding: 1.2em;
      }
      thead {
        font-size: 0.9em;
        color: #90a6ba;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      tbody tr {
        border-bottom: 1px solid #ddd;
      }
      tbody tr:last-child {
        border-bottom: 0;
      }
      tbody td {
        border-color: #ddd;
        border-style: solid;
        border-width: 0 1px 0 0;
        font-weight: bold;
      }
      tbody td:last-child {
        border-right: 0;
      }
      tbody td a {
        color: inherit;
        text-decoration: none;
      }
      tbody td a:hover {
        text-decoration: underline;
      }
      tbody td span {
        color: #333;
        display: inline-block;
        font-size: 0.8em;
        font-weight: normal;
        margin-top: 8px;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <div style="color:#000;background-color:#f2f2f2;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;font-family:Helvetica, Arial, sans-serif;font-size:16px;line-height:1.3;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;min-width:100% !important;padding-top:1em;padding-bottom:1em;padding-right:0;padding-left:0;text-align:center;" >
      <div style="background-color:#fff;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;display:block;margin-top:1em;margin-bottom:1em;margin-right:1em;margin-left:1em;max-width:525px;text-align:left;width:100%;" >
        <header style="background-color:#191f2c;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;padding-top:1.3em;padding-bottom:1.3em;padding-right:1.3em;padding-left:1.3em;text-align:center;" >
          <img src="http://v.theonion.com/onionstatic/avclub/static/core/img/av-logo-compact_2x_invert.png" alt="The A.V. Club" style="max-width:150px;width:100%;" />
        </header>
        {% autoescape on %}
          <p style="color:inherit;margin-top:2em;margin-bottom:2em;margin-right:2em;margin-left:2em;" >
            Hey <b>{{ contributor.get_full_name }}</b>,
          </p>
          <p style="margin-top:2em;margin-bottom:2em;margin-right:2em;margin-left:2em;" >
          Please check the amount below and make sure it matches your records. The total is <b>${{ total|floatformat:2 }}</b>.
          If you have any questions about it, please hit reply-all and let us know by <b>{{ deadline }}</b>
          All payments will be processed by the 15th of the month.
          </p>
          <p style="background-color:#90a6ba;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;color:#fff;display:inline-block;padding-top:0.75em;padding-bottom:0.75em;padding-right:1em;padding-left:1em;margin-top:0;margin-bottom:0;margin-right:2em;margin-left:2em;" >
            Total: ${{ total|floatformat:2 }}
          </p>
          <table style="margin-top:2em;margin-bottom:2em;margin-right:2em;margin-left:2em;border-collapse:collapse;display:block;font-size:0.85em;" >
            <thead style="font-size:0.9em;color:#90a6ba;letter-spacing:1px;text-transform:uppercase;" >
            <tr>
              <th style="padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;" >Amount</th>
              <th style="padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;" >Date</th>
              <th style="padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;" >Title / Feature Type</th>
            </tr>
            </thead>
            <tbody>
            {% for contribution, content_type in contributions.items %}
              <tr style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ddd;" >
                <td style="text-align:center;max-width:100px;padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;border-color:#ddd;border-style:solid;border-width:0 1px 0 0;font-weight:bold;" >
                  ${{ contribution.pay|floatformat:2 }}
                </td>
                <td style="text-align:center;max-width:100px;padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;border-color:#ddd;border-style:solid;border-width:0 1px 0 0;font-weight:bold;" >
                  {{ contribution.content.published|date:"m/d/y" }}
                </td>
                <td style="padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;border-color:#ddd;border-style:solid;border-width:0 1px 0 0;font-weight:bold;" >
                  <a href="{{ contribution.content.get_absolute_url }}" style="color:#000;text-decoration:none;" >
                    {{ contribution.content.title|safe }}
                  </a>
                  <br>
                  <span style="color:#333;display:inline-block;font-size:0.8em;font-weight:normal;margin-top:8px;text-transform:uppercase;" >
                    {{ contribution.content.feature_type.name }}
                  </span>
                </td>
              </tr>
            {% endfor %}
            {% for line_item in line_items %}
              <tr style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ddd;" >
                <td style="text-align:center;max-width:100px;padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;border-color:#ddd;border-style:solid;border-width:0 1px 0 0;font-weight:bold;" >
                  ${{ line_item.amount|floatformat:2 }}
                </td>
                <td style="text-align:center;max-width:100px;padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;border-color:#ddd;border-style:solid;border-width:0 1px 0 0;font-weight:bold;" >
                  {{ line_item.payment_date|date:"m/d/y" }}
                </td>
                <td style="padding-top:1.2em;padding-bottom:1.2em;padding-right:1.2em;padding-left:1.2em;border-color:#ddd;border-style:solid;border-width:0 1px 0 0;font-weight:bold;" >
                  {{ line_item.note }}
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        {% endautoescape %}
      </div>
    </div>
  </body>
</html>