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

{% block title %}Teste de Planos - Allure{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="text-center mb-5">
        <h1 class="display-4">Teste de Planos</h1>
        <p class="lead">Verificando se os planos estão sendo carregados corretamente</p>
    </div>

    <div class="row">
        <div class="col-12">
            <h3>Planos Disponíveis:</h3>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Tipo</th>
                            <th>Duração</th>
                            <th>Preço</th>
                            <th>Preço Mensal</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for plano in planos %}
                        <tr>
                            <td>{{ plano.nome }}</td>
                            <td>{{ plano.get_tipo_display }}</td>
                            <td>{{ plano.duracao_dias }} dias</td>
                            <td>R$ {{ plano.preco }}</td>
                            <td>R$ {{ plano.get_preco_mensal|floatformat:2 }}</td>
                            <td>
                                {% if plano.ativo %}
                                    <span class="badge bg-success">Ativo</span>
                                {% else %}
                                    <span class="badge bg-danger">Inativo</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center">Nenhum plano encontrado</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{% url 'payments:selecionar_plano' %}" class="btn btn-primary btn-lg">
                <i class="fas fa-crown me-2"></i>Ver Página de Planos
            </a>
        </div>
    </div>
</div>
{% endblock %}