{% extends "base.html" %}

{% block content %}

    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Dost ki Pathshaala</a>
        </div>

        <div class="navbar-nav navbar-right">
          <a href="http://www.dosteducation.com">Dost Education Website</a>
        </div>
      </div>
    </nav>

    <div class="container">

      <div class="jumbotron">
        <p> <em> Dost ki Pathshaala </em> is a 6-month school readiness program for parents with kids between age 3-6. Through this program Dost sends parents 4 phone calls a week with short audio content. The calls help parents improve their child's early development and play a bigger part in their child's education. It is a fun and easy way for parents to turn regular moments with their child into learning moments.</p>
      </div>

      <div class="row page-header col-md-8 col-md-offset-2">
        <h2> Voice call demo </h2>
      </div>
      <div class="row col-md-8 col-md-offset-2">
        <div class="row">
          <p> Hear a sample recording by entering your mobile number. </p>
          <p> Available for US and India numbers only. Enter +1 or +91 followed by a 10 digit mobile number</p>
          <p> The English option is included for the purposes of the demo.</p>
        </div>
        <form class="col-md-10" action="." method="POST">
          <div class="row col-md-8 col-md-offset-2">
            <div class="input-group">
              <span class="input-group-addon" id="ph_addon">Phone</span>
              <input type="text" id="tel" name="tel" class="form-control" placeholder="+1XXX or +91XXX" aria-describedby="ph_addon">
            </div>
          </div>
          <div class="row col-md-8 col-md-offset-2">
            <div class="col-md-6">
              <p> Select a language </p>
            </div>
            <div class="col-md-6">
              <div class="radio">
                <label><input type="radio" name="language" id="english" value="english">English</label>
              </div>
              <div class="radio">
                <label><input type="radio" name="language" id="hindi" value="hindi">Hindi</label>
              </div>
            </div>
          </div>
          <div class="row col-md-8 col-md-offset-2">
            <button type="submit" class="btn btn-info">Call</button>
          </div>
        </form>
      </div>

      <div class="row page-header col-md-10 col-md-offset-1">
        <h2>Dost signup and onboarding workshops</h2>
      </div>

      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <p> Parents are introduced to Dost through an in-person onboarding session; faciitated either by the Dost team or the partner. The sessions help parents understand the importance of their role in their child's development and learn how they can get the most of the school readiness program. </p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4">
          <a class="thumbnail">
            <img src="static/img/onboard.png" alt="Dost team talking to mothers at a workshop in Mumbai">
          </a>
        </div>
        <div class="col-md-4">
          <a class="thumbnail">
            <img src="static/img/signup.png" alt="Signup forms used in the workshops">
          </a>
        </div>
        <div class="col-md-4">
          <a class="thumbnail">
            <img src="static/img/workshop.png" alt="Mothers at a Dost workshop">
          </a>
        </div>
      </div>
    </div>

{% endblock content %}