144 lines
8.9 KiB
HTML
144 lines
8.9 KiB
HTML
{% load i18n %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-compare mb-0">
|
|
<thead>
|
|
<tr class="border-bottom border-200">
|
|
<th style="width: 30%; min-width: 280px;" class="ps-4 bg-white position-sticky start-0 border-end border-200"></th>
|
|
{% for plan in plan_list %}
|
|
<th class="text-center py-3 {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}" style="width: calc(70%/{{ plan_list|length }});">
|
|
<div class="d-flex flex-column align-items-center">
|
|
{% if plan.url %}<a href="{{ plan.url }}" class="text-decoration-none text-dark">{% endif %}
|
|
<h6 class="mb-1 fw-bold">{{ plan.name }}</h6>
|
|
{% if plan == userplan.plan %}
|
|
<span class="badge bg-success bg-opacity-10 text-success mt-1">{% trans "Current Plan" %}</span>
|
|
{% endif %}
|
|
{% if plan.url %}</a>{% endif %}
|
|
</div>
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for quota_row in plan_table %}
|
|
<tr class="border-bottom border-200 {% cycle 'bg-white' 'bg-light' %}">
|
|
<th class="ps-4 fw-normal position-sticky start-0 bg-inherit border-end border-200">
|
|
<div class="d-flex flex-column py-2">
|
|
{% if quota_row.0.url %}<a href="{{ quota_row.0.url }}" class="text-decoration-none text-dark">{% endif %}
|
|
<span class="fw-semibold">{{ quota_row.0.name }}</span>
|
|
<small class="text-muted">{{ quota_row.0.description }}</small>
|
|
{% if quota_row.0.url %}</a>{% endif %}
|
|
</div>
|
|
</th>
|
|
{% for plan_quota in quota_row.1 %}
|
|
<td class="text-center py-2 align-middle {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
|
|
{% if plan_quota != None %}
|
|
{% if quota_row.0.is_boolean %}
|
|
{% if plan_quota.value %}
|
|
<i class="fas fa-check-circle text-success fs-6"></i>
|
|
{% else %}
|
|
<i class="fas fa-times-circle text-danger fs-6"></i>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="d-block">
|
|
{% if plan_quota.value == None %}
|
|
<span class="badge bg-info bg-opacity-10 text-info">{% trans 'No Limit' %}</span>
|
|
{% else %}
|
|
<span class="fw-semibold">{{ plan_quota.value }}</span>
|
|
{% if quota_row.0.unit %}
|
|
<span class="text-muted small">{{ quota_row.0.unit }}</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr class="border-bottom border-200">
|
|
<th class="ps-4 bg-white position-sticky start-0 border-end border-200"></th>
|
|
<th colspan="{{ plan_list|length }}" class="text-center py-3 bg-light">
|
|
<h6 class="mb-0 fw-bold">{% trans 'Pricing' %}</h6>
|
|
</th>
|
|
</tr>
|
|
|
|
{% if user.is_authenticated %}
|
|
<tr class="border-bottom border-200">
|
|
<th class="ps-4 bg-white position-sticky start-0 border-end border-200"></th>
|
|
{% for plan in plan_list %}
|
|
<td class="text-center py-3 {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
|
|
{% if plan != userplan.plan and not userplan.is_expired and not userplan.plan.is_free %}
|
|
<a href="{% url 'create_order_plan_change' pk=plan.id %}" class="btn btn-sm btn-outline-primary px-3">
|
|
{% trans "Change" %}
|
|
</a>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endif %}
|
|
|
|
<tr>
|
|
<th class="ps-4 bg-white position-sticky start-0 border-end border-200"></th>
|
|
{% for plan in plan_list %}
|
|
<td class="p-3 {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
|
|
{% if plan.available %}
|
|
<div class="d-flex flex-column gap-2">
|
|
{% if not plan.is_free %}
|
|
{% for plan_pricing in plan.planpricing_set.all %}
|
|
{% if plan_pricing.visible %}
|
|
<div class="p-3 rounded-2 {% if plan_pricing.plan == userplan.plan %}bg-success-soft{% else %}bg-light{% endif %}">
|
|
{% if plan_pricing.pricing.url %}<a href="{{ plan_pricing.pricing.url }}" class="text-decoration-none text-dark">{% endif %}
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="fw-semibold">{{ plan_pricing.pricing.name }}</span>
|
|
<span class="badge bg-secondary bg-opacity-10 text-secondary fs-10">{{ plan_pricing.pricing.period }} {% trans "days" %}</span>
|
|
</div>
|
|
{% if plan_pricing.pricing.url %}</a>{% endif %}
|
|
<div class="d-flex justify-content-between align-items-end mt-2">
|
|
<span class="fs-5 fw-bold">{{ plan_pricing.price }} <span class="currency">{{ CURRENCY }}</span></span>
|
|
{% if plan_pricing.plan == userplan.plan or userplan.is_expired or userplan.plan.is_free %}
|
|
<a href="{% url 'pricing_page' %}" class="btn btn-sm btn-success">
|
|
{% trans "Buy" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="p-3 rounded-2 bg-light">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="fw-semibold">{% trans "Free" %}</span>
|
|
<span class="badge bg-secondary bg-opacity-10 text-secondary fs-10">{% trans "no expiry" %}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-end mt-2">
|
|
<span class="fs-5 fw-bold">0 {{ CURRENCY }}</span>
|
|
{% if plan != userplan.plan or userplan.is_expired %}
|
|
<a href="{% url 'create_order_plan_change' pk=plan.id %}" class="btn btn-sm btn-outline-primary">
|
|
{% if userplan.is_expired %}
|
|
{% trans "Select" %}
|
|
{% else %}
|
|
{% trans "Change" %}
|
|
{% endif %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-warning bg-warning-soft border-0 small mb-0">
|
|
{% url 'upgrade_plan' as upgrade_url %}
|
|
{% blocktrans %}
|
|
<p class="mb-1">This plan is no longer available.</p>
|
|
<a href="{{ upgrade_url }}" class="fw-bold text-warning">Upgrade to current plans →</a>
|
|
{% endblocktrans %}
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div> |