<table class="form-table">
  <tbody>
    <tr>
      <th scope="row">
        <label for="settings[from_name]">
          <%= __("Default sender") %>
        </label>
        <p class="description">
          <%= __('These email addresses will be selected by default for each new email.') %>
        </p>
      </th>
      <td>
        <!-- default from name & email -->
        <p>
          <label for="settings[from_name]"><%= __('From') %></label>
          <input type="text"
            id="settings[from_name]"
            name="sender[name]"
            value="<%= settings.sender.name %>"
            placeholder="<%= __('Your name') %>" />
          <input type="email"
            id="settings[from_email]"
            name="sender[address]"
            value="<%= settings.sender.address %>"
            placeholder="from@mydomain.com" />
        </p>
        <!-- default reply_to name & email -->
        <p>
          <label for="settings[reply_name]"><%= __('Reply-to') %></label>
          <input type="text"
            id="settings[reply_name]"
            name="reply_to[name]"
            value="<%= settings.reply_to.name %>"
            placeholder="<%= __('Your name') %>" />
          <input type="email"
            id="settings[reply_email]"
            name="reply_to[address]"
            value="<%= settings.reply_to.address %>"
            placeholder="reply_to@mydomain.com" />
        </p>
      </td>
    </tr>
    <!-- email addresses receiving notifications -->
    <tr style="display:none">
      <th scope="row">
        <label for="settings[notification_email]">
          <%= __("Email notifications") %>
        </label>
        <p class="description">
          <%= __('These email addresses will receive notifications (separate each address with a comma).') %>
        </p>
      </th>
      <td>
        <p>
          <input type="text"
            id="settings[notification_email]"
            name="notification[address]"
            value="<%= settings.notification.address %>"
            placeholder="notification@mydomain.com"
            class="regular-text" />
        </p>
        <p>
          <label for="settings[notification_on_subscribe]">
            <input type="checkbox" id="settings[notification_on_subscribe]"
            name="notification[on_subscribe]"
            value="1"
            <% if(settings.notification.on_subscribe) %>checked="checked"<% endif %> />
            <%= __('When someone subscribes') %>
          </label>
        </p>
        <p>
          <label for="settings[notification_on_unsubscribe]">
            <input type="checkbox"
            id="settings[notification_on_unsubscribe]"
            name="notification[on_unsubscribe]"
            value="1"
            <% if(settings.notification.on_unsubscribe) %>checked="checked"<% endif %> />
            <%= __('When someone unsubscribes') %>
          </label>
        </p>
      </td>
    </tr>
    <!-- ability to subscribe in comments -->
    <!-- TODO: Check if registration is enabled (if not, display a message and disable setting) -->
    <tr>
      <th scope="row">
        <label for="settings[subscribe_on_comment]">
          <%= __('Subscribe in comments') %>
        </label>
        <p class="description">
          <%= __('Visitors that comment on a post can subscribe to your list via a checkbox.') %>
        </p>
      </th>
      <td>
        <p>
          <input
            data-toggle="mailpoet_subscribe_on_comment"
            type="checkbox"
            value="1"
            id="settings[subscribe_on_comment]"
            name="subscribe[on_comment][enabled]"
            <% if(settings.subscribe.on_comment.enabled) %>checked="checked"<% endif %>
          />
        </p>
        <div id="mailpoet_subscribe_on_comment">
          <p>
            <input
              type="text"
              id="settings[subscribe_on_comment_label]"
              name="subscribe[on_comment][label]"
              class="regular-text"
              <% if(settings.subscribe.on_comment.label) %>
                  value="<%= settings.subscribe.on_comment.label %>"
              <% else %>
                value="<%= __('Yes, add me to your mailing list') %>"
              <% endif %>
            />
          </p>
          <p>
            <label><%= __('Users will be subscribed to these lists:') %></label>
          </p>
          <p>
            <select
              id="mailpoet_subscribe_on_comment_segments"
              name="subscribe[on_comment][segments][]"
              data-placeholder="<%= __('Choose a list') %>"
              multiple
            >
              <% for segment in segments %>
                <option
                  value="<%= segment.id %>"
                  <% if(segment.id in settings.subscribe.on_comment.segments) %>
                    selected="selected"
                  <% endif %>
                ><%= segment.name %> (<%= segment.subscribers %>)</option>
              <% endfor %>
            </select>
          </p>
        </div>
      </td>
    </tr>
    <!-- ability to subscribe when registering -->
    <!-- TODO: Only available for the main site of a multisite! -->
    <!-- TODO: Check if registration is enabled (if not, display a message and disable setting) -->
    <tr>
      <th scope="row">
        <label for="settings[subscribe_on_register]">
          <%= __('Subscribe in registration form') %>
        </label>
        <p class="description">
          <%= __('Allow users who register as a WordPress user on your website to subscribe to a MailPoet list (in addition to the "WordPress Users" list).') %>
        </p>
      </th>
      <td>
        <% if(flags.registration_enabled == true) %>
          <p>
            <input
              data-toggle="mailpoet_subscribe_in_form"
              type="checkbox"
              value="1"
              id="settings[subscribe_on_register]"
              name="subscribe[on_register][enabled]"
              <% if(settings.subscribe.on_register.enabled) %>
                checked="checked"
              <% endif %>
            />
          </p>

          <div id="mailpoet_subscribe_in_form">
            <p>
              <input
                type="text"
                id="settings[subscribe_on_register_label]"
                name="subscribe[on_register][label]"
                class="regular-text"
                <% if(settings.subscribe.on_register.label) %>
                  value="<%= settings.subscribe.on_register.label %>"
                <% else %>
                  value="<%= __('Yes, add me to your mailing list') %>"
                <% endif %>
              />
            </p>
            <p>
              <label><%= __('Users will be subscribed to these lists:') %></label>
            </p>
            <p>
              <select
                id="mailpoet_subscribe_on_register_segments"
                name="subscribe[on_register][segments][]"
                data-placeholder="<%= __('Choose a list') %>"
                multiple
              >
                <% for segment in segments %>
                  <option
                    value="<%= segment.id %>"
                    <% if(segment.id in settings.subscribe.on_register.segments) %>
                      selected="selected"
                    <% endif %>
                  ><%= segment.name %> (<%= segment.subscribers %>)</option>
                <% endfor %>
              </select>
            </p>
          </div>
        <% else %>
          <p>
            <em><%= __('Registration is disabled on this site.') %></em>
          </p>
        <% endif %>
      </td>
    </tr>
    <!-- edit subscription-->
    <tr>
      <th scope="row">
        <label for="subscription_manage_page">
          <%= __('Manage Subscription page') %>
        </label>
        <p class="description">
          <%= __('When your subscribers click the "Manage your subscription" link, they will be directed to this page.') %>
          <br />
          <%= __('If you want to use a custom Subscription page, simply paste this shortcode on to a WordPress page: [mailpoet_manage_subscription]') %>
        </p>
      </th>
      <td>
        <p>
          <select
            class="mailpoet_page_selection"
            id="subscription_manage_page"
            name="subscription[pages][manage]"
          >
            <% for page in pages %>
              <option
                value="<%= page.id %>"
                data-preview-url="<%= page.url.manage|raw %>"
                <% if(page.id == settings.subscription.pages.manage) %>
                  selected="selected"
                <% endif %>
              ><%= page.title %></option>
            <% endfor %>
          </select>
          <a
            class="mailpoet_page_preview"
            href="javascript:;"
            title="<%= __('Preview page') %>"
          ><%= __('Preview') %></a>
        </p>
        <p>
          <label><%= __('Subscribers can choose from these lists:') %></label>
        </p>
        <p>
          <select
            id="mailpoet_subscription_edit_segments"
            name="subscription[segments][]"
            data-placeholder="<%= __('Leave this field empty to display all lists') %>"
            multiple
          >
            <% for segment in segments %>
              <option
                value="<%= segment.id %>"
                <% if(segment.id in settings.subscription.segments) %>
                  selected="selected"
                <% endif %>
              ><%= segment.name %> (<%= segment.subscribers %>)</option>
            <% endfor %>
          </select>
        </p>
      </td>
    </tr>
    <!-- unsubscribe-->
    <tr>
      <th scope="row">
        <label for="subscription_unsubscribe_page">
          <%= __('Unsubscribe page') %>
        </label>
        <p class="description">
          <%= __('When your subscribers click the "Unsubscribe" link, they will be directed to this page.') %>
          <br />
          <%= __('If you want to use a custom Unsubscribe page, simply paste this shortcode on to a WordPress page: [mailpoet_manage text="Manage your subscription"]') %>
        </p>
      </th>
      <td>
        <p>
          <select
            class="mailpoet_page_selection"
            id="subscription_unsubscribe_page"
            name="subscription[pages][unsubscribe]"
          >
            <% for page in pages %>
              <option
                value="<%= page.id %>"
                data-preview-url="<%= page.url.unsubscribe|raw %>"
                <% if(page.id == settings.subscription.pages.unsubscribe) %>
                  selected="selected"
                <% endif %>
              ><%= page.title %></option>
            <% endfor %>
          </select>
          <a
            class="mailpoet_page_preview"
            href="javascript:;"
            title="<%= __('Preview page') %>"
          ><%= __('Preview') %></a>
        </p>
      </td>
    </tr>
    <!-- shortcode: archive page  -->
    <tr>
      <th scope="row">
        <label>
          <%= __('Archive page shortcode') %>
        </label>
        <p class="description">
          <%= __('Paste this shortcode on a page to display a list of past newsletters.') %>
        </p>
      </th>
      <td>
        <p>
          <input
            type="text"
            class="regular-text"
            id="mailpoet_shortcode_archives"
            value="[mailpoet_archive]"
            onClick="this.focus();this.select();"
            readonly="readonly"
          />
        </p>
        <p>
          <select
            id="mailpoet_shortcode_archives_list"
            data-shortcode="mailpoet_archive"
            data-output="mailpoet_shortcode_archives"
            data-placeholder="<%= __('Leave this field empty to display all lists') %>"
            multiple
          >
            <% for segment in segments %>
              <option value="<%= segment.id %>"><%= segment.name %> (<%= segment.subscribers %>)</option>
            <% endfor %>
          </select>
        </p>
      </td>
    </tr>
    <!-- shortcode: total number of subscribers -->
    <tr>
      <th scope="row">
        <label>
          <%= __('Shortcode to display total number of subscribers') %>
        </label>
        <p class="description">
          <%= __('Paste this shortcode on a post or page to display the total number of confirmed subscribers.') %>
        </p>
      </th>
      <td>
        <p>
          <input
            type="text"
            class="regular-text"
            id="mailpoet_shortcode_subscribers"
            value="[mailpoet_subscribers_count]"
            onClick="this.focus();this.select();"
            readonly="readonly"
          />
        </p>
        <p>
          <select
            id="mailpoet_shortcode_subscribers_count"
            data-shortcode="mailpoet_subscribers_count"
            data-output="mailpoet_shortcode_subscribers"
            data-placeholder="<%= __('Leave this field empty to display all lists') %>"
            multiple
          >
            <% for segment in segments %>
              <option value="<%= segment.id %>"><%= segment.name %> (<%= segment.subscribers %>)</option>
            <% endfor %>
          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
  jQuery(function($) {
    // on dom loaded
    $(function() {
      // select2 instances
      $('#mailpoet_subscribe_on_comment_segments').select2();
      $('#mailpoet_subscribe_on_register_segments').select2();
      $('#mailpoet_subscription_edit_segments').select2();
      $('#mailpoet_shortcode_archives_list').select2();
      $('#mailpoet_shortcode_subscribers_count').select2();
      // fix lengthy placeholder from being cut off by select 2
      $('.select2-search__field').each(function() {
        $(this).css('width', ($(this).attr('placeholder').length * 0.75) + 'em');
      });

      // shortcodes
      $('#mailpoet_shortcode_archives_list, #mailpoet_shortcode_subscribers_count')
      .on('change', function() {
        var shortcode = $(this).data('shortcode'),
          values = $(this).val() || [];

        if (values.length > 0) {
          shortcode += ' segments="';
          shortcode += values.join(',');
          shortcode += '"';
        }

        $('#' + $(this).data('output'))
          .val('[' + shortcode + ']');
      });
    });
  });
</script>
