[%
    USE Whostmgr;

    WRAPPER 'master_templates/master.tmpl'
        app_key = 'Notification Center'
        header = locale.maketext('Notification Center')
        icon = '/addon_plugins/nfcenter.png'
        breadcrumburl = '/cgi/addon_notification-center.cgi'
        theme = "bootstrap"
%]
<style>
	#contentContainer {
		background-color: white;
	}
</style>
<table id="notificationsTable" class="table table-striped">
    <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></tr><!--Blank row to ensure table striping works properly-->
        <tr style="display:none" id="[% notification %]">
            <td colspan=3 style="background-color: white;">
                <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 -%]