@props(['heading', 'preheader' => null, 'greeting' => null])

{{--
    The one layout every CluPilot mail uses.

    Tables and inline styles throughout, and not out of nostalgia: Outlook
    renders with Word, which has no flexbox, no grid, and drops <style> blocks
    in several configurations. Anything that has to survive there has to be an
    attribute on the element it styles.

    Colours come from resources/css/portal-tokens.css by hand, because a mail
    cannot load a stylesheet. The button is --accent-active (#b8500a), never the
    brand orange (#f97316): white on the brand orange is 2.9:1 and unreadable,
    which is the single most common way this palette gets broken and the reason
    the two tones have different names.

    No image, no web font, no external asset of any kind. Half of all clients
    block remote content by default, so a design that needs an image to make
    sense is a design that is broken for half of its readers.
--}}
<div style="margin:0;padding:0;background-color:#f6f6f8;">
@if ($preheader)
{{-- The line shown next to the subject in the inbox list. Hidden in the body
     itself, or it reads as a duplicate first sentence. --}}
<div style="display:none;font-size:1px;color:#f6f6f8;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">{{ $preheader }}</div>
@endif

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f6f6f8;border-collapse:collapse;">
<tr><td align="center" style="padding:32px 16px;">

  {{-- FLUID, with 600 as a ceiling rather than a floor. width="600" plus
       width:600px forced every phone to scroll sideways to read a sentence —
       reported exactly that way. A mail cannot rely on a media query (Outlook
       renders with Word and drops <style> blocks, which is why this file is
       inline attributes throughout), so the layout has to shrink by itself. --}}
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;border-collapse:collapse;font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;">

    <tr><td style="padding:0 0 20px 4px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
        <tr>
          <td style="padding-right:10px;">
            {{-- The mark, not just its orange tile. It shipped as an empty
                 square: the ascent inside it lives in an SVG the site loads, and
                 a mail cannot — Gmail strips inline SVG, Outlook renders with
                 Word, and this layout carries no image by design (half of all
                 clients block remote content).

                 So the shape is drawn with a character every mail font has.
                 ▲ is the mark's own silhouette — the autopilot ascent — in white
                 on the accent tile, which is the whole of what a reader
                 recognises at 26 pixels. --}}
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
              <tr><td width="26" height="26" align="center" valign="middle" style="width:26px;height:26px;background-color:#f97316;border-radius:7px;text-align:center;">
                <span style="display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:26px;color:#ffffff;">&#9650;</span>
              </td></tr>
            </table>
          </td>
          <td style="font-size:17px;line-height:26px;color:#17171c;letter-spacing:-0.2px;">
            {{-- The whole name, as the wordmark writes it: CluPilot in ink,
                 Cloud in the muted tone beside it. --}}
            <span style="font-weight:700;color:#17171c;">CluPilot</span> <span style="font-weight:600;color:#6e6e7a;">Cloud</span>
          </td>
        </tr>
      </table>
    </td></tr>

    <tr><td style="background-color:#ffffff;border:1px solid #e9e9ee;border-radius:12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">

        <tr><td style="padding:40px 24px 0 24px;">
          <h1 style="margin:0 0 14px 0;font-size:25px;line-height:32px;font-weight:700;color:#17171c;letter-spacing:-0.5px;">{{ $heading }}</h1>
          @if ($greeting)
            <p style="margin:0 0 8px 0;font-size:15px;line-height:24px;color:#43434e;">{{ $greeting }}</p>
          @endif
        </td></tr>

        {{ $slot }}

      </table>
    </td></tr>

    <tr><td align="center" style="padding:22px 16px 0 16px;text-align:center;">
      <p style="margin:0 0 10px 0;font-size:12px;line-height:18px;color:#6e6e7a;text-align:center;">{{ __('mail.why_you_got_this') }}</p>
      <p style="margin:0 0 6px 0;font-size:12px;line-height:18px;color:#6e6e7a;text-align:center;">
        <a href="{{ route('legal.impressum') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.imprint') }}</a>
        &nbsp;·&nbsp;
        <a href="{{ route('legal.datenschutz') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.privacy') }}</a>
        &nbsp;·&nbsp;
        <a href="{{ route('legal.agb') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.terms') }}</a>
      </p>
      <p style="margin:0 0 6px 0;font-size:12px;line-height:18px;color:#6e6e7a;text-align:center;">
        {{ __('mail.domains_note', ['domains' => implode(' · ', array_keys(App\Support\OfficialDomains::registrable()))]) }}
        <a href="{{ route('security') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.domains_link') }}</a>
      </p>
      <p style="margin:0;font-size:12px;line-height:18px;color:#b4b4be;text-align:center;">{{ __('mail.sender_line') }}</p>
      <p style="margin:10px 0 0 0;font-size:12px;line-height:18px;color:#b4b4be;text-align:center;">{{ __('mail.transactional_note') }}</p>
    </td></tr>

  </table>

</td></tr>
</table>
</div>