content: {-|
  Module: IHP.View.TimeAgo
  Description: View Helpers for dealing with Time and Dates
  Copyright: (c) digitally induced GmbH, 2020
  -}
  module IHP.View.TimeAgo (timeAgo, dateTime, date, time) where
  
  import IHP.Prelude
  import Data.Time.Format.ISO8601 (iso8601Show)
  import IHP.HSX.ConvertibleStrings ()
  import Text.Blaze.Html5 (Html, (!))
  import qualified Text.Blaze.Html5 as H
  import qualified Text.Blaze.Html5.Attributes as A
  
  -- | __Display time like @5 minutes ago@__
  --
  -- Render's a @\<time\>@ HTML-Element. Will be displayed like @5 minutes ago@, @1 day ago@, etc..
  -- 
  -- Requires the javascript helpers to be available. Then the time will displayed in the current browser
  -- timezone.
  --
  -- When the js helper is not available, the time will be displayed with the format: DD.MM.YYYY, HH:MM
  --
  -- __Example:__ Generated HTML
  --
  -- >>> <div>{timeAgo (project.createdAt)}</div>
  -- <div><time class="time-ago">31.08.2007, 16:47</time></div>
  --
  -- __Example:__ HTML after javascript helpers have been applied
  --
  -- >>> <div>{timeAgo (project.createdAt)}</div>
  -- <div><time class="time-ago">a while ago</time></div>
  timeAgo :: UTCTime -> Html
  timeAgo = timeElement "time-ago"
  
  -- | __Display time like @31.08.2007, 16:47@__
  --
  -- Render's a @\<time\>@ HTML-Element for displaying time and date.
  -- 
  -- Requires the javascript helpers to be available. Then the date and time will displayed in the current browser
  -- timezone.
  --
  -- The js helper uses `toLocaleDateString` to display the date in the browsers locale format.
  --
  -- __Example:__ Generated HTML
  --
  -- >>> <div>{dateTime (project.createdAt)}</div>
  -- <div><time class="date-time">31.08.2007, 16:47</time></div>
  --
  -- __Example:__ HTML after javascript helpers have been applied
  --
  -- >>> <div>{dateTime (project.createdAt)}</div>
  -- <div><time class="date-time">31.08.2007, 16:47 Uhr</time></div>
  dateTime :: UTCTime -> Html
  dateTime = timeElement "date-time"
  
  -- | __Display date like @31.08.2007@__
  --
  -- Render's a @\<time\>@ HTML-Element for displaying the date.
  -- 
  -- Requires the javascript helpers to be available. Then the date will displayed in the current browser
  -- locale format and timezone.
  --
  -- The js helper uses `toLocaleDateString` to display the date in the browsers locale format.
  --
  -- __Example:__ Generated HTML
  --
  -- >>> <div>{date (project.createdAt)}</div>
  -- <div><time class="date">31.08.2007, 16:47</time></div>
  --
  -- __Example:__ HTML after javascript helpers have been applied
  --
  -- >>> <div>{date (project.createdAt)}</div>
  -- <div><time class="date">31.08.2007</time></div>
  date :: UTCTime -> Html
  date = timeElement "date"
  
  -- | __Display time like @16:47@__
  --
  -- Render's a @\<time\>@ HTML-Element for displaying the time.
  -- 
  -- Requires the javascript helpers to be available. Then the time will displayed in the current browser
  -- timezone.
  --
  -- The js helper uses `toLocaleDateString` to display the date in the browsers locale format.
  --
  -- __Example:__ Generated HTML
  --
  -- >>> <div>{time (project.createdAt)}</div>
  -- <div><time class="time">16:47</time></div>
  --
  -- __Example:__ HTML after javascript helpers have been applied
  --
  -- >>> <div>{time (project.createdAt)}</div>
  -- <div><time class="time">16:47 Uhr</time></div>
  time :: UTCTime -> Html
  time = timeElement "time"
  
  timeElement :: Text -> UTCTime -> Html
  timeElement className dateTime = H.time ! A.class_ (cs className) ! A.datetime (cs $ iso8601Show dateTime) $ cs (beautifyUtcTime dateTime)
  
  beautifyUtcTime :: UTCTime -> String
  beautifyUtcTime utcTime = formatTime defaultTimeLocale "%d.%m.%Y, %H:%M" utcTime
  