<h2>Components</h2>

<h3>Format Number</h3>
<div>{{format-number num}}</div>
<div>{{format-number num format='EUR'}}</div>
<div>{{format-number num style='currency' currency='USD'}}</div>

{{code-snippet name='format-number.hbs'}}

<h3>Format Date</h3>
<div>{{format-date now}}</div>
<div>{{format-date yesterday}}</div>

<h3>Format Time</h3>
<div>{{format-time now format='hhmmss'}}</div>
<div>{{format-time now hour='numeric' second='numeric' minute='numeric' hour12=false}}</div>

{{code-snippet name='format-time.hbs'}}

<h3>Format Relative</h3>
<div>{{format-relative yesterday}}</div>
<div>{{format-relative now}}</div>

<h3>Format Message</h3>

<div>
    {{format-message (intl-get computedMessage)
      product='Apple watch'
      price=200
      deadline=yesterday}}
</div>
<div>
    {{format-message messages.photos
      name='Jason'
      numPhotos=num
      takenDate=yesterday}}
</div>
<br />
<button {{bind-attr title=(format-message (intl-get 'messages.product.title'))}}>
    Use with bind-attr
</button>

{{code-snippet name='format-message.hbs'}}

<h3>Format HTML Message</h3>
<div>
    {{format-html-message  (intl-get 'messages.product.html.info')
      product='Apple watch'
      price=200
      deadline=yesterday}}
</div>
<div>
    {{format-html-message '<strong>{product}</strong>' product='Apple watch'}}
</div>

{{code-snippet name='format-html-message.hbs'}}
