% if newsletter:
<%!
    import json
    from plexpy import helpers, notifiers

    email_notifiers = [n for n in notifiers.get_notifiers() if n['agent_name'] == 'email']
    sorted(email_notifiers, key=lambda k: (k['agent_label'], k['friendly_name'], k['id']))
    email_notifiers = [{'id': 0, 'agent_label': 'New Email Configuration', 'friendly_name': ''}] + email_notifiers
%>
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
            <h4 class="modal-title" id="newsletter-config-modal-header">${newsletter['agent_label']} Newsletter Settings &nbsp;<small><span class="newsletter_id">(Newsletter ID: ${newsletter['id']})</span></small></h4>
        </div>
        <div class="modal-body">
            <div class="container-fluid">
                <div class="row">
                    <ul class="nav nav-tabs list-unstyled" role="tablist">
                        <li role="presentation" class="active"><a href="#tabs-newsletter_config" aria-controls="tabs-newsletter_config" role="tab" data-toggle="tab">Configuration</a></li>
                        <li role="presentation"><a href="#tabs-email_config" aria-controls="tabs-email_config" role="tab" data-toggle="tab">Email Configuration</a></li>
                        <li role="presentation"><a href="#tabs-test_newsletter" aria-controls="tabs-test_newsletter" role="tab" data-toggle="tab">Test Newsletter</a></li>
                    </ul>
                </div>
                <form action="set_newsletter_config" method="post" class="form" id="set_newsletter_config" data-parsley-validate>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="tabs-newsletter_config">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="checkbox" style="margin-bottom: 20px;">
                                        <label>
                                            <input type="checkbox" data-id="active_value" class="checkboxes" value="1" ${helpers.checked(newsletter['active'])}> Enable the newsletter
                                        </label>
                                        <input type="hidden" id="active_value" name="active" value="${newsletter['active']}">
                                    </div>
                                    <div class="form-group">
                                        <label for="cron">Schedule</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="cron-widget"></div>
                                                <input type="hidden" id="cron_value" name="cron" />
                                            </div>
                                        </div>
                                        <p class="help-block">Set the schedule for the newsletter</p>
                                    </div>
                                </div>
                                <div class="col-md-12" style="padding-top: 10px; border-top: 1px solid #444;">
                                    <input type="hidden" id="newsletter_id" name="newsletter_id" value="${newsletter['id']}" />
                                    <input type="hidden" id="agent_id" name="agent_id" value="${newsletter['agent_id']}" />
                                    % for item in newsletter['config_options']:
                                    % if item['input_type'] == 'help':
                                    <div class="form-group">
                                        <label>${item['label']}</label>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'text' or item['input_type'] == 'password':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="${item['input_type']}" class="form-control" id="${item['name']}" name="${item['name']}" value="${item['value']}" size="30" ${'readonly' if item.get('readonly') else ''}>
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'number':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <input type="${item['input_type']}" class="form-control" id="${item['name']}" name="${item['name']}" value="${item['value']}" size="30">
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'button':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="button" class="btn btn-bright" id="${item['name']}" name="${item['name']}" value="${item['value']}">
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'checkbox':
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" data-id="${item['name']}" class="checkboxes" value="1" ${helpers.checked(item['value'])}> ${item['label']}
                                        </label>
                                        <p class="help-block">${item['description'] | n}</p>
                                        <input type="hidden" id="${item['name']}" name="${item['name']}" value="${item['value']}">
                                    </div>
                                    % elif item['input_type'] == 'select':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <select class="form-control" id="${item['name']}" name="${item['name']}">
                                                    % for key, value in sorted(item['select_options'].iteritems()):
                                                    % if key == item['value']:
                                                    <option value="${key}" selected>${value}</option>
                                                    % else:
                                                    <option value="${key}">${value}</option>
                                                    % endif
                                                    % endfor
                                                </select>
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'selectize':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <select class="form-control" id="${item['name']}" name="${item['name']}">
                                                    <option value="select-all">Select All</option>
                                                    <option value="remove-all">Remove All</option>
                                                    % if isinstance(item['select_options'], dict):
                                                    % for section, options in item['select_options'].iteritems():
                                                    <optgroup label="${section}">
                                                        % for option in sorted(options, key=lambda x: x['text'].lower()):
                                                            <option value="${option['value']}">${option['text']}</option>
                                                        % endfor
                                                    </optgroup>
                                                    % endfor
                                                    % else:
                                                    <option value="border-all"></option>
                                                    % for option in sorted(item['select_options'], key=lambda x: x['text'].lower()):
                                                        <option value="${option['value']}">${option['text']}</option>
                                                    % endfor
                                                    % endif
                                                </select>
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % endif
                                    % endfor
                                </div>
                                <div class="col-md-12" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #444;">
                                    <div class="form-group">
                                        <label for="friendly_name">Description</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" id="friendly_name" name="friendly_name" value="${newsletter['friendly_name']}" size="30">
                                            </div>
                                        </div>
                                        <p class="help-block">Optional: Enter a description to help identify this newsletter in the newsletters list.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tabs-email_config">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="email_notifier">Email Notification Agent</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <select class="form-control" id="email_notifier" name="email_notifier">
                                                    % for notifier in email_notifiers:
                                                    <% selected = 'selected' if notifier['id'] == newsletter['email_config']['notifier'] else '' %>
                                                    % if notifier['friendly_name']:
                                                    <option value="${notifier['id']}" ${selected}>${notifier['agent_label']} (${notifier['id']} - ${notifier['friendly_name']})</option>
                                                    % elif notifier['id']:
                                                    <option value="${notifier['id']}" ${selected}>${notifier['agent_label']} (${notifier['id']})</option>
                                                    % else:
                                                    <option value="${notifier['id']}" ${selected}>${notifier['agent_label']}</option>
                                                    % endif
                                                    % endfor
                                                </select>
                                            </div>
                                        </div>
                                        <p class="help-block">Use an existing Email notification agent or enter a new configuration below.</p>
                                    </div>
                                    <div class="form-group">
                                        <label for="subject">Subject</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" id="subject" name="subject" value="${newsletter['subject']}" size="30">
                                            </div>
                                        </div>
                                        <p class="help-block">
                                            Optional: Enter a subject line for the email. Leave blank for default.
                                            <br>
                                            Note: You may include <span class="inline-pre">{server_name}</span>, <span class="inline-pre">{start_date}</span>, and <span class="inline-pre">{end_date}</span> as parameters. The global date format under Settings > General will be used.
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label for="body">Body</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" id="body" name="body" value="${newsletter['body']}" size="30">
                                            </div>
                                        </div>
                                        <p class="help-block">
                                            Optional: Enter a body line for the email. Leave blank for default.
                                            <br>
                                            Note: You may include <span class="inline-pre">{server_name}</span>, <span class="inline-pre">{start_date}</span>, and <span class="inline-pre">{end_date}</span> as parameters. The global date format under Settings > General will be used.
                                        </p>
                                    </div>
                                </div>
                                <div id="newsletter-email-config" class="col-md-12" style="padding-top: 10px; border-top: 1px solid #444; ${'display: none;' if newsletter['email_config']['notifier'] else ''}">
                                    % for item in newsletter['email_config_options']:
                                    % if item['input_type'] == 'help':
                                    <div class="form-group">
                                        <label>${item['label']}</label>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'text' or item['input_type'] == 'password':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="${item['input_type']}" class="form-control" id="${item['name']}" name="${item['name']}" value="${item['value']}" size="30" ${'readonly' if item.get('readonly') else ''}>
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'number':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <input type="${item['input_type']}" class="form-control" id="${item['name']}" name="${item['name']}" value="${item['value']}" size="30">
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'button':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="button" class="btn btn-bright" id="${item['name']}" name="${item['name']}" value="${item['value']}">
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'checkbox' and item['name'] != 'newsletter_email_html_support':
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" data-id="${item['name']}" class="checkboxes" value="1" ${helpers.checked(item['value'])}> ${item['label']}
                                        </label>
                                        <p class="help-block">${item['description'] | n}</p>
                                        <input type="hidden" id="${item['name']}" name="${item['name']}" value="${item['value']}">
                                    </div>
                                    % elif item['input_type'] == 'select':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <select class="form-control" id="${item['name']}" name="${item['name']}">
                                                    % for key, value in sorted(item['select_options'].iteritems()):
                                                    % if key == item['value']:
                                                    <option value="${key}" selected>${value}</option>
                                                    % else:
                                                    <option value="${key}">${value}</option>
                                                    % endif
                                                    % endfor
                                                </select>
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % elif item['input_type'] == 'selectize':
                                    <div class="form-group">
                                        <label for="${item['name']}">${item['label']}</label>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <select class="form-control" id="${item['name']}" name="${item['name']}">
                                                    <option value="select-all">Select All</option>
                                                    <option value="remove-all">Remove All</option>
                                                    % if isinstance(item['select_options'], dict):
                                                    % for section, options in item['select_options'].iteritems():
                                                    <optgroup label="${section}">
                                                        % for option in sorted(options, key=lambda x: x['text'].lower()):
                                                            <option value="${option['value']}">${option['text']}</option>
                                                        % endfor
                                                    </optgroup>
                                                    % endfor
                                                    % else:
                                                    <option value="border-all"></option>
                                                    % for option in sorted(item['select_options'], key=lambda x: x['text'].lower()):
                                                        <option value="${option['value']}">${option['text']}</option>
                                                    % endfor
                                                    % endif
                                                </select>
                                            </div>
                                        </div>
                                        <p class="help-block">${item['description'] | n}</p>
                                    </div>
                                    % endif
                                    % endfor
                                    <input type="hidden" id="newsletter_email_html_support" name="newsletter_email_html_support" value="1">
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tabs-test_newsletter">
                            <label>Preview Newsletter</label>
                            <p class="help-block">
                                Preview the ${newsletter['agent_label']} newsletter.
                            </p>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="button" class="btn btn-bright" id="preview_newsletter" name="preview_newsletter" value="Preview ${newsletter['agent_label']} Newsletter">
                                    </div>
                                </div>
                            </div>
                            <label>Test Newsletter</label>
                            <p class="help-block">
                                Test if the ${newsletter['agent_label']} newsletter is working. Check the <a href="logs">logs</a> for troubleshooting.
                            </p>
                            <p class="help-block">
                                Warning: This will send the newsletter to all users in your email configuration!
                            </p>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="button" class="btn btn-bright" id="test_newsletter" name="test_newsletter" value="Test ${newsletter['agent_label']} Newsletter">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <input type="button" id="delete-newsletter-item" class="btn btn-danger btn-edit" style="float:left;" value="Delete">
            <input type="button" id="duplicate-newsletter-item" class="btn btn-dark btn-edit" style="float:left;" value="Duplicate">
            <input type="button" id="save-newsletter-item" class="btn btn-bright" value="Save">
        </div>
    </div>
