%stash css=>["/proc/spay/storep.css"];
%stash js => ["/proc/spay/stripe.js"];
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript"> var cu=<%= $precio %>; var tid=<%= $tid %></script>
<section class="ibottom">
  <p class="nombre"><%= $nombre %></p> 
  <p class="tit"><%= $municipio %>,  <%= $federativa %></p> 
</section>

<section class="item flex"> 
  <div id="cover" hidden></div>
 
  <article class=iimage> 
    <p class="txt"><%= $subnombre %></p> 
    <img class="small" src= "/proc/spay/img/<%= $cimga %>"> 
    <p class="txt"><%= $descripcion %></p> 
  </article>
  
  <article class=iinfo>
    <p class="fecha"><%= $fecha %></p> 
    <p class="promo"><%= $promo %></p> 
    <p class="existencia">
    <% if    ($cupo > 10) { =%> <p class="eok"></p>  <% } =%>
    <% elsif ($cupo >= 5) {  =%> <p class="elow">¡Nos quedan pocos!</p>  <% } =%>
    <% elsif ($cupo == 0) { =%> <p class="eldep">¡Agotado!</p> <% } =%> 

    <form onSubmit="return false" id="cform">
      
      <p class="precio">Costo por asistente: $<span id='cu'></span> pesos</p> 
      <ul class="form-style-1">
        <li>
          <label>Numero de asistentes</label>
          <input type="number" min=1 max=10 name="mq" class="field-mini" value=1  /> 
        </li>
        <li>
          <label>Nombre Completo <span class="required">*</span></label>
          <input type="text" id="mname"  name="mname" class="field-long" placeholder="Nombre" /> 
        </li>
        <li>
          <label>Email <span class="required">*</span></label>
          <input id="mmail" type="Correo" name="mmail" class="field-long" />
        </li>
        <li>
          <label>Talla de ropa</span></label>
           <input id="r1" type="radio" name="talla" value="CH" >CH
           <input id="r2" type="radio" name="talla" value="M" checked>M
           <input id="r3" type="radio" name="talla" value="G">G  
        </li>
        <li>
          <label>Observaciones</label>
          <textarea name="obs" id="obs" class="field-long field-textarea" placeholder=""></textarea>
        </li>
        <li>
          <p class="total">Total = $ <span id='gt' ></span> pesos </p>
        </li>
        <li>
          <input id='cinfob' type="submit" value="Atras" hidden />
          <input id='cinfo' type="submit" value="Siguiente" />
        </li>
      </ul>
    </form>

    <div id="ccard" class="cardinfo" hidden=true>
      <p class="card">Datos de la tarjeta</p>
      <ul class="form-style-1" id="details">
        <li>
          <label>Nombre del titular </label>
          <input id="cardholder-name" type="text" placeholder="Cardholder name">
        </li>
        <!-- placeholder for Elements -->
        <li>
          <label>Numero de tarjeta </label>
          <div id="card-element"></div>
        </li>
        <li>
          <button class="fbutton"  id="card-button">Siguiente</button>
        </li>
      </ul> 
    </div>

    <div id="cplan" class="plan" hidden>
      <p class="plan">Planes de pago</p>
      <div id="plans" >
        <form id="installment-plan-form" >
          <label>
            <input id="immediate-plan" type="radio" name="installment_plan" value="-1" />
            Un solo pago
          </label>
          <input id="payment-intent-id" type="hidden" />
        </form>
        <button class="fbutton" id="confirm-button">Confirmar Pago</button>
      </div>
    </div>

    <div id="cmsg" class="message" hidden>
      <div id="result">
        <p id="status-message"></p>
      </div>
    </div>

  </article>
</section> 
<section class="bdat"> </section>