<!-- 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;">
            <%= gettext("New report on <b>%{instance}</b>", instance: @instance_name) |> raw %>
          </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 30px 0px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
        >
          <p style="margin: 0;">
            <%= if @report.reporter.type == :Application and @report.reporter.preferred_username == "relay" do %>
              <%= gettext(
                "Someone on <b>%{instance}</b> reported the following content for you to analyze:",
                instance: escape_html(@report.reporter.domain)
              )
              |> raw %>
            <% else %>
              <%= gettext("<b>%{reporter}</b> reported the following content.",
                reporter: escape_html(display_name_and_username(@report.reporter))
              )
              |> raw %>
            <% end %>
          </p>
        </td>
      </tr>
      <%= if @report.reported do %>
        <tr>
          <td
            bgcolor="#ffffff"
            align="left"
            style="padding: 20px 30px 0px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
          >
            <p style="margin: 0;">
              <%= if @report.reported.type == :Group do %>
                <h3><%= gettext("Group reported") %></h3>
                <a
                  href={
                    "#{"#{Mobilizon.Web.Endpoint.url()}/@#{Mobilizon.Actors.Actor.preferred_username_and_domain(@report.reported)}"}"
                  }
                  target="_blank"
                >
                  <b><%= Mobilizon.Actors.Actor.display_name_and_username(@report.reported) %></b>
                </a>
              <% else %>
                <h3><%= gettext("Profile reported") %></h3>
                <b><%= Mobilizon.Actors.Actor.display_name_and_username(@report.reported) %></b>
              <% end %>
            </p>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              width="100%"
              style="width: 100% !important;"
            >
              <tr>
                <td
                  align="left"
                  valign="top"
                  width="600px"
                  height="1"
                  style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"
                >
                  <!--[if gte mso 15]>&nbsp;<![endif]-->
                </td>
              </tr>
            </table>
          </td>
        </tr>
      <% end %>
      <%= if Map.has_key?(@report, :events) and length(@report.events) > 0 do %>
        <tr>
          <td
            bgcolor="#ffffff"
            align="left"
            style="padding: 20px 30px 0px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
          >
            <p style="margin: 0;">
              <h3><%= gettext("Flagged events") %></h3>
              <%= for event <- @report.events do %>
                <a
                  href={"#{"#{Mobilizon.Web.Endpoint.url()}/events/#{event.uuid}"}"}
                  target="_blank"
                >
                  <%= gettext("%{title} by %{creator}",
                    title: event.title,
                    creator:
                      Mobilizon.Actors.Actor.preferred_username_and_domain(@report.reported)
                  ) %>
                </a>
              <% end %>
            </p>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              width="100%"
              style="width: 100% !important;"
            >
              <tr>
                <td
                  align="left"
                  valign="top"
                  width="600px"
                  height="1"
                  style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"
                >
                  <!--[if gte mso 15]>&nbsp;<![endif]-->
                </td>
              </tr>
            </table>
          </td>
        </tr>
      <% end %>
      <%= if Map.has_key?(@report, :comments) && length(@report.comments) > 0 do %>
        <tr>
          <td
            bgcolor="#ffffff"
            align="left"
            style="padding: 20px 30px 0px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
          >
            <h3><%= gettext("Flagged comments") %></h3>
            <%= for comment <- @report.comments do %>
              <p style="margin: 0;">
                <%= Mobilizon.Service.Formatter.HTML.strip_tags(comment.text) %>
              </p>
            <% end %>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              width="100%"
              style="width: 100% !important;"
            >
              <tr>
                <td
                  align="left"
                  valign="top"
                  width="600px"
                  height="1"
                  style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"
                >
                  <!--[if gte mso 15]>&nbsp;<![endif]-->
                </td>
              </tr>
            </table>
          </td>
        </tr>
      <% end %>
      <%= if Map.has_key?(@report, :content) do %>
        <tr>
          <td
            bgcolor="#ffffff"
            align="left"
            style="padding: 20px 30px 0px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
          >
            <p style="margin: 0">
              <h3><%= gettext("Reasons for report") %></h3>
              <%= @report.content |> raw %>
            </p>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              width="100%"
              style="width: 100% !important;"
            >
              <tr>
                <td
                  align="left"
                  valign="top"
                  width="600px"
                  height="1"
                  style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"
                >
                  <!--[if gte mso 15]>&nbsp;<![endif]-->
                </td>
              </tr>
            </table>
          </td>
        </tr>
      <% end %>
      <!-- BULLETPROOF BUTTON -->
      <tr>
        <td bgcolor="#ffffff" align="left">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 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, :moderation_report, @report.id)}"
                        }
                        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;"
                      >
                        <%= gettext("View report") %>
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
  </tr>
</table>
    <![endif]-->
  </td>
</tr>
