@verbatim

<div class="modal fade in" id="modal_produto" tabindex="-1" role="dialog">
  
  <div class="spinner-border modal-produto" v-if="loading" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  
  <div class="modal-dialog modal-dialog-centered modal-xs modal-sm" role="document">
    
    <div class="modal-content" v-if="produto_default">
      
      <div class="modal-header">              
        <h4 class="modal-title w-100">Adicionar ao carrinho</h4>
        
        <button type="button" class="close" v-on:click="fechar">
          <i class="fas fa-times fa-lg text-danger"></i>
        </button>             
      </div>
      
      <div class="modal-body">
        
        <div class="row third">
          
          <div class="col-lg-5 mb-3 pr-lg-0">
            
            <div class="rgba-stylish-strong mb-3 p-2">
              <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Produto</h4>
            </div>
            
            <div class="row">
              
              <div class="col-lg mb-3">
                <div class="view image-item">
                  <img :src="imagem" class="img-fluid img-var" :alt="produto_default.name">
                </div>
              </div>
              
              <div class="col-lg">
                <h5 class="font-weight-bolder fosco-text font-montserrat">
                  {{ produto_default.name }}
                </h5>
                
                <h4 v-if="!produto_default.quantity.max > 0" class="font-weight-bolder text-center font-montserrat text-danger mt-4">
                  Sem estoque no momento <i class="fas fa-times ml-1"></i>
                </h4>
              </div>
              
            </div>
            
          </div>
          
          <div class="col-lg pr-lg-0" v-if="!produtos_variaveis.length > 0">
            
            <div class="rgba-stylish-strong mb-3 p-2">
              <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Referência</h4> 
            </div>
            
            <h5 class="font-weight-bolder text-center fosco-text font-montserrat ref-var">
              {{ produto_default.reference }}
            </h5>
            
          </div>
          
          <div class="col-lg" v-if="!produtos_variaveis.length > 0">
            
            <div class="rgba-stylish-strong mb-3 p-2">
              <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Preço</h4>   
            </div>
            
            <h5 class="font-weight-bolder text-center fosco-text price-var font-montserrat">
              {{ produto_default.price.preco_formated }}
            </h5>
            
          </div>
          
          <!--Area somente dos produtos variaveis-->
          <div class="col-lg mb-3" v-if="produtos_variaveis.length > 0">
            
            <div class="d-md-block d-none">
              <div class="row">
                <div class="col-lg">
                  <div class="rgba-stylish-strong mb-3 p-2">
                    <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Referência</h4>  
                  </div>
                </div>
                
                <div class="col-lg pl-md-0">
                  <div class="rgba-stylish-strong mb-3 p-2">
                    <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Preço</h4>  
                  </div>
                </div>
                
                <div class="col-lg-4 pl-md-0">
                  <div class="rgba-stylish-strong mb-3 p-2">
                    <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Opções</h4>  
                  </div>
                </div>
                
                <div class="col-lg pl-md-0">
                  <div class="rgba-stylish-strong mb-3 p-2">
                    <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Quantidade</h4>  
                  </div>
                </div>
              </div>
            </div>            
            
            <div class="row py-1" v-for="variavel in produtos_variaveis">
              
              <div class="rgba-stylish-strong d-md-none d-block mb-3 p-2">
                <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Variação</h4>  
              </div>
              
              <div class="col-lg">
                <h5 class="font-weight-bolder text-left fosco-text font-montserrat">
                  <span class="d-md-none text-danger">Referencia:</span> {{ variavel.reference }}
                </h5>
              </div>         
              
              <div class="col-lg">
                <h5 class="font-weight-bolder text-md-center text-left fosco-text font-montserrat">
                  <span class="d-md-none text-danger">Preço:</span> {{ variavel.price.preco_formated }}
                </h5>
              </div>
              
              <div class="col-lg-4 col">
                <div class="pl-3">
                  <input type="checkbox" :value="variavel" v-model="array_produtos" :id="variavel.id" v-on:click="changeManyOptions(variavel.id)" class="form-check-input"/>
                  <label class="form-check-label ml-1" :for="variavel.id"> 
                    <h5 class="font-weight-bolder text-left fosco-text font-montserrat">
                      {{ variavel.attribute_name }}
                    </h5>  
                  </label>
                </div>
              </div>
              
              <div class="col-lg col-5">             
                <input type="number" :min="variavel.quantity.min" :max="variavel.quantity.max" :step="variavel.quantity.step"
                v-model="variavel.quantity.value" :disabled="variavel.disabled" v-on:input="verifyQuantity(variavel.id)"
                class="form-control form-control-sm float-right text-center">
              </div>         
              
            </div> 
                  
          </div>
          <!--Fim Area somente dos produtos variaveis-->
          
          <div class="col-lg text-center mb-3 pl-lg-0" v-if="!produtos_variaveis.length > 0">
            
            <div class="rgba-stylish-strong mb-3 p-2">
              <h4 class="font-weight-bolder font-nunito text-white text-center mb-0">Quantidade</h4>
            </div>
            
            <input type="number" :min="produto_default.quantity.min" :max="produto_default.quantity.max" v-model="produto_default.quantity.value"
            :step="produto_default.quantity.step"
            class="form-control qty-pdt mx-auto text-center w-50">    
          </div>
          
        </div> 
        
        <div class="row">
          
          <div class="col-lg-5">
            <div class="my-3 p-2">
              <h4 class="font-weight-bolder font-nunito fosco-text text-left mb-0">
                EAN: {{ produto_default.ean }}
              </h4>
            </div>
          </div>
          
          <div class="col-lg">
            <div class="d-lg-inline-flex my-3 p-2">
              <h4 class="font-weight-bolder font-nunito fosco-text text-left mb-0 mr-4">
                Caixa Interna: {{ produto_default.caixa_master}}          
              </h4>
              <h4 class="font-weight-bolder font-nunito fosco-text text-left mb-0">            
                Caixa Master: {{ produto_default.emb_pai }}
              </h4>
            </div>
          </div>
          
        </div>
        
        <div class="third pb-3">
          <div class="rgba-stylish-strong mb-3 p-2">
            <h4 class="font-weight-bolder font-nunito text-white text-left mb-0">Descrição:</h4>
          </div>
          
          <h5 class="font-weight-bolder text-left fosco-text ml-2" v-html="produto_default.description"></h5>
        </div>
        
        <div class="mt-3">
          <h4 class="font-weight-bolder font-montserrat text-right fosco-text mb-0 mr-5">
            Total: <span class="text-danger">{{ total }}</span>
          </h4>
        </div>
        
      </div>
      
      <div class="modal-footer border-top-0 pt-0">
        <div class="alert alert-warning font-weight-bolder w-100 my-2" v-if="show_info">{{ info }}</div>
        
        <button type="button" class="btn btn-outline-red btn-sm-block btn-lg font-weight-bold text-white" v-on:click="fechar">
          Voltar <i class="fas fa-undo fa-lg ml-1"></i>
        </button>
        
        <button type="button" class="btn btn-green btn-sm-block btn-lg font-weight-bold btn-submit mt-2" v-on:click="submit" :disabled="disabled">
          Adicionar ao carrinho <i class="fas fa-shopping-cart fa-lg ml-1"></i>
        </button>
        
      </div>
      
    </div>
    
  </div>
  
</div>

@endverbatim