<table class="form-table">
  <tbody>
    <!-- enable sign-up confirmation -->
    <tr>
      <th scope="row">
        <label>
          <%= __('Enable sign-up confirmation') %>
        </label>
        <p class="description">
          <%= __("If you enable this option, your subscribers will first receive a confirmation email after they subscribe. Once they confirm their subscription (via this email), they will be marked as 'confirmed' and will begin to receive your email newsletters.") %>
          <a href="http://docs.mailpoet.com/article/128-why-you-should-use-signup-confirmation-double-opt-in" target="_blank"><%= __('Read more about Double Opt-in confirmation.') %></a>
        </p>
      </th>
      <td>
        <p
          id="mailpoet_signup_confirmation_notice"
          <% if (settings.mta_group != "mailpoet") %>style="display:none;"<% endif %>
        >
          <%=- __('Sign-up confirmation is mandatory when using the MailPoet Sending Service.') -%>
        </p>
        <p
          id="mailpoet_signup_confirmation_input"
          <% if (settings.mta_group == "mailpoet") %>style="display:none;"<% endif %>
        >
          <label>
            <input
              type="radio"
              class="mailpoet_signup_confirmation"
              name="signup_confirmation[enabled]"
              value="1"
              <% if(settings.signup_confirmation.enabled) %>
                checked="checked"
              <% endif %>
            /><%= __('Yes') %>
          </label>
          &nbsp;
          <label>
            <input
              type="radio"
              class="mailpoet_signup_confirmation"
              name="signup_confirmation[enabled]"
              value=""
              <% if not(settings.signup_confirmation.enabled) %>
                checked="checked"
              <% endif %>
            /><%= __('No') %>
          </label>
        </p>
      </td>
    </tr>
  </tbody>
</table>
<table id="mailpoet_signup_options" class="form-table">
  <tbody>
    <!-- sign-up confirmation: from name & email -->
    <tr>
      <th scope="row">
        <label for="settings[signup_confirmation_from_name]">
          <%= __('From') %>
        </label>
      </th>
      <td>
        <p>
          <input
            type="text"
            id="settings[signup_confirmation_from_name]"
            name="signup_confirmation[from][name]"
            value="<%= settings.signup_confirmation.from.name %>"
            placeholder="<%= __('Your name') %>"
          />
          <input type="email"
            id="settings[signup_confirmation_from_email]"
            name="signup_confirmation[from][address]"
            value="<%= settings.signup_confirmation.from.address %>"
            placeholder="confirmation@mydomain.com"
            size="28"
          />
        </p>
      </td>
    </tr>
    <!-- sign-up confirmation: reply_to name & email -->
    <tr>
      <th scope="row">
        <label for="settings[signup_confirmation_reply_name]">
          <%= __('Reply-to') %>
        </label>
      </th>
      <td>
        <p>
          <input
            type="text"
            id="settings[signup_confirmation_reply_name]"
            name="signup_confirmation[reply_to][name]"
            value="<%= settings.signup_confirmation.reply_to.name %>"
            placeholder="<%= __('Your name') %>"
            />
          <input type="email"
            id="settings[signup_confirmation_reply_email]"
            name="signup_confirmation[reply_to][address]"
            value="<%= settings.signup_confirmation.reply_to.address %>"
            placeholder="confirmation@mydomain.com"
            size="28"
            />
        </p>
      </td>
    </tr>
    <!-- confirmation email: title -->
    <tr>
      <th scope="row">
        <label for="settings[signup_confirmation_email_subject]">
        <%= __('Email subject') %>
        </label>
      </th>
      <td>
        <input
          size="52"
          type="text"
          id="settings[signup_confirmation_email_subject]"
          name="signup_confirmation[subject]"
          <% if(settings.signup_confirmation.subject) %>
            value="<%= settings.signup_confirmation.subject %>"
          <% endif %>
        />
      </td>
    </tr>
    <!-- confirmation email: body -->
    <tr>
      <th scope="row">
        <label for="settings[signup_confirmation_email_body]">
          <%= __('Email content') %>
        </label>
        <p class="description">
          <%= __("Don't forget to include:<br /><br />[activation_link]Confirm your subscription.[/activation_link]<br /><br />Optional: [lists_to_confirm].") %>
        </p>
      </th>
      <td>
        <textarea
          cols="50"
          rows="15"
          id="settings[signup_confirmation_email_body]"
          name="signup_confirmation[body]"
        ><% if(settings.signup_confirmation.body) %>
            <%=- settings.signup_confirmation.body -%>
          <% endif %></textarea>
      </td>
    </tr>
    <!-- sign-up confirmation: confirmation page -->
    <tr>
      <th scope="row">
        <label>
          <%= __('Confirmation page') %>
        </label>
        <p class="description">
          <%= __('When subscribers click on the activation link, they will be redirected to this page.') %>
        </p>
      </th>
      <td>
        <p>
          <select
            class="mailpoet_page_selection"
            name="subscription[pages][confirmation]"
          >
            <% for page in pages %>
              <option
                value="<%= page.id %>"
                data-preview-url="<%= page.url.confirm|raw %>"
                <% if(page.id == settings.subscription.pages.confirmation) %>
                  selected="selected"
                <% endif %>
              ><%= page.title %></option>
            <% endfor %>
          </select>
          <a
            class="mailpoet_page_preview"
            href="javascript:;"
            title="<%= __('Preview page') %>"
          ><%= __('Preview') %></a>
        </p>
      </td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
  jQuery(function($) {
    // om dom loaded
    $(function() {
      // double optin toggling
      toggleSignupOptions();

      $('.mailpoet_signup_confirmation').on('click', function() {
        var result = false;

        if(~~($(this).val()) === 1) {
          result = confirm("<%= __('Subscribers will need to activate their subscription via email in order to receive your newsletters. This is highly recommended!') | escape('js') %>");
        } else {
          result = confirm("<%= __('New subscribers will be automatically confirmed, without having to confirm their subscription. This is not recommended!') | escape('js') %>");
        }
        // if the user confirmed changing the sign-up confirmation (yes/no)
        if(result === true) {
          // toggle signup options depending on the currently selected value
          toggleSignupOptions();
        }
        return result;
      });

      function toggleSignupOptions() {
        var is_enabled =
          (~~($('.mailpoet_signup_confirmation:checked').val()) === 1);
        $('#mailpoet_signup_options')[(is_enabled) ? 'show' : 'hide']();
      }
    });
  });
</script>
