{% extends "base.html" %}
{% block title %}Mi plan — GhostRace{% endblock %}
{% block content %}
<h2 class="section-title">Mi plan</h2>

<div class="info-row">
  <span class="k">Plan actual</span>
  <span class="v">{% if estado.meses_premium %}GhostPass Premium{% else %}GhostPass Free{% endif %}</span>
</div>
<div class="info-row">
  <span class="k">Meses premium acumulados</span>
  <span class="v" id="meses-premium">{{ estado.meses_premium }}</span>
</div>

<h3 class="section-title">Invita a un amigo</h3>
<p class="muted">Introduce el código de un amigo y gana 1 mes de GhostPass Premium gratis. Solo se puede canjear una vez por cuenta.</p>

{% if not estado.invitacion_canjeada %}
<form id="invitacion-form">
  <div class="field">
    <label>Código de amigo</label>
    <input type="text" name="codigo_amigo" id="codigo-amigo-input" placeholder="AMIGO-XXXX" required>
  </div>
  <button type="submit" class="btn">Canjear invitación</button>
</form>
{% else %}
<div class="status-line ok" style="display:block">Ya has canjeado tu invitación de bienvenida.</div>
{% endif %}
<div id="invitacion-status" class="status-line"></div>
{% endblock %}