{% load i18n%}
<div class="table-responsive mt-4">
    <table class="plan_table table border-top border-translucent fs-9 mb-4">
        <thead class="">
            <tr>
                <th scope="col"></th>
                {% for plan in plan_list %}
                    <th scope="col" class="plan_header text-center {% if forloop.counter0 == current_userplan_index %}current bg-body-highlight{% endif %}">
                        {% if plan.url %}<a href="{{ plan.url }}" class="info_link plan text-decoration-none">{% endif %}
                        <span class="plan_name font-weight-bold">{{ plan.name }}</span>
                        {% if plan == userplan.plan %}
                            <span class="current current_plan badge badge-phoenix badge-phoenix-success">{% trans "Current Plan" %}</span>
                        {% endif %}
                        {% if plan.url %}</a>{% endif %}
                    </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for quota_row in plan_table %}
                <tr class="quota_row">
                    <th scope="row" class="quota_header align-middle">
                        {% if quota_row.0.url %}<a href="{{ quota_row.0.url }}" class="info_link quota text-decoration-none">{% endif %}
                        <span class="quota_name fw-bold">{{ quota_row.0.name }}</span>
                        <small class="quota_description d-block text-muted">{{ quota_row.0.description }}</small>
                        {% if quota_row.0.url %}</a>{% endif %}
                    </th>
                    {% for plan_quota in quota_row.1 %}
                        <td class="align-middle text-center {% if forloop.counter0 == current_userplan_index %}current bg-body-highlight{% endif %}">
                            {% if plan_quota != None %}
                                {% if quota_row.0.is_boolean %}
                                    {% if plan_quota.value %}<i class="fas fa-check text-success"></i>{% else %}<i class="fas fa-times text-danger"></i>{% endif %}
                                {% else %}
                                    {% if plan_quota.value == None %}{% trans 'No Limit' %}{% else %}{{ plan_quota.value }} {{ quota_row.0.unit }}{% endif %}
                                {% endif %}
                            {% endif %}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
        <tfoot class="">
            <tr>
                <th scope="col"></th>
                <th colspan="{{ plan_list|length }}" class="text-center font-weight-bold py-3">{% trans 'Pricing' %}</th>
            </tr>
            {% if user.is_authenticated %}
                <tr>
                    <th scope="col"></th>
                    {% for plan in plan_list %}
                        <th class="planpricing_footer text-center fw-bold {% if forloop.counter0 == current_userplan_index %}current bg-body-highlight{% 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="change_plan btn btn-sm btn-outline-primary">{% trans "Change" %}</a>
                            {% endif %}
                        </th>
                    {% endfor %}
                </tr>
            {% endif %}
            <tr>
                <th scope="col"></th>
                {% for plan in plan_list %}
                    <th class="planpricing_footer text-center {% if forloop.counter0 == current_userplan_index %}current bg-body-highlight{% endif %}">
                        {% if plan.available %}
                            <ul class="list-unstyled">
                                {% if not plan.is_free %}
                                    {% for plan_pricing in plan.planpricing_set.all %}
                                        {% if plan_pricing.visible %}
                                            <li class="mb-2">
                                                {% if plan_pricing.pricing.url %}<a href="{{ plan_pricing.pricing.url }}" class="info_link pricing text-decoration-none">{% endif %}
                                                <span class="plan_pricing_name font-weight-bold">{{ plan_pricing.pricing.name }}</span>
                                                <small class="plan_pricing_period d-block text-muted">({{ plan_pricing.pricing.period }} {% trans "day" %})</small>
                                                {% if plan_pricing.pricing.url %}</a>{% endif %}
                                                <span class="plan_pricing_price d-block font-weight-bold">{{ plan_pricing.price }}&nbsp;{{ CURRENCY }}</span>
                                                {% if plan_pricing.plan == userplan.plan or userplan.is_expired or userplan.plan.is_free %}
                                                    <a href="{% url 'create_order_plan' pk=plan_pricing.pk %}" class="buy btn btn-sm btn-success">{% trans "Buy" %}</a>
                                                {% endif %}
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                {% else %}
                                    <li class="mb-2">
                                        <span class="plan_pricing_name font-weight-bold">{% trans "Free" %}</span>
                                        <small class="plan_pricing_period d-block text-muted">({% trans "no expiry" %})</small>
                                        <span class="plan_pricing_price d-block font-weight-bold">0&nbsp;{{ CURRENCY }}</span>
                                        {% if plan != userplan.plan or userplan.is_expired %}
                                            <a href="{% url 'create_order_plan_change' pk=plan.id %}" class="change_plan btn btn-sm btn-phoenix-primary">
                                                {% if userplan.is_expired %}
                                                    {% trans "Select" %}
                                                {% else %}
                                                    {% trans "Change" %}
                                                {% endif %}
                                            </a>
                                        {% endif %}
                                    </li>
                                {% endif %}
                            </ul>
                        {% else %}
                            <span class="plan_not_available text-muted">
                                {% url 'upgrade_plan' as upgrade_url %}
                                {% blocktrans %}
                                    This plan is not available anymore and cannot be extended.<br>
                                    You need to upgrade your account to any of <a href="{{ upgrade_url }}" class="text-primary">currently available plans</a>.
                                {% endblocktrans %}
                            </span>
                        {% endif %}
                    </th>
                {% endfor %}
            </tr>
        </tfoot>
    </table>
</div>