[%
    SET CPANEL.CPVAR.dprefix = "../../";

    SET email_acct = execute( 'Email', 'account_name', {"account"=>FORM.account, "display"=>"0"}).data;

    Api2.pre_exec("StatsBar", "stat");
    api2_result_StatsBar_stat =  Api2.exec("StatsBar", "stat", {"warnings"=>"1", "infinitylang"=>"true", "warninglevel"=>"80", "display"=>"emailfilters"} );
    Api2.post_exec("StatsBar", "stat");

    Api2.pre_exec("Email", "filterlist");
    SET api2_result_Email_filterlist =  Api2.exec("Email", "filterlist", {"account"=>FORM.account} );
    Api2.post_exec("Email", "filterlist");

%]

[%
    IF FORM.account != "" OR email_acct != "";
        SET app_name = 'email_filters';
    ELSE;
        SET app_name = 'global_email_filters';
    END;
%]

[%
IF api2_result_Email_filterlist.size;
    js_code = PROCESS js_block;
ELSE;
    js_code = "";
END;
%]
[% css_code = PROCESS css_block %]
[% WRAPPER '_assets/master.html.tt'
    app_key = app_name
    page_js = js_code
    page_styles = css_code
%]

[% INCLUDE _assets/_ajaxapp_header.html.tt %]

<div class="body-content">
    [% IF email_acct %]
    <h2 id="hdrEditFilters">[% locale.maketext("Edit Filters for “[_1]”",email_acct) %]</h2>
    <p id="descEditFilters">[% locale.maketext("Create and manage email filters for your main email account. Rules will be processed in the order shown below, from the top down. For more information, read the [output,url,_1,documentation,target,_2,id,_3].", "//go.cpanel.net/UserFilters", "_blank", "lnkUserFiltersDocumentation") %]</p>
    [% ELSE %]
    <h2 id="hdrEditFilters">[% locale.maketext("Edit Filters for “All Mail on your Account”") %]</h2>
    <p id="descEditFilters">[% locale.maketext("Create and manage email filters for your main email account. Rules will be processed in the order shown below, from the top down. For more information, read the [output,url,_1,documentation,target,_2,id,_3].", "//go.cpanel.net/GlobalFilters", "_blank", "lnkGlobalFiltersDocumentation") %]</p>
    [% END %]

    <div class="section">
        <h2 id="hdrCreateFilter">[% locale.maketext("Create Filter") %]</h2>
        <a id="btnCreateFilter" href="editfilter.html?account=[% RAW_FORM.account.uri %]&amp;filtername=" class="btn btn-primary">[% locale.maketext("Create a New Filter") %]</a>
    </div>

    [% IF api2_result_StatsBar_stat.size;
        SET hashref = api2_result_StatsBar_stat.0; %]
        <div class="section">
            <p class="caution">[% locale.maketext("[output,strong,Warning]: You currently use [numf,_1] out of [numf,_2]", hashref.count,hashref.max) %]</p>
        </div>
    [% END %]

    [% IF api2_result_Email_filterlist.size -%]
        <h2 id="hdrCurrentFilters">[% locale.maketext("Current Filters") %]</h2>
        <div class="section" id="filter_container">
            [% IF api2_result_Email_filterlist.size;
            FOREACH hashref IN api2_result_Email_filterlist;
            %]
                <div class="filter_wrapper">
                    <div class="filter" id="[% hashref.filtername.html() %]-filter" title="[% locale.maketext('Drag to reorder.') %]">
                        <div class="arrows">
                            <ul class="move">
                                <li class="up"><a href="#" onclick="move_up(this); return false"></a></li>
                                <li class="down"><a href="#" onclick="move_down(this); return false"></a></li>
                            </ul>
                        </div>
                        <div class="filter-title">[%  hashref.filtername.html() %]</div>
                        <div class="actions">
                            <a class="btn btn-link" href="editfilter.html?account=[% FORM.account %]&filtername=[% hashref.filtername.uri() %]">
                                <span class="glyphicon glyphicon-pencil"></span>
                                [% locale.maketext("Edit") %]
                            </a>
                            <a class="btn btn-link" href="delfilter.html?account=[% FORM.account %]&filtername=[% hashref.filtername.uri() %]">
                                <span class="glyphicon glyphicon-trash"></span>
                                [% locale.maketext("Delete") %]
                            </a>
                        </div>
                        <div class="arrows2">
                            <ul class="move">
                                <li class="up"><a href="#" onclick="move_up(this); return false"></a></li>
                                <li class="down"><a href="#" onclick="move_down(this); return false"></a></li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                [% END %]
            [% END %]
        </div>

        <div class="section" id="filtertest">
            <h2 id="hdrFilterTest">[% locale.maketext("Filter Test") %]</h2>
            <p id="descFilterTest">[% locale.maketext("Enter a complete email message (including headers) below to see how the system will process it with the current filters in place.") %]</p>

            <form action="filtertest.html" method="post">
                <div class="form-group">
                    <input id="hidFilterTestDomain" type="hidden" name="domain" value="[% FORM.domain %]" />
                    <input id="hidFilterTestAccount" type="hidden" name="account" value="[% FORM.account %]" />

                    <textarea id="txtFilterTestMessage" name="test_msg" class="form-control" rows="10" cols="55">
To: test@localhost
From: test@localhost
Subject: test

