BLOCK renderDateTime;

# Formatted date time, in hydra-local timezone.
# Use only where an HTML element cannot be used.
BLOCK dateTimeText;

# HTML-rendered date. Formatted in hydra-local timezone.
# It is enhanced with JavaScript to show user-local and UTC time zones.
BLOCK renderDateTime %]
<time [% HTML.attributes(
    "data-timestamp" => timestamp,
    title => date.format(timestamp, '%Y-%m-%d %H:%M:%S (%Z)'),
    datetime => date.format(timestamp, "%Y-%m-%dT%H:%M:%SZ", gmt => 1),
) %] class="date is-absolute">
[% INCLUDE dateTimeText %]
</time>
[% END;

BLOCK renderRelativeDate;

# Relative date, as text.
# Use only where an HTML element cannot be used.
BLOCK relativeDateText;

# HTML-rendered relative date.
# It is enhanced with JavaScript to show user-local and UTC time zones.
BLOCK renderRelativeDate %]
<time [% HTML.attributes(
    "data-timestamp" => timestamp,
    title => date.format(timestamp, '%Y-%m-%d %H:%M:%S (%Z)'),
    datetime => date.format(timestamp, "%Y-%m-%dT%H:%M:%SZ", gmt => 1),
) %] class="date is-relative">
[% INCLUDE relativeDateText %]
</time>
[% END;

.date {
	cursor: help;
	border-bottom: 1px dotted #999;
}

    /* Makes dates more user friendly. */
    // Friendly date format
    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
    // Local timezone offset to display.
    var tz = moment().format("Z");
    $("time.date").each(function(i, el) {
        var el = $(el);
        var localTime = moment(el.data("timestamp"), "%X");
        var hydraTime = el.attr("title");
        if (el.hasClass("is-absolute")) {
            el.attr( "title", [
                "Adjusted to local time (" + tz + ")",
                "Other timezones:",
                "  UTC: " + localTime.clone().utc().format(DATE_FORMAT),
                "  As Hydra reported: " + hydraTime,
            ].join("\n"));
            el.text(localTime.format(DATE_FORMAT));
            el.addClass("is-local");
        }
        else if (el.hasClass("is-relative")) {
            el.attr( "title", [
                "Local (" + tz + "): " + localTime.format(DATE_FORMAT),
                "UTC: " + localTime.clone().utc().format(DATE_FORMAT),
                "As Hydra reported: " + hydraTime,
            ].join("\n"));
            el.addClass("is-local");
        }
    });