{% extends 'base.html' %}
{% load i18n %}

{% block body %}

    <!-- Account Details Section -->
    <div class="row my-3">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Your Account" %}</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-0">
                        <div class="col-sm-2">{% trans "Account" %}:</div>
                        <div class="col-sm-10">{{ user.dealer.get_local_name }}</div>

                        <div class="col-sm-2">{% trans "State" %}:</div>
                        <div class="col-sm-10">
                            {% if userplan.active %}
                                <span class="badge badge-phoenix badge-phoenix-success">{% trans "Active" %}</span>
                            {% else %}
                                <span class="badge badge-phoenix badge-phoenix-danger">{% trans "Expired" %}</span>
                            {% endif %}
                        </div>

                        <div class="col-sm-2">{% trans "Expire" %}:</div>
                        <div class="col-sm-10">{{ userplan.expire }}</div>

                        <div class="col-sm-2">{% trans "Plan" %}:</div>
                        <div class="col-sm-10">
                            {{ userplan.plan }}
                            <a href="{% url 'upgrade_plan' %}" class="btn btn-sm btn-phoenix-primary ml-2">{% trans "Upgrade" %}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Plan Details Section -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Plan Details" %}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            {% include "plans/plan_table.html" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}