[% 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"
    show_upgrade_message = 1
    stylesheets = [
        '/libraries/fontawesome/css/font-awesome.min.css',
        Whostmgr.find_file_url('/3rdparty/bootstrap-rtl/optimized/dist/css/bootstrap-rtl.min.css'),
    ]
-%]

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

[% PROCESS '_ajaxapp_footer.tmpl' -%]
[% END #wrapper -%]