{% extends 'base.html' %}

{% load static %}

{% block title %} Ma carte membre{% endblock %}

{% block content %}
    <!-- Page Title -->
   
    {% if request.user.frais_carte %}
    <div class="custom-member-card">
        <div class="card">

        <!-- ID Card -->
        <iframe
            src=""
            frameborder="0"
            id="idcard-preview"
            title="Aperçu Carte Membre AAED"
            style="height:70vh;"
        ></iframe>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
            integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>

        <script src="{% static 'member_card/js/base64-uris.js' %}"></script>
        <!-- Member Card Main JS File -->
        <script src="{% static 'member_card/js/scripts.js' %}"></script>
        <script>
            fetch('/member/json/data/')
            .then((response) => response.json())
            .then((data) => {
                generateIdCard(data);
            });
        </script>
        </div>
    </div>

    <div class="d-flex justify-content-center">
        <button type="button" onclick="downloadIdCard()" class="btn btn-primary">Téléchager</button>
    </div>
    {% else %}
    <div style="height:70vh" class="d-flex justify-content-center align-items-center">
        <div>
            <h6 class="text-gray ">Vous n'avez pas encore payé votre carte de membre.</h6>
        </div>
        <div>
            
        </div>
    </div>
    {% endif %}
    

{% endblock %}