{% extends "djstripe/base.html" %}

{% block title %}Accounts Dashboard{% endblock title %}

{% block content %}
{{ block.super }}
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            {% include "djstripe/includes/_subscription_status.html" %}
            <h2>Account Information</h2>
        </div>
    </div>
    <div class="row">
        {% if customer.has_valid_source %}
            <div class="col-xs-4">
                <p>
                    Credit Card on file.
                    <a class="btn btn-info" data-toggle="modal" href="#show-card">Show Card</a>
                </p>
            </div>

            <div class="col-xs-4">
                <p>
                    <a class="btn btn-primary pull-right" href="{% url 'djstripe:change_card' %}">Change Card</a>
                </p>
            </div>
        {% else %}
            <div class="col-xs-4" style="margin-bottom:10px;">
                <p>
                    <a class="btn btn-primary pull-left" href="{% url 'djstripe:change_card' %}">Add Card</a>
                </p>
            </div>
        {% endif %}
    </div>


    {% if subscription.is_status_current and not subscription.is_status_temporarily_current %}
        <p>Next billed on {{ subscription.current_period_end|date }}.</p>
        <p>You can <a href="{% url 'djstripe:subscribe' %}">change</a> your plan
        or <a href="{% url 'djstripe:cancel_subscription' %}">cancel</a> your subscription.
        </p>
    {% else %}
        <p>You can <a href="{% url 'djstripe:subscribe' %}">subscribe</a>.</p>
    {% endif %}
    <p>Or consult your <a href="{% url 'djstripe:history' %}">payment history</a>.</p>

    {% if plans %}
        {# Show available plans #}
        <div class="row">
            <div class="col-xs-12">
                <h2>Subscription</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Plan</th>
                            <th>Interval</th>
                            <th>Description</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for plan in plans %}
                        <tr {% if plan == subscription.plan %}
                            {% if subscription.is_status_current and not subscription.is_status_temporarily_current and subscription.status != subscription.STATUS_TRIALING %}
                                class="success"
                            {% elif subscription.is_status_temporarily_current or subscription.status == subscription.STATUS_TRIALING %}
                                class="warning"
                            {% endif %}
                        {% endif %}>
                            <td>{{ plan.name }}</td>
                            <td>{{ plan.interval.title }}ly</td>
                            <td>{{ plan.description }}</td>
                            <td>
                                {% if plan == subscription.plan and subscription.status != subscription.STATUS_CANCELED %}
                                    <strong>Your plan</strong>
                                {% else %}
                                    Not your plan
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% else %}
        {# No plans so just show payment history #}
        {% include "djstripe/includes/_history_table.html" %}
    {% endif %}
</div>

  <!-- Modal for showing card -->
  <div class="modal fade" id="show-card">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Card on File</h4>
        </div>
        <div class="modal-body">
            <p><strong>Brand:</strong> {{ customer.default_source.brand }}</p>
            <p><strong>Last 4 Digits:</strong> {{ customer.default_source.last4 }}</p>
            <p><small>For security, your card information is stored on <a href="https://stripe.com">stripe.com</a>.</small></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

{% endblock content %}

{% block javascript %}
{{ block.super }}
{% if plans %}
    <script>
        $(function() {
            $.post("{% url 'djstripe:sync_history' %}", function(data) {
                $('#history-table').html(data);
            });
        });
    </script>
{% else %}
    <script>
        $(function() {
            $.post("{% url 'djstripe:sync_history' %}", function(data) {
                $('#history-table').html(data);
                $('.in-progress-gif').hide();
            });
        });
    </script>
{% endif %}
{% endblock javascript %}
