{% extends "base.html" %}

{% block content %}
{% include "partials/navbar.html" %}
<div class="container">
  <h1> Schedule a Live Call </h1>
{% if error %}
    {% if error == "DND" %}
      <div class="alert alert-danger" role="alert">
        {{ user_phone }} is on DND
      </div>
    {% else %}
      <div class="alert alert-danger" role="alert">
        The call failed. Please check {{user_phone}} once again. If the number is correct please try again.
      </div>
    {% endif %}
  {% endif %}

  {% if success %}
    <div class="alert alert-success" role="alert">
      The call has been scheduled. If you don't get the call soon, try once again.
      <a href='/feedback_call?user_phone={{user_phone}}'> Schedule a feedback call. </a>
    </div>
  {% endif %}
  <form action="/live_call" method="POST" name="live_call">

    <div id="usernumberinput" class="input-group col-md-6">
      <span class="input-group-addon" id="basic-addon1">User Number</span>
      <input type="text" class="form-control" name="user_phone" id="user_phone" aria-describedby="basic-addon1" value="{{user_phone}}">
    </div>

    <div id="agentnumberinput" class="input-group col-md-6">
      <span class="input-group-addon" id="basic-addon2">Your Number</span>
      <input type="text" class="form-control" name="agent_phone" id="agent_phone" aria-describedby="basic-addon2" value="{{agent_phone}}">
    </div>

    <div class="input-group col-md-6">
      <span class="input-group-addon" id="basic-addon3">Exotel Phone</span>
      <select class="form-control" name ="exotel_phone" id='exotel_phone' aria-describedby="basic-addon3">
        {% for p in exotel_phones %}
          <option value="{{ p.phone }}">{{p.phone}}</option>
        {% endfor %}
      </select>
    </div>

    <div id="purposeinput" class="input-group col-md-6">
      <span class="input-group-addon" id="basic-addon4">Purpose of the call</span>
      <select class="form-control" name ="purpose" id='purpose' aria-describedby="basic-addon4">
        {% for p in purposes %}
          <option value="{{ p[0] }}">{{p[1]}}</option>
        {% endfor %}
      </select>
    </div>

    <button id="form_submit" type="submit" class="btn btn-success">CALL</button>
  </form>
</div>

{% endblock content %}