mobilizon/lib/web/templates/email/participation/event_card.html.heex

<%= if @event.picture do %>
  <!-- event image -->
  <%= render("participation/card/_picture.html", event: @event) %>
  <!-- event image end -->
<% end %>
<%= render("participation/card/_title.html", event: @event) %>
<%= render("participation/card/_metadata.html",
  event: @event,
  timezone: @timezone,
  locale: @locale,
  action: @action
) %>
<%= case @action do %>
  <% "participation" -> %>
    <div
      class="event__content_attend"
      style="vertical-align: middle; margin: 0; padding: 0; border: 0;"
    >
      <table
        class="button btn-attend event__content_position"
        style="border-spacing: 0; border-collapse: collapse; vertical-align: baseline; text-align: left; width: auto; 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: 20px 0 0; border: 0;"
              valign="baseline"
              align="left"
            >
              <table style="border-spacing: 0; border-collapse: collapse; vertical-align: baseline; text-align: left; 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(255,255,255); font-family: Helvetica,Arial,sans-serif; font-weight: 500; line-height: 1.3; font-size: 16px; border-radius: 4px; margin: 0; padding: 0px; border: none;"
                      valign="middle"
                      bgcolor="3C376E"
                      align="center"
                    >
                      <a
                        href={url(~p"/events/#{@event.uuid}")}
                        style="color: rgb(255,255,255); font-family: Helvetica,Arial,sans-serif; text-align: left; line-height: 14px; text-decoration: none; vertical-align: baseline; font-size: 20px; display: inline-block; border: 1px solid #3C376E; border-radius: 15px; white-space: nowrap; margin: 0; padding: 15px 25px; border: none;"
                        target="_blank"
                      >
                        <%= gettext("Manage your participation") %>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  <% "event" -> %>
    <div
      class="event__content_attend"
      style="vertical-align: middle; margin: 0; padding: 0; border: 0;"
    >
      <table
        class="button btn-attend event__content_position"
        style="border-spacing: 0; border-collapse: collapse; vertical-align: baseline; text-align: left; width: auto; 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: 20px 0 0; border: 0;"
              valign="baseline"
              align="left"
            >
              <table style="border-spacing: 0; border-collapse: collapse; vertical-align: baseline; text-align: left; 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(255,255,255); font-family: Helvetica,Arial,sans-serif; font-weight: 500; line-height: 1.3; font-size: 16px; border-radius: 4px; margin: 0; padding: 0px; border: none;"
                      valign="middle"
                      bgcolor="3C376E"
                      align="center"
                    >
                      <a
                        href={url(~p"/events/#{@event.uuid}")}
                        style="color: rgb(255,255,255); font-family: Helvetica,Arial,sans-serif; text-align: left; line-height: 14px; text-decoration: none; vertical-align: baseline; font-size: 20px; display: inline-block; border: 1px solid #3C376E; border-radius: 15px; white-space: nowrap; margin: 0; padding: 15px 25px; border: none;"
                        target="_blank"
                      >
                        <%= gettext("Participate") %>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  <% nil -> %>
<% end %>
<%= if @event.description && @action != nil do %>
  <div
    class="event-working"
    style="vertical-align: baseline; margin: 0 0 0 10px; padding: 7.5px 0 15px; border: 0;"
  >
    <p
      style="color: rgb(46,62,72); font-family: Helvetica,Arial,sans-serif; font-weight: 700; line-height: 1.5; font-size: 16px; vertical-align: baseline; margin: 0; padding: 0 0 7.5px; border: 0;"
      align="left"
    >
      <%= gettext("Details") %>
    </p>
    <p
      class="event-working__detail"
      style="color: rgb(87,100,108); font-family: Helvetica,Arial,sans-serif; font-weight: 300; line-height: 1.5; font-size: 16px; vertical-align: baseline; margin: 0; padding: 0; border: 0;"
      align="left"
    >
      <%= process_description(@event.description) %>
    </p>
    <%= if String.length(@event.description) > 200 do %>
      <p
        style="color: rgb(10,10,10); font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 1.3; font-size: 16px; vertical-align: baseline; margin: 0; padding: 0; border: 0;"
        align="left"
      >
        <a
          href={url(~p"/events/#{@event.uuid}")}
          style="color: rgb(254,56,89); font-family: Helvetica,Arial,sans-serif; font-weight: 400; text-align: left; line-height: 1.5; text-decoration: none; vertical-align: baseline; font-size: 16px; margin: 0; padding: 0; border: 0;"
          target="_blank"
        >
          <%= gettext("Read more") %>
        </a>
      </p>
    <% end %>
  </div>
<% end %>