!!!
-# From https://github.com/TedGoas/Cerberus/blob/master/cerberus-hybrid.html
-# Run through html2haml and cleaned up
%html{ lang: 'en', xmlns: 'http://www.w3.org/1999/xhtml', 'xmlns:o' => 'urn:schemas-microsoft-com:office:office', 'xmlns:v' => 'urn:schemas-microsoft-com:vml' }

  %head
    %meta{ charset: 'utf-8' }
    %meta{ name: 'viewport', content: 'width=device-width' }
    %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }

    -# Disable auto-scale in iOS 10 Mail entirely
    %meta{ name: 'x-apple-disable-message-reformatting' }

    -# The title tag shows in email notifications, like Android 4.4.
    %title= t('workarea.admin.layout.mailer.title', host: @host)

    -# BEGIN: web font / @font-face
    -# You're able to load the webfont from your build here, if you so desire.
    -# This is commented out, by default, since it's something you'll have to
    -# customize:
    -#
      -# Desktop Outlook chokes on web font references and defaults to Times New
      -# Roman, so we force a safe fallback font.
      /[if mso]
        :css
          * { font-family: Helvetica, Arial, sans-serif; }
    -# END: web font / @font-face


    -# BEGIN: CSS Reset
    -# This `style` element carries a `data-premailer='ignore'` attribute, since
    -# these will work directly from here.
    %style{ data: { premailer: 'ignore' } }
      :preserve
        /* Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

        /* Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        /* Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin: 0 !important;
        }

        /* Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* Fixes webkit padding issue. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }

        /* Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }

        /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
        a {
            text-decoration: none;
        }

        /* A work-around for email clients meddling in triggered links. */
        a[x-apple-data-detectors],  /* iOS */
        .unstyle-auto-detected-links a,
        .aBn {
            border-bottom: 0 !important;
            cursor: default !important;
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* What it does: Prevents Gmail from changing the text color in conversation threads. */
        .im {
            color: inherit !important;
        }

        /* Prevents Gmail from displaying a download button on large, non-linked images. */
        .a6S {
            display: none !important;
            opacity: 0.01 !important;
        }
        /* If the above doesn't work, add a .g-img class to any image in question. */
        img.g-img + div {
            display: none !important;
        }

        /* Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
        /* Create one of these media queries for each additional viewport size you'd like to fix */

        /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
        @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
            u ~ div .email-container {
                min-width: 320px !important;
            }
        }
        /* iPhone 6, 6S, 7, 8, and X */
        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
            u ~ div .email-container {
                min-width: 375px !important;
            }
        }
        /* iPhone 6+, 7+, and 8+ */
        @media only screen and (min-device-width: 414px) {
            u ~ div .email-container {
                min-width: 414px !important;
            }
        }

    -# Makes background images in 72ppi Outlook render at correct size.
    /[if gte mso 9]
      :preserve
        <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
    -# END: CSS Reset

    -# The rest of the styles are loaded from the email manifest and will be
    -# applied to each element via premailer.
    = stylesheet_link_tag 'workarea/admin/email'

  %body{ style: 'mso-line-height-rule: exactly;', width: '100%' }
    %center
      /[if mso | IE]
        <table class='mso-wrapper' role="presentation" width="100%" align="center"><tr><td>

      -# Preheader Text
      -# A preheader (otherwise known as a ‘Johnson Box’) is the short summary
      -# that follows the subject line when an email is viewed in the inbox.
      - if content_for?(:preheader_text)
        .preheader-text= yield :preheader_text

      -# Preview Text Spacing Hack
      -# Create white space after the desired preview text so email clients
      -# don’t pull other distracting text into the inbox preview. Extend as
      -# necessary.
      .hidden!= '&zwnj;&nbsp;' * 18

      %table.email-container{ role: 'presentation', width: Workarea.config.admin_email_width }
        %tr
          %td.email-header
            = link_to "http://#{Workarea.config.host}/", class: 'logo' do
              = image_tag url_to_image('workarea/admin/email_logo.png'), alt: t('workarea.admin.layout.mailer.homepage_link'), class: 'logo__image', border: 0, width: 220

      %table.email-container.email-container--main{ role: 'presentation', width: Workarea.config.admin_email_width }
        = yield

      %table.email-container{ role: 'presentation', width: Workarea.config.admin_email_width }
        %tr
          %td.email-footer
            Workarea<br>22 S 3rd St, Philadelphia, PA 19106

      /[if mso | IE]
        </td></tr></table>