{{#extend "layout-docs"}}

  {{#replace "pageTitle"}}Select{{/replace}}

  {{#replace "main"}}
    <section id="elements-select" class="grid--fluid">
      <h2>Select</h2>
      {{#each select}}
        <div>
          <label for="{{id}}">{{description}}</label>
          {{> select}}
        </div>
        <pre class="code--debug"><code class="language-html">{{> select-src}}</code></pre>
      {{/each}}
    </section>

    <section id="elements-tooltip-documentation" class="grid--fluid">
      <h3>Introduction</h3>
      <p>
        A default <code class="language-html">&lt;select&gt;</code> element that can be enhanced with JavaScript to allow for both custom styling and an input bar to filter options.
      </p>
    </section>
    <h3>Source files</h3>
    <div class="dl">
      <dl class="dl-set">
        <dt class="dt">Markup</dt>
        <dd class="dd"><code class="language-html">src/html/components/select.hbs</code></dd>
      </dl>
      <dl class="dl-set">
        <dt class="dt">Styling</dt>
        <dd class="dd"><code class="language-html">src/styles/components/elements/_select.scss</code></dd>
      </dl>
      <dl class="dl-set">
        <dt class="dt">Script</dt>
        <dd class="dd"><code class="language-html">src/scripts/modules/jquery.pfSelect.js</code></dd>
      </dl>
    </div>
    <h3>Usage</h3>
    <table class="table--debug">
      <tr>
        <th>JavaScript hooks/values</th>
        <th>Effect</th>
        <th>Required</th>
      </tr>
      <tr>
        <td><code class="language-css">data-js=enhance-select</code></td>
        <td>Placed on any <code class="language-html">select</code> that you want to be enhanced with custom styling.</td>
        <td>Optional</td>
      </tr>
      <tr>
        <td><code class="language-css">data-select-filter=true</code></td>
        <td>Placed on any <code class="language-html">[data-js=enhance-select]</code> element to include a filter input bar.</td>
        <td>Optional</td>
      </tr>
      <tr>
        <td><code class="language-css">data-select-filter=true</code></td>
        <td>Placed on any <code class="language-html">[data-js=enhance-select]</code> element to include a filter input bar.</td>
        <td>Optional</td>
      </tr>
      <tr>
        <td><code class="language-css">data-display=[DISPLAY-TEXT]</code></td>
        <td>Placed on any <code class="language-html">option</code> element where you want the selected text to be different to the text shown in the dropdown.</td>
        <td>Optional</td>
      </tr>
      <tr>
        <td><code class="language-css">.enhanced-select--box</code></td>
        <td>When placed on the select element will render a boxed select element.</td>
        <td>Optional</td>
      </tr>
      <tr>
        <td><code class="language-html">[disabled]</code></td>
        <td>Adding this attribute to the select will disable the select and add a <code>.enhanded-select--disabled</code> class to the wrapper.</td>
        <td>Optional</td>
      </tr>
    </table>

  {{/replace}}

{{/extend}}