<div class="panel panel-default shadow-z-2" ng-class="{'shadow-z-2': !call_history}">
      <form name="form">
        <div class="input-group dialpad-display">
          <input name="dtmfHistory" type="text" class="form-control text-center" placeholder="" ng-model="dtmfHistory.value" />
        </div>
        <div class="panel-body">
          <div class="dialpad-numbers">
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(1)">
                  <h2 class="dialpad-number">1</h2>
                  <span class="dialpad-alpha">./@</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(2)">
                  <h2 class="dialpad-number">2</h2>
                  <span class="dialpad-alpha">ABC</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(3)">
                  <h2 class="dialpad-number">3</h2>
                  <span class="dialpad-alpha">DEF</span>
                </a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(4)">
                  <h2 class="dialpad-number">4</h2>
                  <span class="dialpad-alpha">GHI</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(5)">
                  <h2 class="dialpad-number">5</h2>
                  <span class="dialpad-alpha">JKL</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(6)">
                  <h2 class="dialpad-number">6</h2>
                  <span class="dialpad-alpha">MNO</span>
                </a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(7)">
                  <h2 class="dialpad-number">7</h2>
                  <span class="dialpad-alpha">PQRS</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(8)">
                  <h2 class="dialpad-number">8</h2>
                  <span class="dialpad-alpha">TUV</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(9)">
                  <h2 class="dialpad-number">9</h2>
                  <span class="dialpad-alpha">WXYZ</span>
                </a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget('*')">
                  <h2 class="dialpad-number dialpad-star">*</h2>
                  <span class="dialpad-alpha"></span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget(0)">
                  <h2 class="dialpad-number">0</h2>
                  <span class="dialpad-alpha">+</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmfWidget('#')">
                  <h2 class="dialpad-number dialpad-pound">#</h2>
                  <span class="dialpad-alpha"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
