<table style="border-spacing: 0; border-collapse: collapse; vertical-align: baseline; text-align: left; width: 100%; display: table; margin: 0; padding: 0; border: 0;">
  <tbody style="vertical-align: baseline; margin: 0; padding: 0; border: 0;">
    <tr style="vertical-align: baseline; margin: 0; padding: 0; border: 0;" align="left">
      <td
        style="word-wrap: break-word; border-collapse: collapse; color: rgb(10,10,10); font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 1.3; font-size: 16px; margin: 0; padding: 0; border: 0;"
        valign="baseline"
        align="left"
      >
        <a
          href={Routes.page_url(Mobilizon.Web.Endpoint, :event, @event.uuid)}
          style="color: rgb(66,81,90); font-family: Helvetica,Arial,sans-serif; font-weight: 700; text-align: left; line-height: 1.4; text-decoration: none; vertical-align: baseline; font-size: 22px; letter-spacing: 0.2px; margin: 0 0 30px; padding: 0; border: 0;"
          target="_blank"
        >
          <%= @event.title %>
        </a>
        <div style="vertical-align: baseline; width: 100%; margin: 0 0 0 10px; padding: 0; border: 0;display: flex;">
          <%= cond do %>
            <% @event.attributed_to != nil and @event.attributed_to.avatar != nil && @event.attributed_to.avatar.url != nil -> %>
              <img
                style="float: left;border-radius: 75%;margin-right: 8px;max-width: 30px;margin-top: auto;margin-bottom: 5px;"
                src={@event.attributed_to.avatar.url}
              />
            <% @event.organizer_actor.avatar != nil and @event.organizer_actor.avatar.url != nil -> %>
              <img
                style="float: left;border-radius: 75%;margin-right: 8px;max-width: 30px;margin-top: auto;margin-bottom: 5px;"
                src={@event.organizer_actor.avatar.url}
              />
            <% true -> %>
          <% end %>
          <div style="vertical-align: top; float: left; width: 75%; margin: 0; padding: 0; border: 0;">
            <p
              style="font-family: Helvetica,Arial,sans-serif; font-weight: 400; line-height: 1.5; font-size: 16px; vertical-align: baseline; margin: 0; padding: 0; border: 0;"
              align="left"
            >
              <%= if @event.attributed_to do %>
                <a
                  href={
                    Routes.page_url(
                      Mobilizon.Web.Endpoint,
                      :actor,
                      Mobilizon.Actors.Actor.preferred_username_and_domain(@event.attributed_to)
                    )
                    |> URI.decode()
                  }
                  style="color: rgb(254,56,89); font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 1.3; text-decoration: none; vertical-align: baseline; margin: 0; padding: 0; border: 0;"
                  target="_blank"
                >
                  <%= @event.attributed_to.name || @event.attributed_to.preferred_username %>
                </a>
              <% else %>
                <span style="font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 1.3; text-decoration: none; vertical-align: baseline; margin: 0; padding: 0; border: 0;">
                  <%= @event.organizer_actor.name || @event.organizer_actor.preferred_username %>
                </span>
              <% end %>
            </p>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
