<!-- 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>
