{% extends "templates/partials/base.html" %}

{% block title %}{% parent %}{% endblock %}

{% block head_extra %}
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <script type="text/javascript">
    window.IS_DEMO = true;
  </script>
{% endblock %}

{% block body_attributes %}class="page--demo demo"{% endblock %}

{% block header %}
  <div class="section hero">
    <div class="container">
      <div class="row">
        <div class="col-md-6 hero-text-column">
          <div class="hero-text">
            <h2><strong>{SLUSH{=name}}</strong></h2>
            <h3>Welcome to a Stencil-generated website</h3>
            <a href="http://ronik-design.github.io/slush-stencil/" target="_new">Learn more</a>
          </div>
        </div>
        <div class="col-md-6">
          {% include "templates/partials/stencil-logo.html" %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block content %}
  <hr />
  <div class="section entry">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <form id="stats-form">
            <div class="form-group">
              <label for="stat-multiplier">Multiplier</label>
              <input id="stat-multiplier" class="form-control" type="number" value="100"/>
            </div>
            <div class="form-group">
              <label for="stat-heading">Heading</label>
              <input id="stat-heading" class="form-control" type="text" value=""/>
            </div>
            <div class="form-group">
              <label for="stat-description">Description</label>
              <textarea id="stat-description" class="form-control" type="text" value=""></textarea>
            </div>
            <div class="form-group">
              <input type="submit" value="add" class="btn btn-primary btn-lg"></input>
            </div>
          </form>
        </div>
        <div class="col-md-6">
          <h3>Try out the JS app</h3>
          <p class="lead">As a simple demonstration that the JS build scripts are working, try entering some silly statistics</p>
        </div>
      </div>
    </div>
  </div>

  <hr />
  <div class="section stats">
    <div class="container">
      <div id="stats-items" class="row">
        <div class="stats-item">
          <h2 class="stat-multiplier">222</h2>
          <h3 class="stat-heading">Coder Happiness</h3>
          <p class="stat-description lead">It's just off the charts...</p>
        </div>
        <script id="stats-item-template" type="text/template">
          <div class="stats-item">
            <h2 class="stat-multiplier"><%= multiplier %></h2>
            <h3 class="stat-heading"><%= heading %></h3>
            <p class="stat-description lead"><%= description %></p>
          </div>
        </script>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer %}
  <hr />
  <div class="section footer">
    <div class="container">
      <a href="http://ronikdesign.com" target="_new">&lt;ronik design /&gt;</a>
    </div>
  </div>
{% endblock %}