<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
        color: #334155;
        max-width: 640px;
        margin: 0 auto;
        padding: 20px;
      }
      .header {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: white;
        padding: 30px;
        border-radius: 8px 8px 0 0;
        text-align: center;
      }
      .header h1 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
      }
      .header p {
        margin: 8px 0 0 0;
        opacity: 0.9;
      }
      .content {
        background: white;
        border: 1px solid #e2e8f0;
        border-top: none;
        padding: 30px;
        border-radius: 0 0 8px 8px;
      }
      .greeting {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: #1e293b;
      }
      .info-box {
        background: #f8fafc;
        border-left: 4px solid #6366f1;
        padding: 16px;
        margin: 20px 0;
        border-radius: 4px;
      }
      .info-box strong {
        color: #1e293b;
      }
      .button {
        display: inline-block;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: white;
        padding: 14px 32px;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        margin: 24px 0;
        text-align: center;
      }
      .button:hover {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
      }
      .footer {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e2e8f0;
        font-size: 14px;
        color: #64748b;
      }
      .expiry-notice {
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        padding: 12px;
        margin: 16px 0;
        font-size: 14px;
        border-radius: 4px;
      }
      .entry-box {
        background: #f0fdf4;
        border-left: 4px solid #10b981;
        padding: 16px;
        margin: 20px 0;
        border-radius: 4px;
      }
      .entry-box h3 {
        margin: 0 0 12px 0;
        color: #065f46;
        font-size: 16px;
      }
      .entry-translations {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        margin-top: 12px;
      }
      .entry-translations dt {
        font-weight: 600;
        color: #064e3b;
      }
      .entry-translations dd {
        margin: 0;
        color: #1e293b;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Sanasto Wiki</h1>
      <p>Kristillisyyden sanasto</p>
    </div>

    <div class="content">
      <p class="greeting">Hello <%= @user.name %>,</p>

      <% if @approved_entry %>
        <p>
          Great news! Your entry request has been <strong>approved</strong> and is ready to be published.
        </p>

        <div class="entry-box">
          <h3>✓ Your Approved Entry</h3>
          <p style="margin: 0 0 4px 0;"><strong>Category:</strong> <%= @approved_entry.category.to_s.humanize %></p>

          <dl class="entry-translations">
            <% if @approved_entry.fi.present? %>
              <dt>🇫🇮 Finnish:</dt>
              <dd><%= @approved_entry.fi %></dd>
            <% end %>
            <% if @approved_entry.en.present? %>
              <dt>🇬🇧 English:</dt>
              <dd><%= @approved_entry.en %></dd>
            <% end %>
            <% if @approved_entry.sv.present? %>
              <dt>🇸🇪 Swedish:</dt>
              <dd><%= @approved_entry.sv %></dd>
            <% end %>
            <% if @approved_entry.no.present? %>
              <dt>🇳🇴 Norwegian:</dt>
              <dd><%= @approved_entry.no %></dd>
            <% end %>
            <% if @approved_entry.ru.present? %>
              <dt>🇷🇺 Russian:</dt>
              <dd><%= @approved_entry.ru %></dd>
            <% end %>
            <% if @approved_entry.de.present? %>
              <dt>🇩🇪 German:</dt>
              <dd><%= @approved_entry.de %></dd>
            <% end %>
          </dl>
        </div>

        <p>
          To complete the process and publish your entry, please accept this invitation to create your account on <strong>Sanasto Wiki</strong>.
        </p>
      <% else %>
        <p>
          The <strong>Sanasto Wiki</strong> let you search words and expressions you might need for interpretation work in the living Christianity.
        </p>

        <p>With a login account, you can contribute to this work.</p>
      <% end %>

      <div class="info-box">
        <p style="margin: 0;"><strong>Your Account Details:</strong></p>
        <p style="margin: 8px 0 0 0;">
          Email: <%= @user.email %><br>
          Role: <%= @user.role.titleize %>
        </p>
      </div>

      <p>
        To accept this invitation and set your password, click the button below:
      </p>

      <div style="text-align: center;">
        <%= link_to "Accept Invitation", @invitation_url, class: "button" %>
      </div>

      <div class="expiry-notice">
        This invitation will expire on <strong><%= @expires_at.strftime("%B %d, %Y at %I:%M %p %Z") %></strong>.
      </div>

      <p>
        You can also copy and paste this link into your browser:
      </p>
      <p style="word-break: break-all; color: #6366f1; font-size: 14px;">
        <%= @invitation_url %>
      </p>

      <div class="footer">
        <p>
          If you weren't expecting this invitation, you can safely ignore this email.
        </p>
        <p style="margin-top: 12px;">
          Questions? Reply to this email.
        </p>
      </div>
    </div>
  </body>
</html>
