{% extends 'crm/base.html' %}
{% load static %}
{% block title %}
  Redirect Numbers
{% endblock title %}

{% block body %}
  <div class="uk-container" id="redirect">
    <section data-uk-grid class="uk-child-width-1-2@m">
      <div>
        <div class="srm-page-heading">
          Redirect numbers
        </div>
      </div>
    </section>
    <div class="uk-child-width-1-3@m uk-child-width-1-2@s srm-contacts-card-list uk-margin-small-top uk-grid-match" data-uk-grid>
      <div class="uk-margin-bottom">
        <div class="srm-card uk-padding-remove srm-contact-card">
          <table class="srm-contact-card-table">
            <tbody>
            <tr>
              <td>
                <div class="uk-flex uk-flex-center">
                  <div class="srm-contact-card-value-medium"><img src="{% static 'crm/images/call-answer.png' %}" alt="" class="uk-margin-small-right">Add redirect numbers</div>
                </div>
                <form>
                  <div class="input-box">
                    <div class="uk-form-controls input-box">
                      <select class="srm-input crm-select2" id="" v-model="currentRedirect.campaign_number">
                        <option value="">-- Select Number --</option>
                        <option :value="number.id" v-for="(number, key) in numbers">[[ number.twilio_number ]]</option>
                      </select>
                    </div>
                    <small class="uk-text-danger" v-if="error.from_no">[[ error.from_no[0] ]]</small>
                  </div>
                  <div class="input-box">
                    <label class="uk-form-label Label" for="form-stacked-text">Redirect to:</label>
                    <div class="uk-form-controls input-box">
                      <input class="srm-input" id="form-stacked-text" type="text" placeholder="Enter your personal phone" v-model="currentRedirect.to">
                    </div>
                    <small class="uk-text-danger" v-if="error.to_no">[[ error.to_no[0] ]]</small>
                  </div>

                  <small class="uk-text-danger" v-if="error.non_field_errors">[[ error.non_field_errors[0] ]]</small>
                  <div class="uk-margin-medium-top">
                    <button class="srm-button srm-button-primary-outline Rectangle-9green crm_button-large" @click.prevent="addRedirect">Add Redirect</button>
                  </div>
                </form>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div v-for="(num, key) in redirects.results" :key="key">
        <div class="srm-card uk-padding-remove srm-contact-card">
          <table class="srm-contact-card-table">
            <tbody>
            <tr>
              <td>
                <div class="uk-width-1-1 uk-margin-remove" data-uk-grid>
                  <div class="srm-contact-card-value-small uk-width-expand uk-padding-remove-left"><img src="{% static 'crm/images/contacts-icon.png' %}" alt="" class="uk-margin-small-right">[[ num.campaign_name ]]</div>
                  <div class="srm-contact-card-value-small uk-width-auto uk-padding-remove-left uk-flex uk-flex-right"><div><img src="{% static 'crm/images/shape-copy-13.png' %}" alt="" class="uk-margin-small-right"></div>Added: [[ num.date_created | DMYDate ]]</div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="uk-padding-remove-top uk-padding-remove-bottom">
                <div class="uk-width-1-1 uk-flex uk-flex-center uk-padding-small">
                  <h4 class="uk-text-bold uk-margin-remove crm-large-text">[[ num.twilio_number_object.friendly_name ]]</h4>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="uk-width-1-1 uk-margin-remove" data-uk-grid>
                  <div class="srm-contact-card-value-small uk-width-expand uk-padding-remove-left"><img src="{% static 'crm/images/shape 2.png' %}" alt="" class="uk-margin-small-right">Redirect to: [[ num.to_no ]]</div>
                  <div class="srm-contact-card-value-small uk-width-auto uk-padding-remove-left uk-flex uk-flex-right"><div><img src="{% static 'crm/images/key.png' %}" alt="" class="uk-margin-small-right"></div>
                    Verified: <span v-if="num.verified" class="fas fa-check-circle uk-text-success"></span><span v-else class="fas fa-times-circle uk-text-danger"></span>
                  </div>
                </div>
              </td>
            </tr>

            <tr>
              <td>
                <button class="srm-button srm-button-primary-outline crm_button-large" @click.prevent="deleteRedirect(key)">Delete</button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="srm-table-footer uk-width-auto@m uk-flex uk-flex-right">
      <button @click.prevent="previous" :disabled="!redirects.previous" class="srm-button-transparent"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</button>
      <span>[[ redirects.count > 0 ? (page * 100) + 1 : 0 ]] - [[ redirects.results.length + (page * 100) ]] of [[ redirects.count ]]</span>
      <button :disabled="!redirects.next" @click.prevent="next" class="srm-button-transparent">Next <span class="uk-margin-small-left" uk-pagination-next></span></button>
    </div>

  </div>
{% endblock body %}
{% block extra_js %}
  <script src="{% static 'crm/js/marketing/campaigns/redirect-numbers.js' %}"></script>
{% endblock extra_js %}