<% extends 'layout.html' %>

<% block content %>

<div class="wrap mailpoet-about-wrap">
  <h1><%= __('Greetings, humans.') %></h1>

  <p class="about-text"><%= __('The new MailPoet. Simply better. And with regular updates.') %></p>
  <div class="mailpoet-logo"><img src="<%= image_url('welcome_template/mailpoet-logo.png') %>" alt="<%= __('MailPoet Logo') %>" /></div>

  <h2 class="nav-tab-wrapper wp-clearfix">
    <a href="admin.php?page=mailpoet-welcome" class="nav-tab nav-tab-active"><%= __('Welcome') %></a>
    <a href="admin.php?page=mailpoet-update" class="nav-tab"><%= __("What's new") %></a>
  </h2>

  <% set random = random(2) %>

  <div <% if random != 0 %>style="display: none;"<% endif %>>
    <h2><%= __('Coming this Fall to a WordPress plugin page near you') %></h2>
  <p class="about-text mailpoet_centered mailpoet-top-text"><%= __('The highly-anticipated sequel to Dead Poets Society, Introduction to MailPoet will keep you on the edge of your seat. "Five out of five stars," says Rafael Ehlers, MailPoet Support Manager. "A must-watch for aspiring email poets."') %></p>
  </div>
  <div <% if random != 1 %>style="display: none;"<% endif %>>
    <h2><%= __('But first, watch this video') %></h2>
  <p class="about-text mailpoet_centered mailpoet-top-text"><%= __("Wait a second. Don't click that big blue button just yet. Yeah, we're talking to you. Before you do anything, you should really watch this video. It won't change your life, but it will save you (and our support team) a ton of time. And what is life without time? So, maybe it is life-changing, after all...") %></p>
  </div>
  <div <% if random != 2 %>style="display: none;"<% endif %>>
    <h2><%= __('Explanatory videos are boring, we know') %></h2>
  <p class="about-text mailpoet_centered mailpoet-top-text"><%= __("But this video is really important! We promise. Over the course of three minutes, you'll learn how to send your first newsletter, manage your lists, make billions of dollars and live happily ever after. That's right – it's that good. So get watching.") %></p>
  </div>

  <div class="headline-feature feature-video">
    <div class="videoWrapper">
      <iframe width="1050" height="591" src="https://player.vimeo.com/video/229737424" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </div>
  </div>

  <hr>

  <div class="feature-section two-col">
    <div class="col">
      <h3><%= __('Documentation Is One Click Away') %></h3>
      <p><%= __('Simply click on the blue circle in the bottom right corner of any of the MailPoet pages to access our documentation.') %> <em><%= __('Voilà!') %></em>
    </div>
    <div class="col">
      <h3><%= __('Sharing is Caring') %></h3>
      <p><%= __("By sharing your data <i>anonymously</i> with us, you can help us understand how people use MailPoet and what sort of features they like and don't like.") %> <a href="http://beta.docs.mailpoet.com/article/130-sharing-your-data-with-us" target="_blank"><%= __('Find out more') %> &rarr;</a>
      <br><br>
      <label>
        <input type="checkbox" id="mailpoet_analytics_enabled" value="1"
        <% if(settings.analytics.enabled) %>checked="checked"<% endif %>
        />&nbsp;<%= __('Yes, I want to help!') %>
      </label>
      </p>
    </div>
  </div>

  <hr>

  <div class="feature-section one-col mailpoet_centered">
    <a class="button button-primary go-to-plugin" href="admin.php?page=mailpoet-newsletters"><%= __("Awesome! Now, take me to MailPoet") %> &rarr;</a>
  </div>

</div>

<script type="text/javascript">
jQuery(function($) {
  // Find all videos
  var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),
  // The element that is fluid width
  $fluidEl = $("body");
  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });
  // When the window is resized
  $(window).resize(function() {
  var newWidth = $fluidEl.width();
  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {
    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));
    });
  // Kick off one resize to fix all videos on page load
  }).resize();

    $(function() {
      $("#mailpoet_analytics_enabled").on("click", function() {
        var is_enabled = $(this).is(":checked") ? true : "";
        MailPoet.Ajax.post({
          api_version: window.mailpoet_api_version,
          endpoint: "settings",
          action: "set",
          data: {
            analytics: { enabled: (is_enabled)}
          }
        }).fail(function(response) {
          if (response.errors.length > 0) {
            MailPoet.Notice.error(
              response.errors.map(function(error) { return error.message; }),
              { scroll: true }
            );
          }
        });

        if (is_enabled) {
          MailPoet.forceTrackEvent(
            'User has installed MailPoet',
            {'MailPoet Free version': window.mailpoet_version}
          );
        }

      })
    });
});
</script>

<% endblock %>
