<div class="flex-column bottom-margin-medium menu-content box-shadow-dark background-light-gray rounded-large padding-medium">

  <div class="profile-card">
    <div class="img-perfil box-shadow-icon bottom-margin-x-small">
      {% if customer_info.picture %}
        <img src={{customer_info.picture}} class="img-profile text-x-small" alt="Imagem do perfil do cliente">
        <i class="fa-solid fa-user fa-2xl user-icon text-dark-opacity" style="transform: scale(1.6); display: none"></i>
      {% else %}
        <i class="fa-solid fa-user fa-2xl user-icon text-dark-opacity" style="transform: scale(1.6);"></i>
        <img class="img-pic text-x-small" alt="Imagem do perfil do cliente">   
      {% endif %}
      <div class="pen-icon box-shadow-icon open-close-modal">
        <i class="fa-sharp fa-solid fa-pen text-dark-opacity"></i>
      </div>  
    </div>
    <div class="profile-description vertical-margin-small">
        <span class="text-bold text-dark-opacity text-medium">Olá {{ customer_info.firstname }}, seja bem vindo!</span>
        <span class="text-x-small text-dark-opacity top-margin-x-small">{{profile_description}}</span>
    </div>
  </div>

  <div class="config-picture">
   <label class="flex mini-card rounded-large rounded-large box-shadow-light vertical-margin-small text-medium vertical-padding-medium content-center btn-picture">
      <i class="fas fa-plus right-margin-medium text-dark-opacity"></i>
      <span class="text-bold text-small text-dark-opacity">{{ text_change_picture }}</span>
      <input id="profile-picture" type="file" accept="image/png, image/jpeg" name="profile-picture"></input>
   </label>
    <div class="flex mini-card rounded-large box-shadow-light vertical-margin-small text-medium vertical-padding-medium content-center btn-picture delete-picture">
      <i class="fas fa-trash right-margin-medium text-dark-opacity"></i>  
      <span class="text-bold text-small text-dark-opacity">{{ text_delete_picture }}</span>    
    </div>
  </div>

   <div class="finish-picture rounded-large">
    <span class="text-small text-dark-opacity text-center bottom-padding-medium">{{text_cancel_description}}</span>
    <div class="flex finish-mini-card rounded-large">
      <div class="flex mini-card rounded-large box-shadow-light vertical-margin-small text-medium vertical-padding-small content-center btn-picture save-picture">
        <div class="check-floppy-icon right-margin-medium">
          <i class="fas fa-check right-margin-medium" style="color: #0B6520;"></i>
          <i class="fa-regular fa-floppy-disk right-margin-medium" style="color: #0B6520;"></i> 
        </div>
        <span class="text-x-small text-dark-opacity">{{text_save}}</span>
      </div>
      <div class="flex mini-card rounded-large box-shadow-light vertical-margin-small text-medium vertical-padding-small content-center btn-picture open-close-modal cancel-picture">
        <i class="fas fa-xmark right-margin-medium" style="color: #721c24"></i>  
        <span class="text-x-small text-dark-opacity"> {{text_cancel}}</span>    
      </div>
    </div>
  </div>

  <div class="flex mini-card rounded-large box-shadow-light" data="account/account">
      <a href="{{ account }}" class="text-medium vertical-padding-small flex content-center js-account">
        <i class="fas fa-user right-margin-medium text-dark-opacity"></i>
         <div class="flex-column">
          <span class="text-bold text-small text-dark-opacity">{{ text_account }}</span>
          <span class="text-x-small description text-dark-opacity">{{ text_account_description }}</span>
         </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a>
  </div>

  <div class="flex mini-card rounded-large box-shadow-light" data="address">
    <a href="{{ address }}" class="text-medium vertical-padding-small flex content-center">
      <i class="fas fa-map-marker-alt right-margin-medium text-dark-opacity"></i>
       <div class="flex-column">
        <span class="text-bold text-small text-dark-opacity">{{ text_address }}</span>
        <span class="text-x-small description text-dark-opacity">{{ text_address_description }}</span>
       </div>
      <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
    </a>
  </div>

   <div class="flex mini-card rounded-large box-shadow-light" data="order">
    <a href="{{ order }}" class="text-medium vertical-padding-small flex content-center">
      <i class="fas fa-sticky-note right-margin-medium text-dark-opacity"></i>
       <div class="flex-column">
        <span class="text-bold text-small text-dark-opacity">{{ text_order }}</span>
        <span class="text-x-small description text-dark-opacity">{{ text_order_description }}</span>
       </div>
      <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
    </a>
  </div>

  {% if config.fidelity_status %}
    <div class="flex mini-card rounded-large box-shadow-light box-shadow-light" data="extractlist">
      <a href="{{ link_extract }}" class="text-medium vertical-padding-small flex content-center">
        <i class="fas fa-receipt right-margin-medium text-dark-opacity"></i>
        <div class="flex-column">
          <span class="text-bold text-small text-dark-opacity">{{ text_stitch_extract }}</span>
          <span class="text-x-small description text-dark-opacity">{{ text_stitch_extract_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a>
    </div>
  {% endif %}

  {% if store_rating_module_status %}
    <div class="flex mini-card rounded-large box-shadow-light" data="store_rating">
      <a href="{{ store_rating_url }}" class="text-medium vertical-padding-small flex content-center">
        <i class="fas fa-star right-margin-medium text-dark-opacity"></i>
        <div class="flex-column"> 
          <span class="text-bold text-small text-dark-opacity">{{ text_store_rating }}</span>
          <span class="text-x-small description text-dark-opacity">{{ text_store_rating_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a> 
    </div>
  {% endif %}

  <div class="flex mini-card rounded-large box-shadow-light" data="return">
    <a href="{{ return }}" class="text-medium vertical-padding-small flex content-center">
      <i class="fas fa-box right-margin-medium text-dark-opacity"></i>
       <div class="flex-column">
        <span class="text-bold text-small text-dark-opacity">{{ text_return }}</span>
        <span class="text-x-small description text-dark-opacity">{{ text_return_description }}</span>
       </div>
      <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
    </a>
  </div>

  {% if futura_habilita_lista_desejos %}
    <div class="flex mini-card rounded-large box-shadow-light" data="wishlist">
      <a href="{{ wishlist }}" class="text-medium vertical-padding-small flex content-center">
        <i class="fas fa-heart right-margin-medium text-dark-opacity"></i>
        <div class="flex-column">
         <span class="text-bold text-small text-dark-opacity">{{ text_wishlist }}</span>
         <span class="text-x-small description text-dark-opacity">{{ text_wishlist_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a>
    </div>
  {% endif %}

  {% if listapresente_status %}
    <div class="flex mini-card rounded-large box-shadow-light" data="listapresente">
      <a href="{{ listapresente }}" class="text-medium vertical-padding-small flex content-center">
        <i class="fas fa-gift right-margin-medium text-dark-opacity"></i>
        <div class="flex-column"> 
          <span class="text-bold text-small text-dark-opacity">{{ text_lista_presente }}</span>
          <span class="text-x-small description text-dark-opacity">{{ text_lista_presente_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a>
    </div>
  {% endif %}

  {% if fidelity_indication_status %}
    <div class="flex mini-card rounded-large box-shadow-light" data="indication">
      <a href="{{ fidelity_indication_link }}" class="text-medium vertical-padding-small flex content-center">
        <i class="fas fa-comments-dollar right-margin-medium text-dark-opacity"></i>
        <div class="flex-column">
          <span class="text-bold text-small text-dark-opacity">{{ text_indication }}</span>
          <span class="text-x-small description text-dark-opacity">{{ text_indication_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a>
    </div>
  {% endif %}

  {% if customer_interests_remember %}
    <div class="flex mini-card rounded-large box-shadow-light" data="interests">
      <a href="{{ interests }}" class="text-medium vertical-padding-small flex content-center">
        <i class="fas fa-tag right-margin-medium text-dark-opacity"></i>  
         <div class="flex-column">
          <span class="text-bold text-small text-dark-opacity">{{ text_interests }}</span>
          <span class="text-x-small description text-dark-opacity">{{ text_interests_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a>
    </div>
  {% endif %}

    <div class="flex mini-card rounded-large box-shadow-light">
      <a href="{{ logout }}" class="text-medium vertical-padding-medium content-center">
        <i class="fas fa-sign-out-alt right-margin-medium text-dark-opacity"></i>
        <span class="text-bold text-small text-dark-opacity">{{ text_logout }}</span>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon text-dark-opacity"></i>
      </a>
  </div> 
</div>
