<div ng-include="'partials/head.html?3'"></div>


<div class="login_form_wrap">
  <div class="error" ng-if="error.message">{{ error.message }}</div>
  <form name="mySendCodeForm" ng-if="!credentials.phone_code_hash" ng-submit="sendCode()">
    <h3 class="login_form_head">Sign in</h3>
    <p class="login_form_lead">Please enter your full phone number with country code.</p>

    <div class="form-group" ng-class="{'has-error': error.field == 'phone'}">
      <label class="control-label" for="phone_number" ng-if="error.field == 'phone'">Incorrect phone number</label>
      <input type="tel" class="form-control" name="phone_number" ng-model="credentials.phone_number" placeholder="Enter your phone" required>
    </div>
    <button class="btn btn-tg btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit">
      {{progress.enabled ? 'Generating keys...' : 'Next'}}
    </button>
  </form>

  <form name="myLoginForm" ng-if="credentials.phone_code_hash" ng-submit="logIn()">
    <h3 class="login_form_head">{{ credentials.phone_number | phoneNumber }} <small>(<a href="#/auth">edit</a>)</small></h3>
    <p class="login_form_lead">We have sent you a code via SMS.<br/>Please enter it below.</p>

    <p class="login_form_lead">
      <span ng-show="callPending.remaining > 0">Telegram will call you in {{callPending.remaining | duration}}</span>
      <span ng-show="!callPending.remaining &amp;&amp; !callPending.success">Telegram is calling you</span>
      <span ng-show="!callPending.remaining &amp;&amp; callPending.success">Telegram dialed your number</span>
    </p>

    <div class="form-group" ng-class="{'has-error': error.field == 'phone_code'}">
      <label class="control-label" for="phone_code" ng-if="error.field == 'phone_code'">Incorrect SMS code</label>
      <input type="number" maxlength="5" class="form-control" name="phone_code" ng-model="credentials.phone_code" placeholder="Enter your code" required>
    </div>

    <button class="btn btn-tg btn-block" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled">
      {{progress.enabled ? 'Checking code...' : 'Sign in'}}
    </button>
  </form>
</div>