<div class="jumbotron">
  <div class="container">
    <h1>{{'GETTING-STARTED' | translate}}</h1>
    <p class="lead">{{'GETTING-STARTED-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="download-smoke">{{'DOWNLOAD' | translate}} Smoke</a></li>
        <li><a href="" smooth-scroll target="whats-included">{{'WHATS-INCLUDED' | translate}}</a></li>
        <li><a href="" smooth-scroll target="required">{{'REQUIRED' | translate}}</a></li>
        <li><a href="" smooth-scroll target="basic-template">{{'BASIC-TEMPLATE' | translate}}</a></li>
        <li><a href="" smooth-scroll target="language">{{'LANGUAGE' | translate}}</a></li>
      </ul>
    </div>

    <div class="col-lg-9">

      <section id="download-smoke">
        <h1>{{'DOWNLOAD' | translate}} Smoke</h1><hr>

        <p class="lead">{{'DOWNLOAD-DESC' | translate}}</p>
        <p><a class="btn btn-default btn-lg" role="button" href="https://github.com/alfredobarron/smoke/releases/download/{{version}}/smoke-{{version}}.zip" target="_blank" ng-click="download()">{{'DOWNLOAD' | translate}} Smoke</a></p>

        <br>

        <h2>{{'INSTALL' | translate}} Bower</h2>
        <div hljs>$ bower install smoke</div>

        <h2>{{'INSTALL' | translate}} npm</h2>
        <div hljs>$ npm install smokejs</div>
      </section>

      <section id="whats-included">
        <h1>{{'WHATS-INCLUDED' | translate}}</h1><hr>
        <p class="lead">{{'WHATS-INCLUDED-DESC' | translate}}</p>
        <div hljs hljs-include="'templates/gs-included.html'"></div>
      </section>

      <section id="required">
        <h1>{{'REQUIRED' | translate}}</h1><hr>
        <p class="lead">{{'REQUIRED-DESC' | translate}}</p>
        <div class="alert alert-warning"><b>JQuery</b><br>{{'REQUIRED-JQUERY' | translate}} <a href="https://jquery.com/" target="_blank">JQuery</a>.</div>
        <div class="alert alert-warning"><b>Bootstrap 3</b><br>{{'REQUIRED-BOOTSTRAP' | translate}} <a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a>.</div>
      </section>

      <section id="basic-template">
        <h1>{{'BASIC-TEMPLATE' | translate}}</h1><hr>
        <p class="lead">{{'BASIC-TEMPLATE-DESC' | translate}}</p>
        <p>{{'BASIC-TEMPLATE-DESC2' | translate}}</p>
        <div hljs hljs-include="'templates/gs-basic.html'"></div>
      </section>

      <section id="language">
        <h1>{{'LANGUAGE' | translate}}</h3><hr>
        <p class="lead">{{'LANGUAGE-DESC' | translate}}</p>
        <div hljs hljs-include="'templates/gs-language.html'"></div>

        <h3>{{'LANGUAGE-TB.TITLE' | translate}}</h3>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>{{'LANGUAGE-TB.LANGUAGE' | translate}}</th>
              <th>{{'LANGUAGE-TB.ARCHIVE' | translate}}</th>
              <th>{{'LANGUAGE-TB.CREATOR' | translate}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{'ENGLISH' | translate}}</td>
              <td>Default</td>
              <td><a href="https://github.com/misaelrojas" target="_blank">@misaelrojas</a></td>
            </tr>
            <tr>
              <td>{{'SPANISH' | translate}}</td>
              <td>es.js</td>
              <td><a href="https://github.com/alfredobarron" target="_blank">@alfredobarron</a></td>
            </tr>
            <tr>
              <td>{{'DEUTSCH' | translate}}</td>
              <td>de.js</td>
              <td><a href="https://github.com/sdhp" target="_blank">@sdhp</a></td>
            </tr>
            <tr>
              <td>{{'FRENCH' | translate}}</td>
              <td>fr.js</td>
              <td><a href="https://github.com/LespiletteMaxime" target="_blank">@LespiletteMaxime</a></td>
            </tr>
            <tr>
              <td>{{'ITALIAN' | translate}}</td>
              <td>it.js</td>
              <td><a href="https://github.com/promogest" target="_blank">@promogest</a></td>
            </tr>
            <tr>
              <td>{{'JAPANESE' | translate}}</td>
              <td>ja.js</td>
              <td><a href="https://github.com/hidesuke" target="_blank">@hidesuke</a></td>
            </tr>
            <tr>
              <td>{{'BRAZILIANPORTUGUESE' | translate}}</td>
              <td>pt_br.js</td>
              <td><a href="https://github.com/druzza" target="_blank">@druzza</a></td>
            </tr>
            <tr>
              <td>{{'ARABIC' | translate}}</td>
              <td>ar.js</td>
              <td><a href="https://github.com/tamerwaw" target="_blank">@tamerwaw</a></td>
            </tr>
            <tr>
              <td>{{'RUSSIAN' | translate}}</td>
              <td>ru.js</td>
              <td><a href="https://github.com/digitalhitler" target="_blank">@digitalhitler</a></td>
            </tr>
            <tr>
              <td>{{'INDONESIAN' | translate}}</td>
              <td>id.js</td>
              <td><a href="https://github.com/mixinix" target="_blank">@mixinix</a></td>
            </tr>
          </tbody>
        </table>
      </section>


    </div><!--/.col-lg-9 -->
  </div><!--/.row -->
</div><!-- /.container -->