[% locale.maketext("This is a test message.") %]
                    </textarea>
                </div>

                <div class="form-group">
                    <input id="btnFilterTest" type="submit" value="[% locale.maketext("Test Filter") %]" class="btn btn-primary" />
                </div>
            </form>
        </div>
    [% END -%]

    [% IF FORM.account %]
        [% INCLUDE _assets/return_link.html.tt return_location='managefilters.html' return_link_text=locale.maketext('Go Back') %]
    [% ELSE %]
        [% INCLUDE _assets/return_link.html.tt return_location='../../index.html' return_link_text=locale.maketext('Go Back') %]
    [% END %]

    [% INCLUDE _assets/_ajaxapp_footer.html.tt %]

</div>
[% END %]

[% BLOCK js_block %]
<script>
    var dditem = function() {
        dditem.superclass.constructor.apply(this,arguments);
    };

    var MAILBOX = [% RAW_FORM.account.json() || 'null' %];

    function get_order() {
        var filter_els = DOM.getElementsByClassName( "filter", "div", "filter_container" );
        return filter_els.map( function(el,index) {
            if ((index + 1) % 2 !== 0) {
                el.classList.add("stripe-even");
                el.classList.remove("stripe-odd");
            } else {
                el.classList.add("stripe-odd");
                el.classList.remove("stripe-even");
            }
            return el.id.replace(/-filter$/,"");
        } );
    }

    var saved_notice = null;
    function save_order() {
        var api_vars = { mailbox: MAILBOX };
        var filter_els = DOM.getElementsByClassName( "filter", "div", "filter_container" );
        filter_els.forEach( function(el,idx) {
            var filter_name = el.id.replace(/-filter$/,"");
            api_vars["filter"+idx] = filter_name;
        } );

        if (saved_notice && !DOM.inDocument(saved_notice.element)) {
            saved_notice = null;
        }
        var success = function() {
            old_order_joined = get_order().join();
            saved_notice = new CPANEL.ajax.Dynamic_Notice( {
                level: "success",
                content: "[% locale.maketext("Filter order saved.")  %]",
                replaces: saved_notice
            } );
            YAHOO.util.DragDropMgr.unlock();
        };

        YAHOO.util.DragDropMgr.lock();

        CPANEL.api( {
            module:   "Email",
            func:     "reorderfilters",
            data:     api_vars,
            callback: CPANEL.ajax.build_callback( success, null, {
                on_error: function() { YAHOO.util.DragDropMgr.unlock() }
            } )
        } );
    }

    var old_order_joined = get_order().join();
    function order_changed() {
        var new_order_joined = get_order().join();
        return new_order_joined !== old_order_joined;
    }

    YAHOO.extend( dditem, CPANEL.dragdrop.DDItem, {
        endDrag: function() {
            CPANEL.dragdrop.DDItem.prototype.endDrag.apply(this,arguments);
            if ( order_changed() ) {
                save_order();
            }
        }
    } );

    var containers = CPANEL.dragdrop.containers( "filter_container", undefined, {
        item_constructor: dditem
    } );

    var save_timeout = null;
    function queue_save() {
        clearTimeout(save_timeout);
        save_timeout = setTimeout( save_order, 500 );
    }

    function move_up(link) {
        var wrapper = DOM.getAncestorByClassName(link,"filter_wrapper");
        var previous_wrapper = DOM.getPreviousSibling(wrapper);
        if (previous_wrapper) {
            wrapper.parentNode.insertBefore(wrapper,previous_wrapper);
            link.focus();
            queue_save();
        }
    }
    function move_down(link) {
        var wrapper = DOM.getAncestorByClassName(link,"filter_wrapper");
        var next_wrapper = DOM.getNextSibling(wrapper);
        if (next_wrapper) {
            var next_next = DOM.getNextSibling(next_wrapper);
            if (next_next) {
                wrapper.parentNode.insertBefore(wrapper,next_next);
            }
            else {
                wrapper.parentNode.appendChild(wrapper);
            }

            link.focus();
            queue_save();
        }
    }
    </script>
[% END %]
[% BLOCK css_block %]
<style type="text/css">
.filter {
   cursor:move;
   border-bottom: 1px solid #dadada;
   padding: 5px;
   text-align: center;
   zoom: 1;
}
#ygddfdiv .filter {
    opacity: 0.5;
}

ul.move {
    list-style: none;
    margin:0px;
    padding:0px;
}

ul.move li.up {
    background: transparent url(../../images/uparrow1.png) top left no-repeat;
    width: 7px;
    height: 20px;
    padding-bottom: 3px;
    margin-bottom: 3px;
    border-width: 0 0 1px 0;
    border-bottom: 1px dotted #999;
    -webkit-padding-start: 0px !important;
    padding-top:0px !important;
    margin-top:0px !important;
}
ul.move li.up:hover {
    background: url(../../images/uparrow2.png) top left no-repeat;
    }
ul.move li.down {
    background: transparent url(../../images/down-arrow1.png) top left no-repeat;
    width: 7px;
    height: 10px;
}
ul.move li.down:hover {
    background: url(../../images/down-arrow2.png) top left no-repeat;
    width:7px;
    height:10px;
}

ul, menu, dir {
    -webkit-padding-start: 0px !important;
}

ul.move li a {
    display: block;
    width: 7px;
    height: 9px;
    text-indent: -9999px;
}
.arrows {
    float:left;
    width:10px;
}
.arrows2 {
    float:right;
    width:10px;
}
.filter-title {
    float:left;
    padding-left:10px;
    text-align:left;
    text-shadow: 0 1px 0 #fff;
    padding-top:3px;
}
.actions {
    float:right;
    width:150px;
    padding-top:3px;
}
.actions a {
    padding-left:5px;
    display:inline-block;
}
.actions a.delete {

}
.clear {
    height: 0;  /* IE */
    clear:both;
}
</style>
[% END %]