[%
    USE Whostmgr;
	USE JSON;

	IF locale.get_html_dir_attr() == 'rtl';
	SET rtl_bootstrap = Whostmgr.find_file_url('/3rdparty/bootstrap-rtl/optimized/dist/css/bootstrap-rtl.min.css');
	END;

	SET styleSheets = [
		rtl_bootstrap,
		theme_magic_url('libraries/bootstrap/optimized/css/bootstrap.min.css')
	    theme_magic_url('/libraries/fontawesome/css/font-awesome.min.css')
	];

    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"
		stylesheets = styleSheets
%]

<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 -%]