haikal/templates/plans/plan_table.html
2025-09-24 11:07:31 +03:00

146 lines
9.4 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 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 ">
<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 position-sticky start-0 border-end border-200"></th>
<th colspan="{{ plan_list|length }}" class="text-center py-3">
<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 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-phoenix-primary px-3">{% trans "Change" %}</a>
{% endif %}
</td>
{% endfor %}
</tr>
{% endif %}
<tr>
<th class="ps-4 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-body {% 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="icon-saudi_riyal"></span></span>
{% if plan_pricing.plan == userplan.plan or userplan.is_expired or userplan.plan.is_free %}
<a href="{% url 'pricing_page' request.dealer.slug %}"
class="btn btn-sm btn-phoenix-success">{% trans "Buy" %}</a>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
{% else %}
<div class="p-3 rounded-2">
<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 <span class="icon-saudi_riyal"></span></span>
{% if plan != userplan.plan or userplan.is_expired %}
<a href="{% url 'create_order_plan_change' pk=plan.id %}"
class="btn btn-sm btn-phoenix-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>