<div class="np-hidden-mobile">
  <p>
    <span class="lang-en-US">{% t.description %}</span>
    <span class="lang-es">Añadir una foto añade un toque personal a tu perfil. Tu foto de perfil se utiliza como icono para tu cuenta para representarte. También se muestra en varios otros lugares junto a tu nombre.</span>
    <span class="lang-fr">Ajouter une photo ajoute un toucher personnel à votre profil. Votre photo de profil est utilisée comme icône pour votre compte pour vous représenter. Elle est également affichée dans divers autres endroits à côté de votre nom.</span>
    <span class="lang-de">Eine Fotobild fügt Ihrem Profil eine persönliche Note hinzu. Ihr Profilbild wird als Symbol für Ihr Konto verwendet, um Sie zu repräsentieren. Es wird auch in verschiedenen anderen Orten neben Ihrem Namen angezeigt.</span>
    <span class="lang-en-GB">Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name.</span>
    <span class="lang-nl">Een foto toevoegen maakt je profiel persoonlijker. Je profielfoto wordt gebruikt als icoon voor je account om je te representeren. Het wordt ook in verschillende andere plaatsen naast je naam getoond.</span>
    <span class="lang-pt-BR">Adicionar uma foto adiciona um toque pessoal ao seu perfil. Sua foto de perfil é usada como ícone para sua conta para representá-lo. Também é exibido em vários outros lugares ao lado do seu nome.</span>
  </p>
  <p>
    <span class="lang-en-US">{% t.requirements %}</span>
    <span class="lang-es">
      Para obtener los mejores resultados, el tamaño de tu foto de perfil debe ser de al menos 400x400 píxeles y un tamaño máximo de 2MB. El formato del archivo debe ser PNG, JPG o GIF.</span>
    <span class="lang-fr">Pour obtenir les meilleurs résultats, la taille de votre photo de profil doit être d'au moins 400x400 pixels, et une taille maximale de 2MB. Le format du fichier doit être PNG, JPG ou GIF.</span>
    <span class="lang-de">Für die besten Ergebnisse sollte die Größe Ihrer Profilbild 400x400 Pixel oder größer sein und eine maximale Größe von 2MB haben. Das Dateiformat sollte PNG, JPG oder GIF sein.</span>
    <span class="lang-en-GB">For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF.</span>
    <span class="lang-nl">Voor de beste resultaten moet de grootte van uw profielfoto minimaal 400x400 pixels zijn, en een maximale grootte van 2MB. Het bestandsformaat moet PNG, JPG of GIF zijn.</span>
    <span class="lang-pt-BR">Para obter os melhores resultados, o tamanho da sua foto de perfil deve ser de pelo menos 400x400 pixels e um tamanho máximo de 2MB. O formato do arquivo deve ser PNG, JPG ou GIF.</span>
  
  </p>
</div>

<img
  alt=""
  class="np-account-avatar-image"
  src="{{ form.gravatar_url }}?s=200"
  id="{{version}}_gravatar_img"
  {% unless form.use_gravatar? %}
  style="display: none"
  {% endunless %} />
<img
  alt=""
  class="np-account-avatar-image"
  src="{{ form.secure_custom_avatar_url }}"
  id="{{version}}_custom_avatar_img"
  {% if form.use_gravatar? %}
  style="display: none"
  {% endif %} />

<div class="np-account-avatar-choice">
  <div class="np-form-field">
    <label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
      <span class="radio__input">
        <input
          id="{{version}}_learner_use_gravatar_true"
          name="learner[use_gravatar]"
          type="radio"
          value="true"
          {% if form.use_gravatar? %}
          checked{% endif %} />
        <span class="np-button-color radio__control"></span>
      </span>
      <span class="radio__label">
        <span class="lang-en-US">{% t.use_gravatar %}</span>
        <span class="lang-es">Usar Gravatar™</span>
        <span class="lang-fr">Utiliser Gravatar™</span>
        <span class="lang-de">Gravatar verwenden™</span>
        <span class="lang-en-GB">Use Gravatar™</span>
        <span class="lang-nl">Gravatar gebruiken™</span>
        <span class="lang-pt-BR">Usar Gravatar™</span>
      </span>
    </label>
  </div>

  <div class="np-form-field">
    <label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
      <span class="radio__input">
        <input
          id="{{version}}_learner_use_gravatar_false"
          name="learner[use_gravatar]"
          type="radio"
          value="false"
          {% unless form.use_gravatar? %}
          checked{% endunless %} />
        <span class="np-button-color radio__control"></span>
      </span>
      <span class="radio__label">
        <span class="lang-en-US">{% t.upload_custom_photo %}</span>
        <span class="lang-es">Subir foto personalizada</span>
        <span class="lang-fr">Télécharger une photo personnalisée</span>
        <span class="lang-de">Benutzerdefinierte Foto hochladen</span>
        <span class="lang-en-GB">Upload Custom Photo</span>
        <span class="lang-nl">Uploaden van een aangepaste foto</span>
        <span class="lang-pt-BR">Carregar foto personalizada</span>
      </span>
    </label>
  </div>
  <div>
    <button
      id="{{version}}_upload_avatar"
      type="button"
      class="np-button np-button-secondary"
      {% if form.use_gravatar? %}
      style="visibility: hidden"
      {% endif %}>
      <span class="lang-en-US"></span>{% t.upload %}</span>
      <span class="lang-es">Subir</span>
      <span class="lang-fr">Télécharger</span>
      <span class="lang-de">Hochladen</span>
      <span class="lang-en-GB">Upload Photo</span>
      <span class="lang-nl">Uploaden</span>
      <span class="lang-pt-BR">Carregar</span>
    </button>
  </div>
</div>