<% set intervals = [1, 2, 5, 10, 15, 30] %>
<% set default_frequency = {
  'website': {
    'emails': 25,
    'interval': 5
  },
  'smtp': {
    'emails': 100,
    'interval': 5
  }
} %>

<!-- mta: group -->
<input
  type="hidden"
  id="mta_group"
  name="mta_group"
  value="<%= settings.mta_group %>"
/>
<input
  type="hidden"
  id="mailpoet_smtp_provider"
  name="mailpoet_smtp_provider"
  value="<%= settings.smtp_provider %>"
/>
<!-- mta: method -->
<input
  type="hidden"
  id="mta_method"
  name="mta[method]"
  value="<%= settings.mta.method %>"
/>

<!-- mta: sending frequency -->
<input
  type="hidden"
  id="mta_frequency_emails"
  name="mta[frequency][emails]"
  value="<%= settings.mta.frequency.emails %>"
/>
<input
  type="hidden"
  id="mta_frequency_interval"
  name="mta[frequency][interval]"
  value="<%= settings.mta.frequency.interval %>"
/>

<!-- mta: mailpoet sending service key -->
<input
  type="hidden"
  id="mailpoet_api_key"
  name="mta[mailpoet_api_key]"
  value="<%=- settings.mta.mailpoet_api_key -%>"
/>

<!-- smtp: available sending methods -->
<ul class="mailpoet_sending_methods">
  <li
    data-group="mailpoet"
    <% if(settings.mta_group == 'mailpoet') %>class="mailpoet_active"<% endif %>
  >
    <div class="mailpoet_sending_method_description">
      <h3>
        <%= __('MailPoet Sending Service') %>
      </h3>

      <p
        class="mailpoet_description<% if(settings.mta_group != 'mailpoet') %> mailpoet_hidden<% endif %>"
        id="mailpoet_sending_method_active_text"
      >
        <strong><%= __("You're now sending with MailPoet!") %></strong>
        <br />
        <%= __("Great, you're all set up. Your emails will now be sent quickly and reliably!") %>
      </p>

      <div
        class="mailpoet_description<% if(settings.mta_group == 'mailpoet') %> mailpoet_hidden<% endif %>"
        id="mailpoet_sending_method_inactive_text"
      >
        <strong><%= __("Solve all of your sending problems!") %></strong>

        <ul class="sending-method-benefits mailpoet_success">
          <li class="mailpoet_success_item"><%= __('Reach the inbox, not the spam box.') %>
          <li class="mailpoet_success_item"><%= __('Super fast: send up to 50,000 emails per hour.') %>
          <li class="mailpoet_success_item"><%= __('All emails are signed with SPF & DKIM.') %>
          <li class="mailpoet_success_item"><%= __('Automatically remove invalid and bounced addresses (bounce handling) to keep your lists clean.') %>
          <li class="mailpoet_success_item"><%= __('Configuration is dead-simple: simply enter a key to activate the sending service.') %>
          <li class="mailpoet_success_item"><strong><%= __('Coming soon:')%></strong> <%= __('MailPoet will send your WordPress site and account emails, too!') %>
          <li class="mailpoet_success_item"><strong><%= __('Plus:')%></strong> <%= __('get the Premium features for free.') %>
        </li>
        </ul>
        <a
          href="<%= admin_url('admin.php?page=mailpoet-premium') %>"
          class="button button-primary"
          target="_blank"
        ><%= __('Find out more about our monthly plans') %></a>

        <a href="https://www.mailpoet.com/free-plan/" class="button button-primary sending-free-plan-button" target="_blank">
          <strong><%= __('new!') %></strong> <%= __('Try it for free (for up to 2,000 subscribers)') %>
        </a>
      </div>
    </div>
    <div class="mailpoet_status">
      <span><%= __('Activated') %></span>

      <div class="mailpoet_actions">
        <button
          type="button"
          class="mailpoet_sending_service_activate button-secondary"
        <% if(settings.mta_group == 'mailpoet' or not(mss_key_valid)) %> disabled="disabled"<% endif %>
        ><%= __('Activate') %></button>
      </div>
    </div>

  </li>
  <li
    data-group="other"
    <% if(settings.mta_group == 'smtp' or settings.mta_group == 'website') %>class="mailpoet_active"<% endif %>
  >
    <div class="mailpoet_sending_method_description">
      <h3><%= __('Other') %></h3>
      <div class="mailpoet_description">
        <strong><%= __('Send emails via your host (not recommended!) or via a third-party sender.') %></strong>
        <ul class="sending-method-benefits mailpoet_error">
          <li class="mailpoet_error_item"><%= __("Unless you're a pro, you’ll probably end up in spam.") %>
          <li class="mailpoet_error_item"><%= __("Sending speed is limited by your host and/or your third-party (with a 2,000 per hour maximum).") %>
          <li class="mailpoet_error_item"><%= __("Manual configuration of SPF and DKIM required.") %>
          <li class="mailpoet_error_item"><%=
            __("Bounce handling is available, but only with an extra [link]add-on[/link].")
            |replaceLinkTags('https://wordpress.org/plugins/bounce-handler-mailpoet/', {'target' : '_blank'})
            |raw
          %>
          <li class="mailpoet_error_item"><%= __("You’ll need a separate plugin to send your WordPress site emails (optional).") %>
        </ul>
      </div>
    </div>
    <div class="mailpoet_status">
      <span><%= __('Activated') %></span>
      <div class="mailpoet_actions">
        <a
          class="button-secondary"
          href="#mta/other"><%= __('Configure') %></a>
      </div>
    </div>
  </li>
