<style>
  .notification-type {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
  }
  .priority-high {
    background-color: #dc3545;
    color: white;
  }
  .priority-medium {
    background-color: #ffc107;
    color: #212529;
  }
  .priority-low {
    background-color: #28a745;
    color: white;
  }
  .priority-urgent {
    background-color: #6f42c1;
    color: white;
  }
  .notification-content h2 {
    color: #333;
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
  }
  .notification-content p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

<div class="notification-content">
  {{#if type}}
    <div class="notification-type priority-{{#if priority}}{{priority}}{{else}}low{{/if}}">
      {{type}}
    </div>
  {{/if}}

  {{#if title}}
    <h2>{{title}}</h2>
  {{/if}}

  {{#if userName}}
    <p>Hello {{userName}},</p>
  {{/if}}

  <p>{{message}}</p>

  {{#if actionUrl}}
    <p style="text-align: center; margin: 28px 0 16px 0;">
      {{!--
        Inline styles required: baseLayout `.content a` is green (#3A5A40), which made
        white-on-green button text invisible when only class styles applied.
        Use a full absolute URL or deep link in actionUrl (do not prefix APP_URL).
      --}}
      <a
        href="{{actionUrl}}"
        class="button"
        style="background-color: #3A5A40; color: #ffffff !important; padding: 14px 28px; text-decoration: none !important; border-radius: 8px; font-weight: 600; display: inline-block; font-size: 15px;"
      >
        {{#if actionText}}{{actionText}}{{else}}Open Spiriment{{/if}}
      </a>
    </p>
  {{/if}}
</div>

<div
  style="
  margin-top: 32px;
  padding: 16px;
  background: #F4F7F3;
  border-radius: 6px;
  border-left: 4px solid #3A5A40;
"
>
  <div style="font-size: 13px; color: #35502F; line-height: 1.5;">
    <strong>Note:</strong>
    This is an automated notification from Spiriment. If you have any questions or
    need assistance, please don't hesitate to contact our support team.
  </div>
</div>
