{% extends 'default.html' %}

{% set active_page = "phone" %}

{% block title %}
  Phone numbers
{% endblock %}

{% block default_content %}
  <div class="card">
    <div class="card-body">
      <h3>Your current numbers</h3>

      {% for reservation in reservations %}
        <div>
          <a href="{{ url_for('phone.reservation_route', reservation_id=reservation.id ) }}">
            {{ reservation.number.number }} ➡
          </a>
        </div>
      {% endfor %}

    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h3>Phone Reservation</h3>
      <div class="alert alert-info">
        Currently your phone quota is <b>{{ current_user.phone_quota }}</b> minutes.
      </div>

      <form method="post">
        <div class="form-group">
          <label for="input-minute">How many minutes do you need this number for?</label>
          <input name="minute" type="number" class="form-control" id="input-minute" aria-describedby="emailHelp"
                 placeholder="5, 10, 60, etc.">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label>Countries</label> <br>
          {% for country in countries %}
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio"
                     name="country"
                     id="country-{{ country.id }}" value="{{ country.id }}">
              <label class="form-check-label" for="country-{{ country.id }}">{{ country.name }}</label>
            </div>
          {% endfor %}
        </div>

        <button type="submit" class="btn btn-primary">Get my number</button>
      </form>

    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h3>Past Reservations</h3>

      {% for reservation in past_reservations %}
        <div>
          <a href="{{ url_for('phone.reservation_route', reservation_id=reservation.id ) }}" class="mr-3">
            {{ reservation.number.number }} ➡
          </a>
          ended {{ reservation.end.humanize() }}
        </div>
      {% endfor %}

    </div>
  </div>


{% endblock %}