{{#extend "layout-docs"}}

  {{#replace "pageTitle"}}Input Formatter{{/replace}}

  {{#replace "main"}}
    <section id="blocks-input-formatter-documentation" class="row">
      <div class="col">
        <h2>Text Input formatter</h2>

        <div class="row">
        {{#each text-input-formatter}}
          <div class="col col--1/2-medium">
            <h3>{{description}}</h3>
            {{> input}}
            <pre class="code--debug"><code class="language-html">{{> input-src}}</code></pre>
          </div>
        {{/each}}
        </div>
      </div>
    </section>
    <section id="blocks-input-formatter-documentation" class="row-spacer">
      <h3>Introduction</h3>
      <p>
        The input formatter requires a <code>data-js=formatter</code> attribute to initialise.
      </p>
      <p>
        The input formatter has a dependency on <a href="https://github.com/nosir/cleave.js">cleave</a>. Remember to include a reference to <code>external/cleave.min.js</code> as well as the standard <code>modules/jquery.pfInputFormatter</code>.
      </p>

      <h3>Usage</h3>
      <div class="table-scroll-x">
        <table class="table--debug">
          <tr>
            <th>Selector</th>
            <th>Effect</th>
            <th>Remarks</th>
          </tr>

          <tr>
            <td><code>data-js="formatter"</code></td>
            <td>Added to the input elements to bind date behaviour. By default it will give YYYY-mm-dd.</td>
            <td>Required.</td>
          </tr>
          <tr>
            <td><code>data-formatter-type="shortdate"</code></td>
            <td>To enforce "shortdate" behaviour, i.e. YY-mm.</td>
            <td>Optional.</td>
          </tr>
        </table>
      </div>
    </section>
  {{/replace}}

{{/extend}}