{% 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>