<div class="mailpoet_browser_preview_link">
  <a href="{{ previewUrl }}" target="_blank" rel="noopener noreferrer"><%= _x('Open in new tab', 'Open email preview in new tab') %></a>
</div>
<div class="mailpoet_browser_preview_toggle">
  <label>
    <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="desktop" {{#ifCond previewType '==' 'desktop'}}CHECKED{{/ifCond}} /><%= _x('Desktop', 'Desktop browser preview mode') %>
  </label>
  <label>
    <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="mobile" {{#ifCond previewType '==' 'mobile'}}CHECKED{{/ifCond}} /><%= _x('Mobile', 'Mobile browser preview mode') %>
  </label>
  <label>
    <input data-automation-id="switch_send_to_email" type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="send_to_email" {{#ifCond previewType '==' 'send_to_email'}}CHECKED{{/ifCond}} /><%= __('Send to email') %>
  </label>
</div>
<div
  class="
    mailpoet_browser_preview_container
   {{#ifCond previewType '==' 'mobile'}}mailpoet_browser_preview_container_mobile{{/ifCond}}
   {{#ifCond previewType '==' 'desktop'}}mailpoet_browser_preview_container_desktop{{/ifCond}}
   {{#ifCond previewType '==' 'send_to_email'}}mailpoet_browser_preview_container_send_to_email{{/ifCond}}
  "
>
  <div class="mailpoet_browser_preview_border">
    <iframe id="mailpoet_browser_preview_iframe" class="mailpoet_browser_preview_iframe" src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>
  </div>

  <div class="mailpoet_preview_send_to_email">
    <iframe name="mailpoet_save_preview_email_for_autocomplete" style="display:none" src="about:blank"></iframe>
    <form target="mailpoet_save_preview_email_for_autocomplete">
      <div class="mailpoet_form_field">
        <label>
          <%= __('Send preview to') %><br />
          <input id="mailpoet_preview_to_email" class="mailpoet_input mailpoet_input_full" type="text" name="to_email" value="{{ email }}" autocomplete="email" />
        </label>
      </div>

      <div class="mailpoet_form_field relative-holder">
        <input
          type="submit"
          id="mailpoet_send_preview"
          class="button button-primary mailpoet_button_full"
          value="
            {{#if sendingPreview}}<%= __('Sending…') %>{{/if}}
            {{#unless sendingPreview}}<%= __('Send preview') %>{{/unless}}
          "
          {{#if sendingPreview}}disabled{{/if}}
        />
        <p><%= __('A MailPoet logo will appear in the footer of all emails sent with the free version of MailPoet.') %></p>
        <p class="{{#unless previewSendingSuccess}}mailpoet_hidden{{/unless}} mailpoet_success">
          <%= __('Your test email has been sent!') %>
        </p>
        <p class="{{#unless previewSendingSuccess}}mailpoet_hidden{{/unless}}">
          <%= __('Didn’t receive the test email? Read our [link]quick guide[/link] to sending issues.')|replaceLinkTags('https://kb.mailpoet.com/article/146-my-newsletters-are-not-being-received', {'target': '_blank', 'rel': 'noopener noreferrer'})|raw %>
        </p>
        <div class="{{#unless previewSendingError}}mailpoet_hidden{{/unless}} mailpoet_error" id="mailpoet_preview_sending_error"></div>
      </div>
    </form>

    {{#if mssKeyPendingApproval }}
      <div class="mailpoet_error pendindig_approval_error{{#if awaitingKeyCheck}} with-spinner{{/if}}">
        <%= __('You’ll soon be able to send once our team reviews your account. In the meantime, you can send previews to [link]your authorized emails[/link].')|replaceLinkTags('https://account.mailpoet.com/authorization', {'target': '_blank', 'rel': 'noopener noreferrer'})|raw %>
        {{#if mssKeyPendingApprovalRefreshMessage }}
        <%= __('If you have already received approval email, click [link]here[/link] to update the status.')|replaceLinkTags('#', {'id': 'refresh-mss-key-status'})|raw %>
        {{/if}}
      </div>
    {{/if}}
  </div>
</div>