{% extends 'menu/menu.html' %}
{% load static %}

{% block title %}Tu QR de Asociación{% endblock %}

{% block body %}
<div class="container d-flex flex-column align-items-center justify-content-start pt-2 pb-5">
  <h1 class="fw-bold text-center mb-4" style="font-size: clamp(1.5rem, 6vw, 2rem);">
    📌 Tu Código QR para Asociación
  </h1>

  <!-- QR embebido -->
  <img
    src="data:image/png;base64,{{ qr_b64 }}"
    alt="QR de Asociación"
    class="img-fluid"
    style="max-width: 300px; width: 100%; height: auto;"
  >

  <!-- Botones -->
  <div class="d-grid gap-2 mt-4" style="max-width: 300px; width: 100%;">
    <!-- Descargar -->
    <a
      href="data:image/png;base64,{{ qr_b64 }}"
      download="{{ download_name }}"
      class="btn btn-primary btn-lg"
    >
      📥 Descargar QR
    </a>

    <!-- Compartir por WhatsApp -->
    <a
      href="{{ whatsapp_url }}"
      target="_blank"
      class="btn btn-success btn-lg"
      style="background-color: #25D366; border: none;"
    >
      📲 Compartir por WhatsApp
    </a>
  </div>
</div>
{% endblock %}