<div class="padding">
	<div class="row">
    <div class="col-sm-6">
      <div class="box">
        <div class="box-header">
          <h2>Controls</h2>
        </div>
        <div class="box-body">
          <div class="form-horizontal">
            <div class="form-group row">
              <label class="col-sm-3 form-control-label">Text:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-text="user.name">{{ user.name || 'empty' }}</a>
                </p>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 form-control-label">Select:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
                		{{ showStatus(user) }}
                	</a>
                </p>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 form-control-label">Textarea:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-textarea="user.desc" e-rows="7">
								    {{ user.desc || 'no description' }}
								  </a>
                </p>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 form-control-label">Checkbox:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-checkbox="user.remember" e-title="Remember?">
								    {{ user.remember && "Remember me!" || "Don't remember" }}
								  </a>
                </p>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 form-control-label">Radiolist:</label>
              <div class="col-sm-9">
              	<p class="form-control-static">
                	<a editable-radiolist="user.agenda" e-ng-options="s.value as s.text for s in agenda">
								    {{ showAgenda() }}
								  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-header">
          <h2>Editable form</h2>
        </div>
        <div class="box-body">
          <form editable-form name="editableForm" onaftersave="saveUser()">
            <div class="form-horizontal">
              <div class="form-group row">
                <label class="col-sm-3 form-control-label">Username:</label>
                <div class="col-sm-9">
                  <p class="form-control-static">
                    <span editable-text="user.name">{{ user.name || 'empty' }}</span>
                  </p>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-3 form-control-label">Status:</label>
                <div class="col-sm-9">
                  <p class="form-control-static">
                    <span editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
                      {{ showStatus(user) }}
                    </span>
                  </p>
                </div>
              </div>

              <div class="form-group row">
                <div class="col-sm-9 col-sm-offset-3">
                  <button type="button" class="btn white" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
                    Edit
                  </button>
                  <!-- buttons to submit / cancel form -->
                  <span ng-show="editableForm.$visible">
                    <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
                      Save
                    </button>
                    <button type="button" class="btn white" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
                      Cancel
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        <div class="box-header">
          <h2>Html5 Inputs</h2>
        </div>
        <div class="box-body">
          <div>
            <div class="m-b">Email: <a editable-email="html5.email">{{ html5.email || 'empty' }}</a></div>
            <div class="m-b">Tel: <a editable-tel="html5.tel" e-pattern="\d{3}\-\d{2}\-\d{2}" e-title="xxx-xx-xx">{{ html5.tel || 'empty' }}</a></div>
            <div class="m-b">Number: <a editable-number="html5.number" e-min="18">{{ html5.number || 'empty' }}</a></div>  
            <div class="m-b">Range: <a editable-range="html5.range" e-step="5">{{ html5.range || 'empty' }}</a></div>  
            <div class="m-b">Url: <a editable-url="html5.url">{{ html5.url || 'empty' }}</a></div>  
            <div class="m-b">Search: <a editable-search="html5.search">{{ html5.search || 'empty' }}</a></div>  
            <div class="m-b">Color: <a editable-color="html5.color">{{ html5.color || 'empty' }}</a></div>  
            <div class="m-b">Date: <a editable-date="html5.date">{{ html5.date || 'empty' }}</a></div>  
            <div class="m-b">Time: <a editable-time="html5.time">{{ html5.time || 'empty' }}</a></div>  
            <div class="m-b">Datetime: <a editable-datetime="html5.datetime">{{ html5.datetime || 'empty' }}</a></div>  
            <div class="m-b">Month: <a editable-month="html5.month">{{ html5.month || 'empty' }}</a></div>  
            <div class="m-b">Week: <a editable-week="html5.week">{{ html5.week || 'empty' }}</a></div>  
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
