{% extends "zerver/base.html" %}
{% block content %}
<div class="container">
    <div style="position: fixed">
        <div class="alert">
            All the emails sent in the Zulip development environment are logged here. You can also
            manually generate most of the emails by clicking <a href="/emails/generate">here</a>.
            To clear this log click <a href="/emails/clear">here</a>
        </div>
        <div style="text-align:right">
            <label>
                <input type="checkbox" id="toggle"/>
                <strong>Show text only version</strong>
            </label>
            <a href="#" data-toggle="modal" data-target="#forward_email_modal">
                <strong>Forward emails to a mail account</strong>
            </a>
        </div>
    </div>
    <div style="padding-top:100px">
        {{ log |safe }}
    </div>
    <div id="forward_email_modal" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-body">
            <div class="input-group">
                <form id="smtp_form">
                    {{ csrf_input }}
                    <div class="alert alert-info"
                        id="smtp_form_status" style="display:none;">
                        Updated successfully.
                    </div>
                    <label for="forward">
                        <strong>Forwards all emails sent in the
                            development environment to an external
                            mail account.
                        </strong>
                    </label>
                    <label class="radio">
                        <input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
                    </label>
                    <label class="radio">
                        <input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
                    </label>
                    <div id="forward_address_sections" {% if not forward_address %}style="display:none;"{% endif %}>
                        <label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
                        <input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
                    </div>
                    <br/>
                    <div class="alert alert-info">
                        You must setup SMTP as described
                        <a target="_blank" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing">
                        here</a> first before enabling this.
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button id='save_smptp_details'>Update</button>
            <button data-dismiss="modal">Close</button>
        </div>
    </div>
    <script type="text/javascript">
    $('#toggle').change(function() {
        if($('.email-text').css('display') == 'none') {
            $(".email-text").each(function() {
                $(this).css("display", "block");
            });
            $(".email-html").each(function() {
                $(this).css("display", "none");
            });
        }
        else {
            $(".email-text").each(function() {
                $(this).css("display", "none");
            });
            $(".email-html").each(function() {
                $(this).css("display", "block");
            });
        }
    });
    $('input[type=radio][name=forward]').on('change', function() {
        if ($(this).val() == "enabled") {
            $("#forward_address_sections").show();
        } else {
            $("#forward_address_sections").hide();
        }
    });
    $("#save_smptp_details").on("click", function() {
        var address = $('input[name=forward]:checked').val() == "enabled" ? $("#address").val(): "";
        var csrf_token = $('input[name="csrfmiddlewaretoken"]').attr('value');
        var data = {"forward_address": address, "csrfmiddlewaretoken": csrf_token};
        $.post("/emails/", data, function() {
            $("#smtp_form_status").show();
            setTimeout(function() {
                $("#smtp_form_status").hide();
            }, 3000);
        });
    });
    </script>
</div>
{% endblock %}