<div class="jumbotron">
  <div class="container">
    <h1>{{'HELPERS' | translate}}</h1>
    <p class="lead">{{'HELPERS-DESC' | translate}}</p>
  </div>

</div>

<div class="container">

  <div class="row">
    <div class="col-lg-3">
      <ul class="list-unstyled">
        <li><a href="" smooth-scroll target="string-float">{{'STRING-FLOAT' | translate}}</a></li>
        <li><a href="" smooth-scroll target="number-currency">{{'NUMBER-CURRENCY' | translate}}</a></li>
        <li><a href="" smooth-scroll target="show-pass">{{'SHOW-PASS' | translate}}</a></li>
        <li><a href="" smooth-scroll target="hide-email">{{'HIDE-EMAIL' | translate}}</a></li>
        <li><a href="" smooth-scroll target="URL">URL</a></li>
        <li><a href="" smooth-scroll target="date">{{'DATE' | translate}}</a></li>
        <li><a href="" smooth-scroll target="date-difference">{{'DATE-DIFF' | translate}}</a></li>
        <li><br></li>
        <li><a href="http://codepen.io/alfredobarron/pen/NGVYQy" target="_blank"><img src="images/codepen.png" alt=""></a></li>
      </ul>
    </div>

    <div class="col-lg-9">
      <section id="string-float">
        <h1>{{'STRING-FLOAT' | translate}}</h1><hr>
        <p class="lead">{{'STRING-FLOAT-DESC' | translate}}</p>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="" data-target="#result1" role="tab" data-toggle="tab">Result</a></li>
          <li role="presentation"><a href="" data-target="#html1" role="tab" data-toggle="tab">HTML</a></li>
          <li role="presentation"><a href="" data-target="#js1" role="tab" data-toggle="tab">JS</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="result1">
            <form id="formFloat">
              <div class="form-group">
                <label class="control-label">Currency</label>
                  <input type="text" class="form-control" placeholder="Enter currency" data-smk-type="currency" required>
              </div>
              <button type="submit" class="btn btn-default" ng-click="float()">Convert</button>
            </form>
          </div>
          <div role="tabpanel" class="tab-pane" id="html1">
            <div hljs hljs-include="'templates/hp-float.html'" hljs-language="html"></div>
          </div>
          <div role="tabpanel" class="tab-pane" id="js1">
            <div hljs hljs-include="'templates/hp-float.js'" hljs-language="javascript"></div>
          </div>
        </div><!-- /.tab-content -->
      </section>

      <section id="number-currency">
        <h1>{{'NUMBER-CURRENCY' | translate}}</h1><hr>
        <p class="lead">{{'NUMBER-CURRENCY-DESC' | translate}}</p>
        <div class="alert alert-info">{{'NUMBER-CURRENCY-NOTE' | translate}}</div>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="" data-target="#result2" role="tab" data-toggle="tab">Result</a></li>
          <li role="presentation"><a href="" data-target="#html2" role="tab" data-toggle="tab">HTML</a></li>
          <li role="presentation"><a href="" data-target="#js2" role="tab" data-toggle="tab">JS</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="result2">
            <form id="formCurrency">
              <div class="form-group">
                <label class="control-label">Currency</label>
                  <input type="text" class="form-control" placeholder="Enter number" data-smk-type="currency" required>
              </div>
              <button type="submit" class="btn btn-default" ng-click="currency()">Convert</button>
            </form>
          </div>
          <div role="tabpanel" class="tab-pane" id="html2">
            <div hljs hljs-include="'templates/hp-currency.html'" hljs-language="html"></div>
          </div>
          <div role="tabpanel" class="tab-pane" id="js2">
            <div hljs hljs-include="'templates/hp-currency.js'" hljs-language="javascript"></div>
          </div>
        </div><!-- /.tab-content -->
      </section>

      <section id="show-pass">
        <h1>{{'SHOW-PASS' | translate}}</h1><hr>
        <p class="lead">{{'SHOW-PASS-DESC' | translate}}</p>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="" data-target="#result6" role="tab" data-toggle="tab">Result</a></li>
          <li role="presentation"><a href="" data-target="#html6" role="tab" data-toggle="tab">HTML</a></li>
          <li role="presentation"><a href="" data-target="#js6" role="tab" data-toggle="tab">JS</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="result6">
            <form>
              <div class="form-group">
                <label class="control-label">Password</label>
                <input type="password" class="form-control" value="Smoke3" show-pass>
              </div>
            </form>
          </div>
          <div role="tabpanel" class="tab-pane" id="html6">
            <div hljs hljs-include="'templates/hp-showpass.html'" hljs-language="html"></div>
          </div>
          <div role="tabpanel" class="tab-pane" id="js6">
            <div hljs hljs-include="'templates/hp-showpass.js'" hljs-language="javascript"></div>
          </div>
        </div><!-- /.tab-content -->
      </section>

      <section id="hide-email">
        <h1>{{'HIDE-EMAIL' | translate}}</h1><hr>
        <p class="lead">{{'HIDE-EMAIL-DESC' | translate}}</p>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="" data-target="#result7" role="tab" data-toggle="tab">Result</a></li>
          <li role="presentation"><a href="" data-target="#html7" role="tab" data-toggle="tab">HTML</a></li>
          <li role="presentation"><a href="" data-target="#js7" role="tab" data-toggle="tab">JS</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="result7">
            <form id="formHideEmail">
              <div class="form-group">
                <label class="control-label">Email</label>
                  <input type="email" class="form-control" placeholder="Enter email" value="alfredobarronc@gmail.com" required>
              </div>
              <button type="submit" class="btn btn-default" ng-click="hideEmail()">Hide email</button>
            </form>
          </div>
          <div role="tabpanel" class="tab-pane" id="html7">
            <div hljs hljs-include="'templates/hp-hideemail.html'" hljs-language="html"></div>
          </div>
          <div role="tabpanel" class="tab-pane" id="js7">
            <div hljs hljs-include="'templates/hp-hideemail.js'" hljs-language="javascript"></div>
          </div>
        </div><!-- /.tab-content -->
      </section>

      <section id="URL">
        <h1>URL</h1><hr>
        <p class="lead">{{'URL-DESC' | translate}}</p>
        <div class="alert alert-info">{{'URL-NOTE' | translate}}</div>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="" data-target="#result3" role="tab" data-toggle="tab">Result</a></li>
          <li role="presentation"><a href="" data-target="#html3" role="tab" data-toggle="tab">HTML</a></li>
          <li role="presentation"><a href="" data-target="#js3" role="tab" data-toggle="tab">JS</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="result3">
            <div class="content text-center">
              <a href="" class="btn btn-default" ng-click="getUrl()">Get URL</a>
            </div>
          </div>
          <div role="tabpanel" class="tab-pane" id="html3">
            <div hljs hljs-include="'templates/hp-url.html'" hljs-language="html"></div>
          </div>
          <div role="tabpanel" class="tab-pane" id="js3">
            <div hljs hljs-include="'templates/hp-url.js'" hljs-language="javascript"></div>
          </div>
        </div><!-- /.tab-content -->
      </section>

      <section id="date">
        <h1>{{'DATE' | translate}}</h1><hr>
        <p class="lead">{{'DATE-DESC' | translate}}</p>
        <div class="alert alert-info">{{'DATE-NOTE' | translate}} <a href="http://momentjs.com/" target="_blank">momentjs</a></div>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="" data-target="#result4" role="tab" data-toggle="tab">Result</a></li>
          <li role="presentation"><a href="" data-target="#html4" role="tab" data-toggle="tab">HTML</a></li>
          <li role="presentation"><a href="" data-target="#js4" role="tab" data-toggle="tab">JS</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="result4">
            <form id="formDate">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <label class="control-label">Date</label>
                    <input type="text" class="form-control" id="date" placeholder="mm/dd/aaaa" value="12-30-2015">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label class="control-label">Format</label>
                    <input type="text" class="form-control" id="format" placeholder="dd/MM/yyyy" value="dd/MM/yyyy">
                  </div>
                </div>
              </div>
              <button type="submit" class="btn btn-default" ng-click="date()">Customize</button>
            </form>
          </div>
          <div role="tabpanel" class="tab-pane" id="html4">
            <div hljs hljs-include="'templates/hp-date.html'" hljs-language="html"></div>
          </div>
          <div role="tabpanel" class="tab-pane" id="js4">
            <div hljs hljs-include="'templates/hp-date.js'" hljs-language="javascript"></div>
          </div>
        </div><!-- /.tab-content -->

        <h3>{{'OPTIONS' | translate}}</h3>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>{{'OPTION' | translate}}</th>
              <th>{{'TYPE' | translate}}</th>
              <th>Default</th>
              <th>{{'DESCRIPTION' | translate}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>date</code></td>
              <td>Date | String</td>
              <td>{{'DATE-TB.DEFAULT.DATE' | translate}}</td>
              <td>{{'DATE-TB.DESCS.DATE' | translate}}</td>
            </tr>
            <tr>
              <td><code>format</code></td>
              <td>String</td>
              <td>yyyy-mm-dd</td>
              <td>{{'DATE-TB.DESCS.FORMAT' | translate}}</td>
            </tr>
          </tbody>
        </table>

        <h4>{{'DATE-TB2.DESC' | translate}}</h4>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>{{'DATE-TB2.TITLE' | translate}}</th>
              <th>{{'DESCRIPTION' | translate}}</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>d</td>
                <td>{{'DATE-TB2.DESCS.d' | translate}}</td>
              </tr>
              <tr>
                <td>dd</td>
                <td>{{'DATE-TB2.DESCS.dd' | translate}}</td>
              </tr>
              <tr>
                <td>m</td>
                <td>{{'DATE-TB2.DESCS.m' | translate}}</td>
              </tr>
              <tr>
                <td>mm</td>
                <td>{{'DATE-TB2.DESCS.mm' | translate}}</td>
              </tr>
              <tr>
                <td>M</td>
                <td>{{'DATE-TB2.DESCS.M' | translate}}</td>
              </tr>
              <tr>
                <td>MM</td>
                <td>{{'DATE-TB2.DESCS.MM' | translate}}</td>
              </tr>
              <tr>
                <td>yy</td>
                <td>{{'DATE-TB2.DESCS.yy' | translate}}</td>
              </tr>
              <tr>
                <td>yyyy</td>
                <td>{{'DATE-TB2.DESCS.yyyy' | translate}}</td>
              </tr>
          </tbody>
        </table>
      </section>

      <section id="date-difference">
        <h1>{{'DATE-DIFF' | translate}}</h1><hr>
        <p class="lead">{{'DATE-DIFF-DESC' | translate}}</p>
        <div class="alert alert-info">{{'DATE-NOTE' | translate}} <a href="http://momentjs.com/" target="_blank">momentjs</a></div>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="" data-target="#result5" role="tab" data-toggle="tab">Result</a></li>
          <li role="presentation"><a href="" data-target="#html5" role="tab" data-toggle="tab">HTML</a></li>
          <li role="presentation"><a href="" data-target="#js5" role="tab" data-toggle="tab">JS</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="result5">
            <form id="formDateDiff">
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">Date 1</label>
                    <input type="text" class="form-control" id="date1" placeholder="mm/dd/aaaa" value="09/25/2014">
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">Date 2</label>
                    <input type="text" class="form-control" id="date2" placeholder="mm/dd/aaaa" value="09/30/2014">
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">Interval</label>
                    <input type="text" class="form-control" id="interval" placeholder="Interval" value="days">
                  </div>
                </div>
              </div>
              <button type="submit" class="btn btn-default" ng-click="dateDiff()">Difference</button>
            </form>
          </div>
          <div role="tabpanel" class="tab-pane" id="html5">
            <div hljs hljs-include="'templates/hp-datediff.html'" hljs-language="html"></div>
          </div>
          <div role="tabpanel" class="tab-pane" id="js5">
            <div hljs hljs-include="'templates/hp-datediff.js'" hljs-language="javascript"></div>
          </div>
        </div><!-- /.tab-content -->

        <h3>{{'OPTIONS' | translate}}</h3>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>{{'OPTION' | translate}}</th>
              <th>{{'TYPE' | translate}}</th>
              <th>Default</th>
              <th>{{'DESCRIPTION' | translate}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>fromDate</code></td>
              <td>String: {date}</td>
              <td>{{'DATE-DIFF-TB.DEFAULT.DATE' | translate}}</td>
              <td>{{'DATE-DIFF-TB.DESCS.DATE' | translate}}</td>
            </tr>
            <tr>
              <td><code>toDate</code></td>
              <td>String: {date}</td>
              <td>{{'DATE-DIFF-TB.DEFAULT.DATE' | translate}}</td>
              <td>{{'DATE-DIFF-TB.DESCS.DATE' | translate}}</td>
            </tr>
            <tr>
              <td><code>interval</code></td>
              <td>String: {seconds | minutes | hours | days | weeks | months | years}</td>
              <td>{{'DATE-DIFF-TB.DEFAULT.INTERVAL' | translate}}</td>
              <td>{{'DATE-DIFF-TB.DESCS.INTERVAL' | translate}}</td>
            </tr>
          </tbody>
        </table>
      </section>

      <blockquote class="blockquote-reverse">
        <p>{{'FULL-EXAMPLE' | translate}}<a href="http://codepen.io/alfredobarron/pen/NGVYQy" target="_blank"><img src="images/codepen.png" alt=""></a></p>
      </blockquote>
    </div><!--/.col-lg-9 -->

  </div><!--/.row -->
</div><!-- /.container -->
