{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 humanize i18n custom_tags %}

{% block content %}
<div class="dashboard-container">
    <div class="dashboard-container-head">
        <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Bills" %}</h3>
        {% if messages %}
            <div class="alert alert-warning">
                {% for message in messages %}
                <span>{{ message }}</span>
                {% endfor %}
            </div>
        {% endif %}
        <div class="dashboard-subtitle"></div>
    </div>

<ul class="nav nav-tabs">
  <li class="active"><a href="#">{% trans "Subscriptions" %}</a></li>
  <li><a href="#">{% trans "One-time payments" %}</a></li>
</ul>
    <div class="subscriptions">
    <table class="table table-switch">
        <thead>
            <tr>
                <th>{% trans "VM ID" %}</th>
                <th>{% trans "IP Address" %}/{% trans "Product" %}</th>
                <th>{% trans "Period" %}</th>
                <th>{% trans "Amount" %}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for inv_data in invs %}
                <tr>
                    {{ inv_data | get_line_item_from_stripe_invoice }}
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% if invs.has_other_pages %}
  <ul class="pagination">
    {% if invs.has_previous %}
      {% if user_email %}
        <li><a href="?page={{ invs.previous_page_number }}&user_email={{user_email}}">&laquo;</a></li>
      {% else %}
        <li><a href="?page={{ invs.previous_page_number }}">&laquo;</a></li>
      {% endif %}
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in invs.paginator.page_range %}
      {% if invs.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
          {% if user_email %}
              <li><a href="?page={{ i }}&user_email={{user_email}}">{{ i }}</a></li>
          {% else %}
              <li><a href="?page={{ i }}">{{ i }}</a></li>
          {% endif %}
      {% endif %}
    {% endfor %}
    {% if invs.has_next %}
      {% if user_email %}
        <li><a href="?page={{ invs.next_page_number }}&user_email={{user_email}}">&raquo;</a></li>
      {% else %}
        <li><a href="?page={{ invs.next_page_number }}">&raquo;</a></li>
      {% endif %}
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
  </ul>
{% endif %}
        </div>

        <div class="one-time-charges">
    <table class="table table-switch">
        <thead>
            <tr>
                <th>{% trans "Product" %}</th>
                <th>{% trans "Date" %}</th>
                <th>{% trans "Amount" %}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for ho, stripe_charge_data in invs_charge %}
                <tr>
                    <td class="xs-td-inline">{{ho.generic_product.product_name.capitalize()}}</td>
                    <td class="xs-td-inline">{{ho.created_at.strftime('%Y-%m-%d')}}</td>
                    <td class="xs-td-inline">{{ho.price}}</td>
                    <td class="text-right last-td">
                        <a class="btn btn-order-detail" href="{stripe_charge_data.receipt_url}" target="_blank">{% trans "See Invoice" %}</a>
                    </td>
                    {{ ho.id | get_line_item_from_hosting_order_charge }}
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% if invs_charge.has_other_pages %}
  <ul class="pagination">
    {% if invs_charge.has_previous %}
      {% if user_email %}
        <li><a href="?page={{ invs_charge.previous_page_number }}&user_email={{user_email}}">&laquo;</a></li>
      {% else %}
        <li><a href="?page={{ invs_charge.previous_page_number }}">&laquo;</a></li>
      {% endif %}
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in invs_charge.paginator.page_range %}
      {% if invs_charge.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
          {% if user_email %}
              <li><a href="?page={{ i }}&user_email={{user_email}}">{{ i }}</a></li>
          {% else %}
              <li><a href="?page={{ i }}">{{ i }}</a></li>
          {% endif %}
      {% endif %}
    {% endfor %}
    {% if invs_charge.has_next %}
      {% if user_email %}
        <li><a href="?page={{ invs_charge.next_page_number }}&user_email={{user_email}}">&raquo;</a></li>
      {% else %}
        <li><a href="?page={{ invs_charge.next_page_number }}">&raquo;</a></li>
      {% endif %}
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
  </ul>
{% endif %}
        </div>
</div>
{% endblock %}