<!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: #f2f2f2;font-family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 1.3;margin: 0;min-width: 100% !important;padding: 1em 0;text-align: center;">
      <div style="background: #fff;display: block;margin: 1em;max-width: 525px;text-align: left;width: 100%;">
        <header>
          <img src="https://s3.amazonaws.com/onionstatic/avclub/static/core/img/av-logo-compact_2x_invert.png" alt="The A.V. Club" />
        </header>
        {% autoescape on %}
          <p style="color:inherit; margin:2em">
            Hey <b>{{ contributor.get_full_name }}</b>,
          </p>
          <p style="margin:2em">
          Please check the amount below and make sure it matches your records. The total is <b>${{ total }}</b>. 
          If you have any question about it, please hit reply-all and let us know by <b>{{ deadline }}</b>.
          </p>
          <p style="background: #90a6ba; color: #fff; display: inline-block; padding: 0.75em 1em; margin: 0 2em;">
            Total: ${{ total }}
          </p>
          <table style="margin: 2em">
            <thead>
            <tr>
              <th>Amount</th>
              <th>Date</th>
              <th>Title / Feature Type</th>
            </tr>
            </thead>
            <tbody>
            {% for contribution, content_type in contributions.items %}
              <tr>
                <td style="text-align: center; max-width: 100px;">
                  ${{ contribution.pay }}
                </td>
                <td style="text-align: center; max-width: 100px;">
                  {{ contribution.content.published|date:"m/d/y" }}
                </td>
                <td>
                  <a href="{{ contribution.content.get_absolute_url }}" style="color: #000;">
                    {{ contribution.content.title|safe }}
                  </a>
                  <br>
                  <span>
                    {{ content_type }}
                  </span>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        {% endautoescape %}
      </div>
    </div>
  </body>
</html>