</ul>

<p class="mailpoet_sending_methods_help help">
  <%= __("Need help to pick? [link]Check out the comparison table of sending methods[/link].")
    |replaceLinkTags('http://beta.docs.mailpoet.com/article/181-comparison-table-of-sending-methods', {'target' : '_blank'})
    |raw
  %>
</p>

<div id="mailpoet_sending_method_setup">

  <!-- Sending Method: Other -->
  <div class="mailpoet_sending_method" data-group="other" style="display:none;">
    <table class="form-table">
      <tr>
        <th scope="row">
          <label for="mailpoet_smtp_method">
            <%= __('Method') %>
          </label>
        </th>
        <td>
          <!-- smtp provider -->
          <select
            id="mailpoet_smtp_method"
            name="smtp_provider"
          >
            <option data-interval="5" data-emails="25" value="server">
              <%= __('Your web host / web server') %>
            </option>
            <option data-interval="5" data-emails="100" value="manual"
              <%
              if settings.mta_group == "smtp"
              %>
              selected="selected"
              <% endif %>
            >
              <%= __('SMTP') %>
            </option>
            <!-- providers -->
            <optgroup label="<%= __('Select your provider') %>">
              <% for host_key, host in hosts.smtp %>
              <option
                value="<%= host_key %>"
                data-emails="<%= host.emails %>"
                data-interval="<%= host.interval %>"
                data-fields="<%= host.fields | join(',') %>"
              <% if(settings.smtp_provider == host_key) %>
              selected="selected"
              <% endif %>
              ><%= host.name %></option>
              <% endfor %>
            </optgroup>
          </select>
        </td>
      </tr>
      <tr id="mailpoet_sending_method_host"
        <%
        if settings.mta_group == "smtp"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="mailpoet_web_host">
            <%= __('Your web host') %>
          </label>
        </th>
        <td>
          <p>
            <!-- sending frequency -->
            <select
              id="mailpoet_web_host"
              name="web_host"
            >

              <!-- web hosts -->
              <option
                value="manual"
                data-emails="25"
                data-interval="5"
                label="<%= __('Not listed (default)') %>"
              >
              <% for host_key, host in hosts.web %>
              <option
                value="<%= host_key %>"
                data-emails="<%= host.emails %>"
                data-interval="<%= host.interval %>"
              <% if(settings.web_host == host_key) %>
              selected="selected"
              <% endif %>
              ><%= host.name %></option>
              <% endfor %>
            </select>
          </p>

        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="mailpoet_web_host">
            <%= __('Sending frequency') %>
          </label>
        </th>
        <td>
          <p>
            <!-- sending frequency -->
            <select
              id="mailpoet_sending_frequency"
              name="mailpoet_sending_frequency"
            >
              <option value="auto">
                <%= __('Recommended') %>
              </option>
              <option value="manual"
                <%
                if not(settings.mailpoet_sending_frequency == 'auto')
                %>
                selected="selected"
                <% endif %>
              >
                <%= __("I'll set my own frequency") %>
              </option>
            </select>
            <span id="mailpoet_recommended_daily_emails"></span>
          </p>
          <div id="mailpoet_sending_frequency_manual"
            <%
            if settings.mailpoet_sending_frequency == 'auto'
            %>
              style="display: none"
            <% endif %>
          >
            <p>
              <input
                id="other_frequency_emails"
                type="number"
                min="1"
                max="1000"
              <% if(settings.mta.frequency.emails) %>
                value="<%= settings.mta.frequency.emails %>"
              <% else %>
                value="<%= default_frequency.website.emails %>"
              <% endif %>
              />
              <%= __('emails') %>
              <select id="other_frequency_interval">
                <% for interval in intervals %>
                <option
                  value="<%= interval %>"
                <%
                if not(settings.mta.frequency.interval)
                and (interval == default_frequency.website.interval)
                %>
                selected="selected"
                <% endif %>
                <% if(settings.mta.frequency.interval == interval) %>
                selected="selected"
                <% endif %>
                >
                <%= sending_frequency(interval) %>
                <% if(interval == default_frequency.website.interval) %>
                (<%= __('recommended') %>)
                <% endif %>
                </option>
                <% endfor %>
              </select>
              <span id="mailpoet_other_daily_emails"></span>
            </p>
            <br />
            <p>
              <%= __('<strong>Warning!</strong> You may break the terms of your web host or provider by sending more than the recommended emails per day. Contact your host if you want to send more.') %>
            </p>
          </div>
        </td>
      </tr>
      <tr class="mailpoet_smtp_field" data-field="host"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "manual"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_host]">
            <%= __('SMTP Hostname') %>
          </label>
          <p class="description">
            <%= __('e.g.: smtp.mydomain.com') %>
          </p>
        </th>
        <td>
          <input
            type="text"
            class="regular-text"
            id="settings[mta_host]"
            name="mta[host]"
            value="<%= settings.mta.host %>" />
        </td>
      </tr>
      <!-- smtp: port -->
      <tr class="mailpoet_smtp_field" data-field="port"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "manual"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_port]">
            <%= __('SMTP Port') %>
          </label>
        </th>
        <td>
          <input
            type="number"
            max="65535"
            min="1"
            maxlength="5"
            style="width:5em;"
            id="settings[mta_port]"
            name="mta[port]"
            value="<%= settings.mta.port %>"
          />
        </td>
      </tr>

      <!-- smtp: amazon region -->
      <tr class="mailpoet_aws_field" data-field="region"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "AmazonSES"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_region]">
            <%= __('Region') %>
          </label>
        </th>
        <td>
          <select
            id="settings[mta_region]"
            name="mta[region]"
            value="<% if(settings.mta_group == 'smtp') %>
                <%=- settings.mta.region -%>
              <% endif %>"
          >
            <% for region, server in hosts.smtp.AmazonSES.regions %>
            <option
              value="<%= server %>"
            <% if(settings.mta.region == server) %>
            selected="selected"
            <% endif %>
            >
            <%= region %>
            </option>
            <% endfor %>
          </select>
        </td>
      </tr>

      <!-- smtp: amazon access_key -->
      <tr class="mailpoet_aws_field" data-field="access_key"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "AmazonSES"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_access_key]">
            <%= __('Access Key') %>
          </label>
        </th>
        <td>
          <input
            type="text"
            class="regular-text"
            id="settings[mta_access_key]"

            name="mta[access_key]"
            value="<% if(settings.mta_group == 'smtp') %>
                <%=- settings.mta.access_key -%>
              <% endif %>"
          />
        </td>
      </tr>

      <!-- smtp: amazon secret_key -->
      <tr class="mailpoet_aws_field" data-field="secret_key"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "AmazonSES"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_secret_key]">
            <%= __('Secret Key') %>
          </label>
        </th>
        <td>
          <input
            type="text"
            class="regular-text"
            id="settings[mta_secret_key]"

            name="mta[secret_key]"
            value="<% if(settings.mta_group == 'smtp') %>
                <%=- settings.mta.secret_key -%>
              <% endif %>"
          />
        </td>
      </tr>

      <!-- smtp: api key -->
      <tr class="mailpoet_sendgrid_field" data-field="api_key"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "SendGrid"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_api_key]">
            <%= __('API Key') %>
          </label>
        </th>
        <td>
          <input
            type="text"
            class="regular-text"
            id="settings[mta_api_key]"
            name="mta[api_key]"
            value="<%=- settings.mta.api_key -%>"
          />
        </td>
      </tr>

      <!-- smtp: login -->
      <tr id="mta_login" class="mailpoet_smtp_field" data-field="login"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "manual"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_login]">
            <%= __('Login') %>
          </label>
        </th>
        <td>
          <input
            type="text"
            class="regular-text"
            id="settings[mta_login]"
            name="mta[login]"
            value="<%= settings.mta.login %>"
          />
        </td>
      </tr>
      <!-- smtp: password -->
      <tr id="mta_password" class="mailpoet_smtp_field" data-field="password"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "manual"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_password]">
            <%= __('Password') %>
          </label>
        </th>
        <td>
          <input
            type="password"
            class="regular-text"
            id="settings[mta_password]"
            name="mta[password]"
            value="<%= settings.mta.password %>"
          />
        </td>
      </tr>
      <!-- smtp: security protocol -->
      <tr class="mailpoet_smtp_field" data-field="encryption"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "manual"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label for="settings[mta_encryption]">
            <%= __('Secure Connection') %>
          </label>
        </th>
        <td>
          <select id="settings[mta_encryption]" name="mta[encryption]">
            <option value=""><%= __('No') %></option>
            <option
              value="ssl"
            <% if(settings.mta.encryption == 'ssl') %>
            selected="selected"
            <% endif %>
            >SSL</option>
            <option
              value="tls"
            <% if(settings.mta.encryption == 'tls') %>
            selected="selected"
            <% endif %>
            >TLS</option>
          </select>
        </td>
      </tr>
      <!-- smtp: authentication -->
      <tr class="mailpoet_smtp_field" data-field="authentication"
        <%
        if settings.mta_group != "smtp" or settings.smtp_provider != "manual"
        %>
        style="display:none;"
        <% endif %>
      >
        <th scope="row">
          <label>
            <%= __('Authentication') %>
          </label>
          <p class="description">
            <%= __('Leave this option set to Yes. Only a tiny portion of SMTP services prefer Authentication to be turned off.') %>
          </p>
        </th>
        <td>
          <label>
            <input
              type="radio"
              value="1"
              name="mta[authentication]"
            <%
            if not(settings.mta.authentication)
            or (settings.mta.authentication == "1") %>
            checked="checked"
            <% endif %>
            /><%= __('Yes') %>
          </label>
          &nbsp;
          <label>
            <input
              type="radio"
              value="-1"
              name="mta[authentication]"
            <% if(settings.mta.authentication == "-1") %>
            checked="checked"
            <% endif %>
            /><%= __('No') %>
          </label>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <table class="form-table">
    <tbody>
      <!-- SPF -->
      <tr id="mailpoet_mta_spf">
        <th scope="row">
          <label>
            <%= __('SPF Signature (Highly recommended!)') %>
          </label>
          <p class="description">
            <%= __("This improves your delivery rate by verifying that you're allowed to send emails from your domain.") %>
          </p>
        </th>
        <td>
          <p>
            <%= __("SPF is set up in your DNS. Read your host's support documentation for more information.") %>
          </p>
        </td>
      </tr>
      <!-- test method -->
      <tr>
        <th scope="row">
          <label for="mailpoet_mta_test_email">
            <%= __('Test the sending method') %>
          </label>
        </th>
        <td>
          <p>
            <input
              type="text"
              id="mailpoet_mta_test_email"
              class="regular-text"
              value="<%= current_user.user_email %>"
            />
            <a
              id="mailpoet_mta_test"
              class="button-secondary"
            ><%= __('Send a test email') %></a>

            <span id="tooltip-test"></span>
          </p>
        </td>
      </tr>
      <!-- activate or cancel -->
      <tr>
        <th scope="row">
          <p>
            <a
              href="javascript:;"
              class="mailpoet_mta_setup_save button button-primary"
            ><%= __('Activate') %></a>
            &nbsp;
            <a
              href="javascript:;"
              class="mailpoet_mta_setup_cancel"
            ><%= __('or Cancel') %></a>
          </p>
        </th>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">
  jQuery(function($) {
    var tooltip = '<%= __("Didn't receive the test email? Read our [link]quick guide[/link] to sending issues.")
      |replaceLinkTags('http://beta.docs.mailpoet.com/article/146-my-newsletters-are-not-being-received', {'target' : '_blank'})
      |escape('js') %>'

    MailPoet.helpTooltip.show(document.getElementById("tooltip-test"), {
      tooltipId: "tooltip-settings-test",
      tooltip: tooltip,
    });

    var sending_frequency_template =
      Handlebars.compile($('#mailpoet_sending_frequency_template').html());

    // om dom loaded
    $(function() {
      // constrain number type inputs
      $('input[type="number"]').on('keyup', function() {
        var currentValue = $(this).val();
        if(!currentValue) return;

        var minValue = $(this).attr('min');
        var maxValue = $(this).attr('max');
        $(this).val(Math.min(Math.max(minValue, currentValue), maxValue));
      });

      // testing sending method
      $('#mailpoet_mta_test').on('click', function() {
        // get test email and include it in data
        var recipient = $('#mailpoet_mta_test_email').val();

        var settings = jQuery('#mailpoet_settings_form').mailpoetSerializeObject();
        var mailer = settings.mta;

        mailer.method = getMethodFromGroup($('#mta_group').val());

        // check that we have a from address
        if(settings.sender.address.length === 0) {
          // validation
          return MailPoet.Notice.error(
            '<%= __('The email could not be sent. Make sure the option "Email notifications" has a FROM email address in the Basics tab.') | escape('js') %>',
            { scroll: true, static: true }
          );
        }

        MailPoet.Modal.loading(true);
        MailPoet.Ajax.post({
          api_version: window.mailpoet_api_version,
          endpoint: 'mailer',
          action: 'send',
          data: {
            mailer: mailer,
            newsletter: {
              subject: "<%= __('This is a Sending Method Test') %>",
              body: {
                html: "<p><%= __('Yup, it works! You can start blasting away emails to the moon.') %></p>",
                text: "<%= __('Yup, it works! You can start blasting away emails to the moon.') %>"
              }
            },
            subscriber: recipient
          }
        }).always(function() {
          MailPoet.Modal.loading(false);
        }).done(function(response) {
          MailPoet.Notice.success(
            "<%= __('The email has been sent! Check your inbox.') | escape('js') %>",
            { scroll: true }
          );
          trackTestEmailSent(true);
        }).fail(function(response) {
          if (response.errors.length > 0) {
            MailPoet.Notice.error(
              response.errors.map(function(error) { return _.escape(error.message); }),
              { scroll: true }
            );
          }
          trackTestEmailSent(false);
        });
      });

      // sending frequency update based on selected provider
      $('#mailpoet_web_host').on('change keyup', renderHostSendingFrequency);

      // update manual sending frequency when values are changed
      $('#other_frequency_emails').on('change keyup', function() {
        updateSendingFrequency('other');
      });
      $('#other_frequency_interval').on('change keyup', function() {
        updateSendingFrequency('other');
      });

      // save configuration of a sending method
      $('.mailpoet_sending_service_activate').on('click', function() {
        $('#mta_group').val('mailpoet');
        saveSendingMethodConfiguration('mailpoet');
      });
      $('.mailpoet_mta_setup_save').on('click', function() {
        $('#mailpoet_smtp_method').trigger("change");
        $('#other_frequency_emails').trigger("change");
        // get selected method
        var group = $('.mailpoet_sending_method:visible').data('group');
        saveSendingMethodConfiguration(group);
      });
      $('#mailpoet_smtp_method').on('change keyup', renderHostsSelect);
      $('#mailpoet_sending_frequency').on('change keyup', sendingFrequencyMethodUpdated);

      <% if(settings.mta_group != 'mailpoet') %>
        $('#mailpoet_smtp_method').trigger("change");
        $('#other_frequency_emails').trigger("change");
      <% endif %>

      function saveSendingMethodConfiguration(group) {

        // set sending method
        if(group === undefined) {
          MailPoet.Notice.error(
            "<%= __('You have selected an invalid sending method.') | escape('js') %>"
          );
        } else {
          // set new sending method active
          setSendingMethodGroup(group);

          // enforce signup confirmation depending on selected group
          setSignupConfirmation(group);

          // back to selection of sending methods
          MailPoet.Router.navigate('mta', { trigger: true });

          // save settings
          $('.mailpoet_settings_submit > input').trigger('click');
        }
      }

      function setSignupConfirmation(group) {
        if (group === 'mailpoet') {
          // force signup confirmation (select "Yes")
          $('.mailpoet_signup_confirmation[value="1"]').attr('checked', true);
          $('.mailpoet_signup_confirmation[value=""]').attr('checked', false);

          // hide radio inputs
          $('#mailpoet_signup_confirmation_input').hide();

          // show mailpoet specific notice
          $('#mailpoet_signup_confirmation_notice').show();

          // show signup confirmation options
          $('#mailpoet_signup_options').show();
        } else {
          // show radio inputs
          $('#mailpoet_signup_confirmation_input').show();

          // hide mailpoet specific notice
          $('#mailpoet_signup_confirmation_notice').hide();
        }
      }

      function setSendingMethodGroup(group) {
        // deactivate other sending methods
        $('.mailpoet_sending_methods .mailpoet_active')
          .removeClass('mailpoet_active');

        // set active sending method
        $('.mailpoet_sending_methods li[data-group="'+group+'"]')
          .addClass('mailpoet_active');

        var method = getMethodFromGroup($('#mta_group').val());

        $('#mta_method').val(method);

        // set MailPoet method description
        $('#mailpoet_sending_method_active_text')
          .toggleClass('mailpoet_hidden', group !== 'mailpoet');
        $('#mailpoet_sending_method_inactive_text')
          .toggleClass('mailpoet_hidden', group === 'mailpoet');

        // Hide server error notices
        $('.mailpoet_notice_server').hide();

        updateMSSActivationUI();
      }

      function getMethodFromGroup(group) {
        var group = group || 'website';
        switch(group) {
          case 'mailpoet':
            return 'MailPoet';
          break;
          case 'website':
            return 'PHPMail';
          break;
          case 'smtp':
            var method = $('#mailpoet_smtp_provider').val();
            if(method === 'manual') {
              return 'SMTP';
            }
            return method;
          break;
        }
      }

      // cancel configuration of a sending method
      $('.mailpoet_mta_setup_cancel').on('click', function() {
        // back to selection of sending methods
        MailPoet.Router.navigate('mta', { trigger: true });
      });

      // render sending frequency form
      $('#mailpoet_smtp_provider').trigger('change');
      $('#mailpoet_web_host').trigger('change');

      function trackTestEmailSent(success) {
        MailPoet.trackEvent(
          'User has sent a test email from Settings',
          {
            'Sending was successful': !!success,
            'Sending method type': mailer.method,
            'MailPoet Free version': window.mailpoet_version
          }
        );
      }

      $('.mailpoet_sending_methods_help a').on('click', function() {
        MailPoet.trackEvent(
          'User has clicked to view the sending comparison table',
          {'MailPoet Free version': window.mailpoet_version}
        );
      });
    });

    function setProviderForm() {
      // check provider
      var provider = $(this).find('option:selected').first();
      var fields = provider.data('fields');

      if(fields === undefined) {
        fields = [
          'host',
          'port',
          'login',
          'password',
          'authentication',
          'encryption'
        ];
      } else {
        fields = fields.split(',');
      }

      $('.mailpoet_smtp_field').hide();

      fields.map(function(field) {
        $('.mailpoet_smtp_field[data-field="'+field+'"]').show();
      });

      // update sending frequency
      renderSMTPSendingFrequency(provider);
    }

    function renderSMTPSendingFrequency() {
      // set sending frequency
      var emails = $('#smtp_frequency_emails').val();
      var interval = $('#smtp_frequency_interval').val();
      setSendingFrequency({
        output: '#mailpoet_smtp_daily_emails',
        only_daily: true,
        emails: emails,
        interval: interval
      });
      $('#mta_frequency_emails').val(emails);
      $('#mta_frequency_interval').val(interval);
    }

    function sendingFrequencyMethodUpdated() {
      var method = $(this).find('option:selected').first();
      var sendingMethod = $('#mailpoet_smtp_method').find('option:selected').first().val();
      if(method.val() === "manual") {
        $('#mailpoet_sending_frequency_manual').show();
        $('#mailpoet_recommended_daily_emails').hide();
        $('#other_frequency_emails').trigger("change");
      } else {
        $('#mailpoet_sending_frequency_manual').hide();
        if(sendingMethod !== "server") {
          $('#mailpoet_recommended_daily_emails').show();
        }
        $('#mailpoet_smtp_method').trigger("change");
      }
    }

    function renderHostsSelect() {
      var method = $(this).find('option:selected').first();
      var val = method.val();

      if(val === "server") {
        $('#mailpoet_sending_method_host').show();
        $('#mta_group').val('website');
      } else {
        $('#mailpoet_sending_method_host').hide();
      }
      if(val === "manual") {
        $('.mailpoet_smtp_field').show();
        $('#mta_group').val('smtp');
        $('#mailpoet_smtp_provider').val('manual');
      } else {
        $('.mailpoet_smtp_field').hide();
      }
      if(val === "AmazonSES") {
        $('.mailpoet_aws_field').show();
        $('#mta_group').val('smtp');
        $('#mailpoet_smtp_provider').val('AmazonSES');
      } else {
        $('.mailpoet_aws_field').hide();
      }
      if(val === "SendGrid") {
        $('.mailpoet_sendgrid_field').show();
        $('#mta_group').val('smtp');
        $('#mailpoet_smtp_provider').val('SendGrid');
      } else {
        $('.mailpoet_sendgrid_field').hide();
      }
      var emails = method.data('emails');
      var interval = method.data('interval');
      if(val === "server") {
        emails = $('#mailpoet_web_host').find('option:selected').first().data('emails');
        interval = $('#mailpoet_web_host').find('option:selected').first().data('interval');
      }
      const frequencyMethod = $('#mailpoet_sending_frequency').find('option:selected').first().val();
      if(frequencyMethod === "manual") {
        $('#mailpoet_recommended_daily_emails').hide();
        emails = $('#other_frequency_emails').val();
        interval = $('#other_frequency_interval').val();
      } else {
        $('#mailpoet_recommended_daily_emails').show();
      }
      setSendingFrequency({
        output: '#mailpoet_recommended_daily_emails',
        only_daily: false,
        emails: emails,
        interval: interval
      });
      $('#mta_frequency_emails').val(emails);
      $('#mta_frequency_interval').val(interval);
    }

    function renderHostSendingFrequency() {

      var host = $(this).find('option:selected').first();
      var frequencyType = $("#mailpoet_sending_frequency").find('option:selected').first().val();

      var emails =
        host.data('emails') || <%= default_frequency.website.emails %>;
      var interval =
        host.data('interval') || <%= default_frequency.website.interval %>;
      var fields =
        host.data('fields') || '';

      if (frequencyType === "manual") {
        return;
      } else {
        setSendingFrequency({
          output: '#mailpoet_recommended_daily_emails',
          only_daily: false,
          emails: emails,
          interval: interval
        });
      }

      $('#mta_frequency_emails').val(emails);
      $('#mta_frequency_interval').val(interval);
    }

    function updateSendingFrequency(method) {
      // get emails
      var options = {
        only_daily: true,
        emails: $('#'+method+'_frequency_emails').val(),
        interval: $('#'+method+'_frequency_interval').val()
      };

      var MINUTES_PER_DAY = 1440;
      var SECONDS_PER_DAY = 86400;

      options.daily_emails = ~~(
        (MINUTES_PER_DAY / options.interval) * options.emails
      );

      options.emails_per_second = (~~(
        ((options.daily_emails) / 86400) * 10)
      ) / 10;


      // format daily emails number according to locale
      options.daily_emails = options.daily_emails.toLocaleString();

      $('#mailpoet_'+method+'_daily_emails').html(
        sending_frequency_template(options)
      );

      // update actual sending frequency values
      $('#mta_frequency_emails').val(options.emails);
      $('#mta_frequency_interval').val(options.interval);
    }

    function setSendingFrequency(options) {
      options.daily_emails = ~~((1440 / options.interval) * options.emails);

      // format daily emails number according to locale
      options.daily_emails = options.daily_emails.toLocaleString();

      $(options.output).html(
        sending_frequency_template(options)
      );
    }

    Handlebars.registerHelper('format_time', function(value, block) {
      var label = null;
      var labels = {
        minute: "<%= __('every minute') %>",
        minutes: "<%= __('every %1$d minutes') %>",
        hour: "<%= __('every hour') %>",
        hours: "<%= __('every %1$d hours') %>"
      };

      // cast time as int
      value = ~~(value);

      // format time depending on the value
      if(value >= 60) {
        // we're dealing with hours
        if(value === 60) {
          label = labels.hour;
        } else {
          label = labels.hours;
        }
        value /= 60;
      } else {
        // we're dealing with minutes
        if(value === 1) {
          label = labels.minute;
        } else {
          label = labels.minutes;
        }
      }

      if(label !== null) {
        return label.replace('%1$d', value);
      } else {
        return value;
      }
    });
  });

  // enable/disable MSS method activate button and notice
  function updateMSSActivationUI() {
    var $ = jQuery;
    var group = $('.mailpoet_sending_methods .mailpoet_active').data('group');
    var key_valid = !$('.mailpoet_mss_key_valid').hasClass('mailpoet_hidden');
    var activation_possible = group !== 'mailpoet' && key_valid;
    $('.mailpoet_sending_service_activate').prop('disabled', !activation_possible);
    $('.mailpoet_mss_activate_notice').toggle(activation_possible);
  }
</script>

<%= partial(
  'mailpoet_sending_frequency_template',
  'settings/templates/sending_frequency.hbs'
) %>
