[%
    USE Whostmgr

    SET PAGE_BASE = '/cgi/addon_notification-center.cgi';
    SET PAGE_PATH = cp_security_token _ PAGE_BASE _ '/';
    SET BASE_URL = (Whostmgr.ENV.HTTPS == 'on' ? 'https://' : 'http://') _ Whostmgr.ENV.HTTP_HOST _ ':' _ Whostmgr.ENV.SERVER_PORT _ PAGE_PATH;

    WRAPPER 'master_templates/master.tmpl'
        app_key = 'Notification Center'
        header = locale.maketext('Notification Center')
        icon = '/addon_plugins/nfcenter.png'
        breadcrumburl = PAGE_BASE
        base = BASE_URL
        theme = "bootstrap"
        CJT2_EXCLUSIVE = 0
%]

<table id="notificationsTable" class="table table-striped responsive-table" border="1" cellspacing="0" cellpadding="2" >
    <thead>
        <tr>
            <td>[% locale.maketext('Notification') %]</td>
            <td>[% locale.maketext('Time Occurred') %]</td>
            <td>[% locale.maketext('Show/Hide') %]</td>
        </tr>
    </thead>
    <tbody>
        [% FOREACH notification IN data.notifications.keys.sort %]
        <tr>
            <td>[% data.notifications.$notification.subject %]</td>
            <td class="timestamp">[% notification %]</td>
            <td><a class="button" href="javascript:toggleContentDisplay('[% notification %]')">Show/Hide</a></td>
        </tr>
        <tr style="display:none" id="[% notification %]">
            <td colspan=3 class="notificationDisplay">
                <div style="margin: 0 auto; width: 700px">
                    [% data.notifications.$notification.html %]
                </div>
            </td>
        </tr>
        [% END %]
    </tbody>
</table>

<script type="text/javascript">
    //Localize all the timestamps on the page
    var timestamps = document.querySelectorAll('.timestamp');
    for (var i=0; i < timestamps.length; i++) {
        var timestamp = timestamps[i].innerText;
        var t = new Date(0)
        t.setUTCSeconds(timestamp);
        timestamps[i].innerText = t.toLocaleDateString() + " " + t.toLocaleTimeString();
    }

    function toggleContentDisplay(id) {
        var dstatus   = document.getElementById(id).style.display;
        var newstatus = dstatus === '' ? 'none' : ''
        document.getElementById(id).style.display = newstatus;
    }
</script>

[% END #wrapper -%]