{% extends "vendor/manage/base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block extra_css %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}


{% block vendor_content %}

<h2>{% trans 'Admin: Subscription Detail' %}</h2>
<div class='row'>
  <div class='col'>
    <div class='card'>
      <div class='card-header'>
        {% trans 'Subscription Overview' %}
      </div>
      <div class='card-body'>
        <h4>{{ object.gateway_id}}</h4>
        <h4>{{ object.name}}</h4>
        <p>{{ object.receipts.first.order_item.offer.offer_description|default_if_none:"" }}</p>
        <div class='row'>
          <div class='d-flex flex-column w-50 px-3 py-2'>
            <div class='font-weight-bold'>
              {% trans 'Transaction' %}
            </div>
            {{object.gateway_id}}
          </div>
          <div class='d-flex flex-column w-50 px-3 py-2'>
            <div class='font-weight-bold'>
              {% trans 'Auto Renew' %}
            </div>
            {{ object.auto_renew }}
          </div>
          <div class='d-flex flex-column w-50 px-3 py-2'>
            <div class='font-weight-bold'>
              {% trans 'Term Type' %}
            </div>
            {{object.receipts.first.order_item.offer.get_terms_display}}
          </div>
          <div class='d-flex flex-column w-50 px-3 py-2'>
            <div class='font-weight-bold'>
              {% trans 'Trial Period' %}
            </div>
            {{object.receipts.first.order_item.offer.term_details.trial_occurrences|default:'0'}}
            {% if object.receipts.first.order_item.offer.term_details.term_units == 10 %}
            {% trans 'Days' %}
            {% else %}
            {% trans 'Months' %}
            {% endif %}
          </div>
          <div class='d-flex flex-column w-50 px-3 py-2'>
            <div class='font-weight-bold'>
              {% trans 'Ends On' %}
            </div>
            <div class="{% if not object.auto_renew %}text-danger{% endif %}">
              {{ object.receipts.last.end_date|date:'Y-M-d' }}
            </div>
          </div>
          <div class='d-flex flex-column w-50 px-3 py-2'>
            <div class='font-weight-bold'>
              {% trans 'Cost' %}
            </div>
            ${{ object.payments.last.amount }} {{ object.receipts.first.order_item.invoice.currency|upper }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<p></p>
<div class="row ml-auto mr-auto">
  <div class="card">
    <div class="card-body">
      <form method="post">
        {% csrf_token %}
        {{ form|crispy  }}
        <button type="submit" class="btn btn-primary">{% trans 'Recreate' %}</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}


{% block extra_js %}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(".datepicker").datepicker();
</script>
{% endblock %}