@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" role="document">
    
    <div class="modal-content" v-if="produto_default">
            
      <div class="modal-body mt-2">
        <div class="row">
          
          <div class="col-lg">
            <div class="bg-image">
              <img :src="imagem" class="img-fluid" :alt="produto_default.name">
            </div>
          </div>
          
          <div class="col-lg">
            <h3 class="font-weight-bold primary-text">{{ produto_default.name }}</h3>
            
            <h5 class="font-weight-bolder font-nunito text-dark">Detalhes do produto:</h5>
            <h5 class="font-weight-normal font-nunito fosco-text" v-html="produto_default.description"></h5>
            
            <div class="mt-4" v-if="!produtos_variaveis.length > 0">
              <h3 class="font-weight-bolder font-nunito primary-text">
                por: <strong>{{ produto_default.price.preco_formated }}</strong>
              </h3>
              
              <div class="row align-items-center" v-if="produto_default.quantity.min != 0">
                <div class="col-auto">
                  <h5 class="font-weight-bolder font-nunito mb-0">quantidade</h5>
                </div>
                <div class="form-outline border rounded col-auto">
                  <input type="number" :min="produto_default.quantity.min" :max="produto_default.quantity.max" 
                  v-model="produto_default.quantity.value" id="qty" class="form-control"/>     
                </div>
              </div>
              
              <div v-else>
                <h5 class="text-danger font-weight-bolder font-montserrat">
                  Produto indisponível <i class="fas fa-times ml-1"></i>
                </h5>
              </div>
            </div>
            
            <div class="mt-4" v-else>
              <h5 class="font-weight-bolder fosco-text">Selecione um tamanho:</h5>
              <select class="browser-default custom-select variables-pdt" v-model="array_produtos">                
                <option v-for="variavel in produtos_variaveis" :key="variavel.id" :value="[variavel]">
                  {{ variavel.attribute_name }}
                </option>
              </select>
              
              <div class="mt-4" v-if="array_produtos.length > 0">
                <h3 class="font-weight-bolder font-nunito primary-text">
                  por: <strong>{{ array_produtos[0].price.preco_formated }}</strong>
                </h3>
                
                <div class="row align-items-center mt-4" v-if="array_produtos[0].quantity.min != 0">
                  <div class="col-auto">
                    <h5 class="font-weight-bolder font-nunito mb-0">quantidade</h5>
                  </div>
                  <div class="form-outline border rounded col-auto">
                    <input type="number" :min="array_produtos[0].quantity.min" :max="array_produtos[0].quantity.max" 
                    v-model="array_produtos[0].quantity.value" id="qty" class="form-control"/>     
                  </div>
                </div>
                
                <div v-else>
                  <h5 class="text-danger font-weight-bolder font-montserrat">
                    Produto indisponível <i class="fas fa-times ml-1"></i>
                  </h5>
                </div>
              </div>
              
            </div>
            
          </div>         
        </div>
      </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 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 v-if="auth" 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>
        
        <a href="/autentica/login-completo" v-else class="btn btn-green btn-sm-block btn-lg font-weight-bold mt-2">
          Faça login para adicionar o produto
        </a>
        
      </div>
      
    </div>
    
  </div>
  
</div>

@endverbatim