{% extends "base.html" %}

{% block head %}
  {% parent %}
  <link rel="stylesheet" href="prizes.css">
{% endblock %}

{% block content %}
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateBody">
  <tr>
    <td align="center">
      <table width="560" border="0" style="padding-top: 11px; padding-bottom: 11px;">
        <tr> 
          <td width="30%" style="background-color: #e3e3e3;padding-right: 5px;" valign="top" align="left">
            <table style="border: 14px solid #2d2d2d; background-color: #2d2d2d;" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td valign="bottom" colspan="2">
                  <img src="{{ userImgUrl }}" style="display: block; border: 1px solid #003466">
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" height="35" style="padding-top: 10px;">	
                    <tr>
                      <td width="33%" align="center" style="background-color: #535250; vertical-align: top;">
                        <table cellpadding="0" cellspacing="0" border="0" style="padding: 4px 0 4px 0;">
                          <tr>
                            <td style="background-color: #535250; vertical-align: middle;" valign="middle" height="18" align="center">
                              <img src="https://opps-notify.s3.amazonaws.com/play.png" style="padding: 0 2px 0 2px;"> 
                            </td>
                            <td style="background-color: #535250; vertical-align: middle; font-size: 8px; color: #97cc64; padding-right: 2px;" valign="middle">
                              &nbsp;{{ playCount }}
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="font-size: 8px; color: #868686; padding-top: 3px;" colspan="2">
                              PLAYS
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td width="1">
                      </td>
                      <td width="33%" align="center" style="background-color: #535250; vertical-align: top;">
                        <table cellpadding="0" cellspacing="0" border="0" style="padding: 4px 0 4px 0;">
                          <tr>
                            <td style="background-color: #535250; vertical-align: middle;" valign="middle" height="18" align="center">
                              <img src="https://opps-notify.s3.amazonaws.com/dialog_box.png" style="padding: 0 2px 0 2px;"> 
                            </td>
                            <td style="background-color: #535250; vertical-align: middle; font-size: 8px; color: #97cc64; padding-right: 2px;" valign="middle">
                              &nbsp;{{ commentCount }}
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="font-size: 8px; color: #868686; padding-top: 3px;" colspan="2">
                              COMMENTS
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td width="1">
                      </td>
                      <td width="33%" align="center" style="background-color: #535250;">
                        <table cellpadding="0" cellspacing="0" border="0" style="padding: 4px 0 4px 0;">
                          <tr>
                            <td style="background-color: #535250; vertical-align: middle;" valign="middle" height="18" align="center">
                              <img src="https://opps-notify.s3.amazonaws.com/check.png" style="padding: 0 2px 0 2px;"> 
                            </td>
                            <td style="background-color: #535250; vertical-align: middle; font-size: 8px; color: #97cc64; padding-right: 2px;" valign="middle">
                              &nbsp;{{ voteCount }}
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="font-size: 8px; color: #868686; padding-top: 3px;" colspan="2">
                              VOTES
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <a href="{{ facebookShareUrl }}"><img src="https://opps-notify.s3.amazonaws.com/facebook.png" width="100%"></a>
            <a href="{{ twitterShareUrl }}"><img src="https://opps-notify.s3.amazonaws.com/twitter.png" width="100%"></a>

          </td>
          <td width="2%">
            &nbsp;
          </td>

          <td valign="top" class="bodyContent" style="background-color: #e3e3e3;" width="68%">

            <!-- // Begin Module: Standard Content \\ -->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
              <tr>
                <td valign="top">
                  <div><strong>Hey</strong> {{ userName }},<br>
                    <br>
                    Your recent submission
                    <span style="color: #80aa56; font-weight: bold;">just reached
                      {{ playCount }} plays!
                    </span> Drunk with fame? <b>Keep promoting your track</b>
                    and be sure to
                    <a href="{{ opportunityListenUrl }}">check out the submissions</a>
                    by Indaba members who have recently listened to yours.<br>
                    <br/>
                    <br/>
                    <center>
                      <a href="{{ submissionStatsUrl }}"><img src="https://opps-notify.s3.amazonaws.com/seeallyourlisteners.png"></a></center>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr><td><hr width="95%"></td></tr>
  <tr>
    <td style="background-color: #e3e3e3; color: #444444;" colspan="2" width="100%" align="center">
      <br>
      <a href="{{ opportunityListenUrl }}" style="text-decoration: none; color: #2788cd; font-size: 18px; font-weight: bold;">Listen to more tracks!</a><br><br>
    </td>
  </tr>
</table>
{% endblock %}
