{% load i18n %}
<!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" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CivilHub.org</title>
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Lato:400);
    /* Take care of image borders and formatting */
    img {
      max-width: 600px;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }
    a {
      text-decoration: none;
      border: 0;
      outline: none;
      color: #0582F7;
    }
    a img {
      border: none;
    }
    /* General styling */
    td, h1, h2, h3  {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: 400;
    }
    body {
      -webkit-font-smoothing:antialiased;
      -webkit-text-size-adjust:none;
      width: 100%;
      height: 100%;
      color: #37302d;
      background: #ffffff;
    }
    table {
      background:
    }
    h1, h2, h3 {
      padding: 0;
      margin: 0;
      color: #4d4d4d;
      font-weight: 400;
    }
    h1{
      font-weight: bold;
    }
    h3 {
      color: #21c5ba;
      font-size: 24px;
    }
  </style>
  <style type="text/css" media="screen">
    @media screen {
       /* Thanks Outlook 2013! http://goo.gl/XLxpyl*/
      td, h1, h2, h3 {
        font-family: 'Lato', 'Helvetica Neue', 'Arial', 'sans-serif' !important;
      }
    }
  </style>
  <style type="text/css" media="only screen and (max-width: 480px)">
    /* Mobile styles */
    @media only screen and (max-width: 480px) {
      table[class="w320"] {
        width: 320px !important;
      }
      table[class="w300"] {
        width: 300px !important;
      }
      table[class="w290"] {
        width: 290px !important;
      }
      td[class="w320"] {
        width: 320px !important;
      }
      td[class="mobile-center"] {
        text-align: center !important;
      }
      td[class="mobile-padding"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 20px !important;
      }
    }
  </style>
</head>
<body class="body" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
<table align="center" cellpadding="0" cellspacing="0" width="100%" height="100%" >
  <tr>
    <td align="center" valign="top" bgcolor="#ffffff"  width="100%">
    <table cellspacing="0" cellpadding="0" width="100%">
      <tr>
        <td style="border-bottom: 3px solid #f0f0f0;" width="100%">
          <center>
            <table cellspacing="0" cellpadding="0" width="500" class="w320">
              <tr>
                <td valign="top" style="padding:20px 0; text-align:left;" class="mobile-center">
                  <a href="https://civilhub.org"><img width="137" height="25" src="https://civilhub.org/static/places_core/img/emails/logo.png"></a>
                </td>
              </tr>
            </table>
          </center>
        </td>
      </tr>
      <tr>
        <td valign="top" style="background-color:#f7f7f7;">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:150px;">
           <v:textbox inset="0,0,0,0">
          <![endif]-->
          <div>
            <center>
              <table cellspacing="0" cellpadding="0" width="530" height="150" class="w320">
                <tr>
                  <td valign="middle" style="vertical-align:middle; padding-right: 15px; padding-left: 15px; text-align:left;" class="mobile-center" height="150">
                    <h1>{% trans "Recent activities" %}</h1>
                  </td>
                </tr>
              </table>
            </center>
          </div>
          <!--[if gte mso 9]>
            </v:textbox>
          </v:rect>
          <![endif]-->
        </td>
      </tr>
      <tr>
        <td valign="top" style="background-color:#f7f7f7;">
          <center>
            <table cellspacing="0" cellpadding="0" width="500" class="w320">
              <tr>
                <td>
                  <table cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                      <td class="mobile-padding" style="text-align:left;">
                        <p>{% trans "Recent activities from locations you follow" %}:<p><br><br>
                        {% for action in stream %}
                          <a href="{{ action.actor.profile.get_absolute_url }}">{{ action.actor.get_full_name }}</a>
                          {{ action.verb }}
                          {% if action.action_object %}
                            {% if action.action_object.get_absolute_url %}<a href="{{ action.action_object.get_absolute_url }}">{{ action.action_object }}</a>
                            {% else %}{{ action.action_object }}{% endif %}
                          {% endif %}
                          {% if action.action_object and action.target %}to{% endif %}
                          {% if action.target %}
                            {% if action.target.get_absolute_url %}<a href="{{ action.target.get_absolute_url }}">{{ action.target }}</a>
                            {% else %}{{ action.target }}{% endif %}
                          {% endif %}
                          {{ action.timestamp|timesince }} {% trans "ago" %}
                        {% endfor %}
                        <p>{% blocktrans %}If you don't want to receive such emails, change notification settings in your user panel.{% endblocktrans %}<p><br><br><br>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </center>
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" valign="top">
          <center>
            <table style="margin:0 auto;" cellspacing="0" cellpadding="5" width="100%">
              <tr>
                <td style="text-align:center; margin:0 auto; border-top: 3px solid #f0f0f0;" width="100%" bgcolor="#ffffff">
                   <br>
                   <a href="https://civilhub.org" style="text-align:center; color: #4d4d4d;">
                    CivilHub.org
                   </a>
                </td>
              </tr>
            </table>
          </center>
          <center>
            <table cellspacing="0" cellpadding="0" width="500" class="w320">
              <tr>
                <td>
                  <table cellspacing="0" cellpadding="30" width="100%">
                    <tr>
                      <td style="text-align:center; padding: 0 30px 30px 30px;">
                        <a href="https://civilhub.org/terms/" style="font-size: 12px;">{% trans "Terms of Use" %}</a> | <a href="https://civilhub.org/privacy/" style="font-size: 12px;">{% trans "Privacy Policy" %}</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </center>
        </td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>
