<!-- HERO -->
<tr>
  <td bgcolor="#474467" align="center" style="padding: 0px 10px 0px 10px;">
    <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
          <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
      <tr>
        <td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #3A384C; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 48px;">
          <h1 style="font-size: 48px; font-weight: 400; margin: 0;">
            <%= @subject %>
          </h1>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
  </tr>
</table>
    <![endif]-->
  </td>
</tr>
<!-- COPY BLOCK -->
<tr>
  <td bgcolor="#E6E4F4" align="center" style="padding: 0px 10px 0px 10px;">
    <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
          <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
      <!-- COPY -->
      <tr>
        <td bgcolor="#ffffff" align="left" style="padding: 20px 5% 0px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
          <p style="margin: 0;">
            <%= case @recap do %>
              <% :one_day -> %>
                <% dgettext("activity", "Here's your daily activity recap") %>
              <% :one_week -> %>
                <% dgettext("activity", "Here's your weekly activity recap") %>
              <% :one_hour -> %>
                <%= dngettext("activity", "There has been an activity!", "There has been some activity!", @total_number_activities) %>
              <% false -> %>
                <%= dngettext("activity", "There has been an activity!", "There has been some activity!", @total_number_activities) %>
            <% end %>
          </p>
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="left">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center" style="border-radius: 3px; text-align: left; padding: 10px 5% 0px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400;line-height: 25px;" >
                <ul style="margin: 0 auto; padding-left: 15px;">
                  <%= for {_, group_activities} <- @activities do %>
                  <li style="list-style: none;border-bottom: solid 2px #d7d6de;padding: 10px 0;">
                    <%= if hd(group_activities).group do %>
                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                          <td align="left">
                            <table align="left">
                              <tr>
                                <%= if hd(group_activities).group.avatar do %>
                                  <td width="85">
                                    <a href={"#{ Routes.page_url(Mobilizon.Web.Endpoint, :actor, Mobilizon.Actors.Actor.preferred_username_and_domain(hd(group_activities).group)) |> URI.decode() }"} target="_blank" style="text-decoration: none;">
                                      <img width="80" src={"#{ hd(group_activities).group.avatar.url }"} style="width: 80px;max-height: 100px;" style="margin:0; padding:0; border:none; display:block;" border="0" alt="" />
                                    </a>
                                  </td>
                                <% end %>
                                <td width="400">
                                  <table width="" cellpadding="0" cellspacing="0" border="0" style="max-width: 400px;width: 100%;" align="left">
                                    <tr>
                                      <td align="left">
                                        <a href={"#{ Routes.page_url(Mobilizon.Web.Endpoint, :actor, Mobilizon.Actors.Actor.preferred_username_and_domain(hd(group_activities).group)) |> URI.decode() }"} target="_blank" style="text-decoration: none;color: #474467;font-family: 'Roboto', Helvetica, Arial, sans-serif;font-size: 18px;font-weight: bold;line-height: 25px;">
                                          <%= hd(group_activities).group.name || "@#{Mobilizon.Actors.Actor.preferred_username_and_domain(hd(group_activities).group)}" %>
                                        </a>
                                      </td>
                                    </tr>
                                    <%= if hd(group_activities).group.name do %>
                                      <tr>
                                        <td align="left">
                                          <a href={"#{ Routes.page_url(Mobilizon.Web.Endpoint, :actor, Mobilizon.Actors.Actor.preferred_username_and_domain(hd(group_activities).group)) |> URI.decode() }"} target="_blank" style="text-decoration: none;display: block;color: #7a7a7a;font-family: 'Roboto', Helvetica, Arial, sans-serif;font-size: 16px;font-weight: 400;line-height: 25px;">
                                            @<%= Mobilizon.Actors.Actor.preferred_username_and_domain(hd(group_activities).group) %>
                                          </a>
                                        </td>
                                      </tr>
                                    <% end %>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    <% end %>
                    <ul style="padding-left: 25px;margin-top: 10px;">
                      <%= for activity <- Enum.take(group_activities, 5) do %>
                      <li style="margin-bottom: 7px;">
                        <p style="margin: 0;">
                          <%= case activity.type do %>
                            <% :discussion -> %>
                              <%= render("activity/_discussion_activity_item.html", activity: activity) %>
                            <% :event -> %>
                              <%= render("activity/_event_activity_item.html", activity: activity) %>
                            <% :group -> %>
                              <%= render("activity/_group_activity_item.html", activity: activity) %>
                            <% :member -> %>
                              <%= render("activity/_member_activity_item.html", activity: activity) %>
                            <% :post -> %>
                              <%= render("activity/_post_activity_item.html", activity: activity) %>
                            <% :resource -> %>
                              <%= render("activity/_resource_activity_item.html", activity: activity) %>
                            <% :comment -> %>
                              <%= render("activity/_comment_activity_item.html", activity: activity) %>
                          <% end %>
                        </p>
                        <%= unless @single_activity do %>
                        <em>
                          <%= datetime_to_string(activity.inserted_at, @locale, :short) %>
                        </em>
                        <% end %>
                      </li>
                      <% end %>
                    </ul>
                    <%= if length(group_activities) > 5 do %>
                      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td bgcolor="#ffffff" align="center" style="padding: 20px 30px;">
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td align="center" style="border-radius: 3px;" bgcolor="#3C376E">
                                  <a href={"#{ Routes.page_url(Mobilizon.Web.Endpoint, :actor, Mobilizon.Actors.Actor.preferred_username_and_domain(hd(group_activities).group)) |> URI.decode() }/timeline"} target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #3C376E; display: inline-block;">
                                    <%= dngettext "activity", "View one more activity", "View %{count} more activities", length(group_activities) - 5, %{count: length(group_activities) - 5} %>
                                  </a>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    <% end %>
                  </li>
                  <% end %>
                </ul>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px;" >
          <p style="margin: 0">
            <%= dgettext("activity", "Don't want to receive activity notifications? You may change frequency or disable them in %{tag_start}your settings%{tag_end}.", %{tag_start: "<a href=\"#{Mobilizon.Web.Endpoint.url()}/settings/notifications\">", tag_end: "</a>"}) |> raw %>
          </p>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
  </tr>
</table>
    <![endif]-->
  </td>
</tr>