Editar Perfil

<link rel="stylesheet" href="{{ 'component-inputs.css' | asset_url }}" media="print" onload="this.media='all'">
{{ 'customer.css' | asset_url | stylesheet_tag }}

<div class="top-spacing-normal">
  <div class="{{ settings.page_width_main }}">
    <div class="grid justify-content-center text-center heading--mb">
      <div class="col-6 col-st-12">
        <h1 class="mt0 mb0">Mi Perfil</h1>
      </div>
    </div>
    <div class="grid justify-content-center text-center">
      <div class="col-sp-12 col-st-8 col-4">
        
        {% if customer %}
          <form action="{{ routes.account_url }}" method="post">
            <input type="hidden" name="form_type" value="customer">
            <input type="hidden" name="utf8" value="✓">
            
            <!-- Información personal -->
            <div class="field">
              <label>Nombre:</label>
              <p>{{ customer.first_name }} {{ customer.last_name }}</p>
            </div>
            
            <div class="field">
              <label>Email:</label>
              <p>{{ customer.email }}</p>
            </div>
            
            <!-- Campo Mi Mascota -->
            <div class="field">
              <label for="metafield_namemascota">Nombre de tu mascota:</label>
              <input type="text" 
                     id="metafield_namemascota" 
                     name="customer[metafields][custom][namemascota]" 
                     value="{{ customer.metafields.custom.namemascota }}"
                     placeholder="Ej: Max"
                     style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            
            <button type="submit" class="btn" style="background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">Guardar cambios</button>
          </form>
        {% else %}
          <p>Debes iniciar sesión para ver esta página.</p>
          <a href="{{ routes.account_login_url }}">Iniciar sesión</a>
        {% endif %}
        
      </div>
    </div>
  </div>
</div>