<mjml>
  <mj-include path="./partial/header.mjml" />

  <mj-body mj-class="bg--blue-100">
    <mj-wrapper css-class="wrapper" padding="0 40px 40px 40px">
      <mj-section css-class="wrapper-logo">
        <mj-column>
          <mj-image
            align="center"
            src="{{logo_img}}"
            width="320px"
            alt="{%trans 'Logo email' %}"
          />
        </mj-column>
      </mj-section>

      <mj-section mj-class="bg--white-100" padding="30px 20px 60px 20px">
        <mj-column>
          <!-- Invitation message -->
          <mj-text font-size="18px" color="#202124">
            <p><a href="mailto:{{ sender_email }}">{{ sender_email }}</a>  {% trans "invites you to join an ongoing video call" %}</p>
          </mj-text>

          <!-- Join button -->
          <mj-button href="{{ room_url }}" background-color="#1A73E8" color="white" border-radius="4px" font-weight="bold" font-size="16px" padding="20px 0">
            {% trans "JOIN THE CALL" %}
          </mj-button>

          <!-- Call URL -->
          <mj-text align="center" color="#5F6368" font-size="14px" padding-top="15px">
            <p>{{ room_link }}</p>
          </mj-text>

          <mj-divider border-width="1px" border-style="solid" border-color="#EEEEEE" padding="30px 0" />

          <!-- Additional information -->
          <mj-text font-size="14px">
            <p>{% trans "If you can't click the button, copy and paste the URL into your browser to join the call." %}</p>
          </mj-text>

          <!-- Quick tips -->
          <mj-text padding-top="20px" font-size="14px">
            <p>{% trans "Tips for a better experience:" %}</p>
            <ul>
              <li>{% trans "Use Chrome or Firefox for better call quality" %}</li>
              <li>{% trans "Test your microphone and camera before joining" %}</li>
              <li>{% trans "Make sure you have a stable internet connection" %}</li>
            </ul>
          </mj-text>

          <!-- Signature -->
          <mj-text font-size="14px">
            <p>
              {% blocktrans %}
              Thank you for using {{brandname}}.
              {% endblocktrans %}
            </p>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>

  <mj-include path="./partial/footer.mjml" />
</mjml>
