<div class="flex-column bottom-margin-medium menu-content">

  <div class="profile-card bottom-padding-medium">
  <div class="img-perfil">
    {% if customer_info.picture %}
      <img src={{customer_info.picture}} name="img_profile" class="img-profile">
    {% else %}
      <i class="fa-solid fa-user fa-2xl user-icon" style="color: #000; transform: scale(1.6);"></i>
       <img class="img-pic" name="img_profile">   
    {% endif %}
    <label class="pen-icon">
      <i class="fa-sharp fa-solid fa-pen" style="color: #000;"></i>
      <input id="profile-picture" type="file" name="profile-picture"></input>
    </label>  
  </div>
    <div class="profile-description">
      <span class="text-bold text-dark text-medium">Olá {{ customer_info.firstname }}, seja bem vindo!</span>
      <span class="text-x-small text-dark">{{profile_description}}</span>
    </div>
  </div>

  {# <div class="config-picture">
   <label class="flex mini-card vertical-margin-small text-medium vertical-padding-medium content-center btn-picture">
        <i class="fas fa-plus right-margin-medium" style="color: #000"></i>
          <span class="text-bold text-small text-dark">{{ text_change_picture }}</span>
         <input id="profile-picture" type="file" name="profile-picture"></input>
    </label>

    <div class="flex mini-card vertical-margin-small text-medium vertical-padding-medium content-center btn-picture">
        <i class="fas fa-trash right-margin-medium" style="color: #000"></i>  
          <span class="text-bold text-small text-dark">{{ text_delete_picture }}</span>    
    </div>
  </div> #}

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

  {% if store_rating_module_status %}
    <div class="flex mini-card" 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" style="color: #000"></i>
        <div class="flex-column">
          <span class="text-bold text-small text-dark">{{ text_store_rating }}</span>
          <span class="text-x-small description text-dark">{{ text_store_rating_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon" style="color: #000"></i>
      </a>
    </div>
  {% endif %}

  <div class="flex mini-card" data="order">
    <a href="{{ order }}" class="text-medium vertical-padding-small flex content-center">
      <i class="fas fa-sticky-note right-margin-medium" style="color: #000"></i>
       <div class="flex-column">
        <span class="text-bold text-small text-dark">{{ text_order }}</span>
        <span class="text-x-small description text-dark">{{ text_order_description }}</span>
       </div>
      <i class="fa-solid fa-chevron-right fa-lg chevron-icon" style="color: #000"></i>
    </a>
  </div>

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

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

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

  {% if fidelity_indication_status %}
    <div class="flex mini-card" 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" style="color: #000"></i>
        <div class="flex-column">
          <span class="text-bold text-small text-dark">{{ text_indication }}</span>
          <span class="text-x-small description text-dark">{{ text_indication_description }}</span>
        </div>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon" style="color: #000"></i>
      </a>
    </div>
  {% endif %}

  <div class="top-margin-small">
    <div class="flex mini-card" data="account/account">
      <a href="{{ account }}" class="text-medium vertical-padding-medium flex content-center js-account">
        <i class="fas fa-comments-dollar right-margin-medium" style="color: #000"></i>
          <span class="text-bold text-small text-dark">{{ text_account }}</span>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon" style="color: #000"></i>
      </a>
    </div>

    <div class="flex mini-card" data="address">
      <a href="{{ address }}" class="text-medium vertical-padding-medium content-center">
        <i class="fas fa-map-marker-alt right-margin-medium" style="color: #000"></i>
        <span class="text-bold text-small text-dark">{{ text_address }}</span>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon" style="color: #000"></i>
      </a>
    </div>

    {% if customer_interests_remember %}
      <div class="flex mini-card" data="interests">
        <a href="{{ interests }}" class="text-medium vertical-padding-medium content-center">
          <i class="fas fa-tag right-margin-medium" style="color: #000"></i>
          <span class="text-bold text-small text-dark">{{ text_interests }}</span>
          <i class="fa-solid fa-chevron-right fa-lg chevron-icon" style="color: #000"></i>
        </a>
      </div>
    {% endif %}

    <div class="flex mini-card">
      <a href="{{ logout }}" class="text-medium vertical-padding-medium content-center">
        <i class="fas fa-sign-out-alt right-margin-medium" style="color: #000"></i>
        <span class="text-bold text-small text-dark">{{ text_logout }}</span>
        <i class="fa-solid fa-chevron-right fa-lg chevron-icon" style="color: #000"></i>
      </a>
    </div>
  </div> 
</div>
