{% extends "base.html" %}
{% load static %}
{% block content %}
{% if messages %}
    {% for msg in messages %}
        {% if 'success' in msg.tags %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ msg }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% elif 'error' in msg.tags %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ msg }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
    {% endfor %}
{% endif %}

<section class="h-100 gradient-custom">
    <div class="container py-5">
      <div class="row d-flex justify-content-center my-4">
        <div class="col-md-8">
          <div class="card mb-4">
            <div class="card-body">
              <!-- Single item -->
              <div class="row mt-4">
                <div class="col-lg-3 col-md-12 mb-4 mb-lg-0">
                  <!-- Image -->
                  <div class="bg-image hover-overlay hover-zoom ripple rounded" data-mdb-ripple-color="light">
                    
                      <img src="{% static 'img/membership-card.png' %}" class="w-100" style="" alt="form">
                  </div>
                  <!-- Image -->
                </div>
  
                <div class="col-lg-5 col-md-6 mb-4 mb-lg-0">
                  <!-- Data -->
                  <p><strong>Carte de membre</strong></p>
                  
                  <!-- Data -->
                </div>
  
                
              </div>
              <!-- Single item -->
  
            </div>
          </div>
          <div class="card mb-4 ">
            <div class="card-body mt-3">
              <p><strong>Date limite de validité</strong></p>
              <p class="mb-0">31 Décembre {% now "Y" %}</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card mb-4">
           
            <div class="card-body mt-3">
              <button class="btn btn-warning w-100 p-2" id="submitBtn">Procéder au paiement</button>
              <a href="{% url "create_checkout_session" %}">pay</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

{% endblock content %}
{% block js %}
<script src="https://js.stripe.com/v3/"></script> 
{% comment %} <script src="{% static 'js/stripe.js' %}"/> {% endcomment %}
{% endblock js%}