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

{% load static i18n compress %}

{% block title %} Instances {% endblock %}

{% block content %} 
<!-- Page Content -->
{% csrf_token %}
  <div class="row p-1 mt-4">
    <div class="col-lg-12 bg-white shadow-sm  border border-light rounded py-4 mb-4">
      <div class="row">
        <div class="col-6 col-sm-6">
          <h3 class="text-5 font-weight-400 d-flex align-items-center px-1 mb-4">{% trans "Instances"%}</h3>
        </div>
        <div class="col-6 col-sm-6">
          <div class="float-right">
            <a class="border border-primary rounded p-2" href="{% url 'nextcloud:payment' %}">{% trans "Request New Instance"%}</a>
          </div>
        </div>
      </div>
      <!-- Title
      =============================== -->
      <div class="transaction-title py-2 px-1">
        <div class="row">
          <div class="col-1 col-sm-1 text-center"><span class="">{% trans "ID"%}</span></div>
          <div class="col-2 col-sm-2 text-center"><span class="">{% trans "Creation Date"%}</span></div>
          <div class="col-4 col-sm-4 text-center">{% trans "Domain"%}</div>
          <div class="col-2 col-sm-2 text-center"><span class="">{% trans "Order"%}</span></div>
          <div class="col-2 col-sm-2 text-center">{% trans "Termination Date"%}</div>
        </div>
      </div>
      <!-- Title End --> 
      
      <!-- Instances List
      =============================== -->
      <div class="transaction-list">
        {% for instance in object_list %}
            <div class="transaction-item px-1 py-4" data-id={{instance.id}}>
                <div class="row align-items-center flex-row">
                    <div class="col-1 col-sm-1 text-center"> <span class="d-block text-3 font-weight-400">#{{instance.id}}</span></div>
                    <div class="col-2 col-sm-2 text-center"> <span class="d-block text-2 font-weight-300">{{instance.creation_date|date:"Y-m-d"}}</span></div>
                    <div class="col-3 col-sm-4 text-center text-1"> <span>{{instance.domain}}</span> </div>
                    <div class="col-2 col-sm-2 text-center text-2"><span class="">#{{instance.order.id}}</span></div>
                    <div class="col-2 col-sm-2 text-center text-2"> <span class=" text-uppercase">{{order.termination_date|date:"Y-m-d"}}</span> </div>
                </div>
            </div>
        {%endfor%}
      </div>
      <!-- Instances List End --> 
    
    </div>
  </div>
{% endblock %} 

{% block js_extra %}
{% endblock %}