</div>

<script src="${http_root}js/jquery-cron-min.js"></script>
<script>

    $('#newsletter-config-modal').unbind('hidden.bs.modal');

    $('#cron-widget').cron({
        initial: "${newsletter['cron']}",
        classes: "form-control cron-select",
        onChange: function() {
            $("#cron_value").val($(this).cron("value"));
        }
    }); // apply cron with default options

    var $incl_libraries = $('#newsletter_config_incl_libraries').selectize({
        plugins: ['remove_button'],
        maxItems: null,
        render: {
            option: function(item) {
                if (item.value.endsWith('-all')) {
                    return '<div class="' + item.value + '">' + item.text + '</div>'
                }
                return '<div>' + item.text + '</div>';
            }
        },
        onItemAdd: function(value) {
            if (value === 'select-all') {
                var all_keys = $.map(this.options, function(option){
                    return option.value.endsWith('-all') ? null : option.value;
                });
                this.setValue(all_keys);
            } else if (value === 'remove-all') {
                this.clear();
                this.refreshOptions();
                this.positionDropdown();
            }
        }
    });
    var incl_libraries = $incl_libraries[0].selectize;
    incl_libraries.setValue(${json.dumps(next((c['value'] for c in newsletter['config_options'] if c['name'] == 'newsletter_config_incl_libraries'), [])) | n});

    $('#email_notifier').change(function () {
        if ($(this).val() === "0") {
            $('#newsletter-email-config').show();
        } else {
            $('#newsletter-email-config').hide();
        }
    });

    var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
                      '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
    var $email_selectors = $('#newsletter_email_to, #newsletter_email_cc, #newsletter_email_bcc').selectize({
        plugins: ['remove_button'],
        maxItems: null,
        render: {
            item: function(item, escape) {
                return '<div>' +
                    (item.text ? '<span class="item-text">' + escape(item.text) + '</span>' : '') +
                    (item.value ? '<span class="item-value">' + escape(item.value) + '</span>' : '') +
                '</div>';
            },
            option: function(item, escape) {
                var label = item.text || item.value;
                var caption = item.text ? item.value : null;
                if (item.value.endsWith('-all')) {
                    return '<div class="' + item.value + '">' + escape(label) + '</div>'
                }
                return '<div>' +
                    escape(label) +
                    (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
                '</div>';
            }
        },
        onItemAdd: function(value) {
            if (value === 'select-all') {
                var all_keys = $.map(this.options, function(option){
                    return option.value.endsWith('-all') ? null : option.value;
                });
                this.setValue(all_keys);
            } else if (value === 'remove-all') {
                this.clear();
                this.refreshOptions();
                this.positionDropdown();
            }
        },
        createFilter: function(input) {
            var match, regex;

            // email@address.com
            regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
            match = input.match(regex);
            if (match) return !this.options.hasOwnProperty(match[0]);

            // user <email@address.com>
            regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
            match = input.match(regex);
            if (match) return !this.options.hasOwnProperty(match[2]);

            return false;
        },
        create: function(input) {
            if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
                return {value: input};
            }
            var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
            if (match) {
                return {
                    value : match[2],
                    text  : $.trim(match[1])
                };
            }
            return false;
        }
    });
    var email_to = $email_selectors[0].selectize;
    var email_cc = $email_selectors[1].selectize;
    var email_bcc = $email_selectors[2].selectize;
    email_to.setValue(${json.dumps(next((c['value'] for c in newsletter['email_config_options'] if c['name'] == 'newsletter_email_to'), [])) | n});
    email_cc.setValue(${json.dumps(next((c['value'] for c in newsletter['email_config_options'] if c['name'] == 'newsletter_email_cc'), [])) | n});
    email_bcc.setValue(${json.dumps(next((c['value'] for c in newsletter['email_config_options'] if c['name'] == 'newsletter_email_bcc'), [])) | n});

    function reloadModal() {
        $.ajax({
            url: 'get_newsletter_config_modal',
            data: { newsletter_id: '${newsletter["id"]}' },
            cache: false,
            async: true,
            complete: function (xhr, status) {
                $('#newsletter-config-modal').html(xhr.responseText);
            }
        });
    }

    function saveCallback(jqXHR) {
        if (jqXHR) {
            var result = $.parseJSON(jqXHR.responseText);
            var msg = result.message;
            if (result.result == 'success') {
                showMsg('<i class="fa fa-check"></i> ' + msg, false, true, 5000)
            } else {
                showMsg('<i class="fa fa-times"></i> ' + msg, false, true, 5000, true)
            }
        }

        getNewslettersTable();
    }

    function deleteCallback() {
        $('#newsletter-config-modal').modal('hide');
        getNewslettersTable();
    }

    function duplicateCallback(result) {
        // Set new newsletter id
        $('#newsletter_id').val(result.newsletter_id);
        // Clear friendly name
        $('#friendly_name').val("");

        saveNewsletter();

        $('#newsletter-config-modal').on('hidden.bs.modal', function () {
            loadNewsletterConfig(result.newsletter_id);
        });
        $('#newsletter-config-modal').modal('hide');
    }

    function saveNewsletter() {
        // Trim all text inputs before saving
        $('input[type=text]').val(function(_, value) {
            return $.trim(value);
        });
        doAjaxCall('set_newsletter_config', $(this), 'tabs', true, true, saveCallback);
    }

    $('#delete-newsletter-item').click(function () {
        var msg = 'Are you sure you want to delete this <strong>${newsletter["agent_label"]}</strong> newsletter?';
        var url = 'delete_newsletter';
        confirmAjaxCall(url, msg, { newsletter_id: '${newsletter["id"]}' }, null, deleteCallback);
    });

    $('#duplicate-newsletter-item').click(function() {
        var msg = 'Are you sure you want to duplicate this <strong>${newsletter["agent_label"]}</strong> newsletter?';
        var url = 'add_newsletter_config';
        confirmAjaxCall(url, msg, { agent_id: '${newsletter["agent_id"]}' }, null, duplicateCallback);
    });

    $('#save-newsletter-item').click(function () {
        saveNewsletter();
    });

    $('#preview_newsletter').click(function () {
        doAjaxCall('set_newsletter_config', $(this), 'tabs', true, false, previewNewsletter);
    });

    $('#test_newsletter').click(function () {
        doAjaxCall('set_newsletter_config', $(this), 'tabs', true, false, sendTestNewsletter);
    });

    function previewNewsletter() {
        showMsg('<i class="fa fa-check"></i>&nbsp; Check pop-up blocker if no response.', false, true, 2000);
        window.open('newsletter?newsletter_id=' + $('#newsletter_id').val());
    }

    function sendTestNewsletter() {
        showMsg('<i class="fa fa-refresh fa-spin"></i>&nbsp; Sending Newsletter', false);
        $.ajax({
            url: 'send_newsletter',
            data: {
                newsletter_id: $('#newsletter_id').val(),
                notify_action: 'test'
            },
            cache: false,
            async: true,
            success: function (data) {
                if (data.result === 'success') {
                    showMsg('<i class="fa fa-check"></i> ' + data.message, false, true, 5000);
                } else {
                    showMsg('<i class="fa fa-exclamation-circle"></i> ' + data.message, false, true, 5000, true);
                }
            }
        });
    }

    $("${', '.join(['#' + c['name'] for c in newsletter['config_options'] if c.get('refresh')])}").on('change', function () {
        // Reload modal to update certain fields
        doAjaxCall('set_newsletter_config', $(this), 'tabs', true, false, reloadModal);
        return false;
    });

    // Never send checkbox values directly, always substitute value in hidden input.
    $('.checkboxes').click(function () {
        var configToggle = $(this).data('id');
        if ($(this).is(':checked')) {
            $('#'+configToggle).val(1);
        } else {
            $('#'+configToggle).val(0);
        }
    });

</script>
% else:
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
            <h4 class="modal-title" id="newsletter-config-modal-header">Error</h4>
        </div>
        <div class="modal-body" style="text-align: center">
            <strong>
                <i class="fa fa-exclamation-circle"></i> Failed to retrieve newsletter configuration. Check the <a href="logs">logs</a> for more info.
            </strong>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>
% endif