<div class="avatar-text">
  <h4 class="strong">
    <span class="lang-en">Profile picture</span>
    <span class="lang-de">Profilbild</span>
    <span class="lang-es">Foto de perfil</span>
    <span class="lang-fr">Photo de profil</span>
    <span class="lang-br">Foto do perfil</span>
  </h4>
  <div>
    <span class="lang-en">Photo helps personalize your account</span>
    <span class="lang-de">Personalisieren Sie Ihr Konto mit einem Foto</span>
    <span class="lang-es">La foto ayuda a personalizar su cuenta</span>
    <span class="lang-fr">La photo permet de personnaliser votre compte</span>
    <span class="lang-br">A foto ajuda a personalizar sua conta</span>
  </div>
</div>

<img
    alt="default avatar"
    class="np-account-avatar-image"
    src="https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png"
    id="{{version}}_gravatar_img"
    {% unless form.use_gravatar? %}style="display: none"{% endunless %}
/>
<img
    alt="avatar"
    class="np-account-avatar-image"
    src="{% if form.secure_custom_avatar_url contains "https://secure.gravatar.com/avatar" %}https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png{% else %}{{ form.secure_custom_avatar_url }}{% endif %}"
    id="{{version}}_custom_avatar_img"
    {% if form.use_gravatar? %}style="display: none"{% endif %}
/>

<div class="np-account-avatar-choice">
  <div class="np-form-field np-hidden">
    <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>
    </label>
  </div>
  
  <div class="np-form-field np-hidden">
    <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">Upload custom photo</span>
        <span class="lang-de">Foto hochladen</span>
        <span class="lang-es">Subir foto personalizada</span>
        <span class="lang-fr">Téléverser une photo personnalisée</span>
        <span class="lang-br">Carregar foto personalizada</span>
      </span>
    </label>
  </div>
  <button
      id="{{version}}_upload_avatar"
      type="button"
      class="upload-avatar-button{% if form.use_gravatar? %} np-hidden{% endif %}"
  >
    <i class="far fa-paperclip"></i>
    <span class="lang-en">Upload custom photo</span>
    <span class="lang-de">Foto hochladen</span>
    <span class="lang-es">Subir foto personalizada</span>
    <span class="lang-fr">Téléverser une photo personnalisée</span>
    <span class="lang-br">Carregar foto personalizada</span>
  </button>
  <div class="avatar-checkbox-wrapper" onclick="toggleGravatar()">
    <div class="avatar-checkbox {% if form.use_gravatar? %} avatar-checkbox-selected {% endif %}" id="gravatar-checkbox">
      <svg class="avatar-checkbox-mark" width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.7856 0.703847C11.2758 0.349665 11.9541 0.468775 12.3006 0.969886C12.6471 1.471 12.5305 2.16435 12.0403 2.51853C9.89294 4.07001 7.5045 6.58636 4.89298 10.0653C4.50422 10.5832 3.76456 10.6485 3.29465 10.2065L0.350947 7.43754C-0.0907947 7.02203 -0.119375 6.31912 0.287111 5.86757C0.693596 5.41601 1.38122 5.3868 1.82296 5.80231L3.89947 7.75555C6.35518 4.59965 8.64604 2.24967 10.7856 0.703847Z" fill="white"/>
      </svg>
    </div>
    <span>
      <span class="lang-en">Use default avatar</span>
      <span class="lang-de">Standard-Avatar verwenden</span>
      <span class="lang-es">Usar avatar predeterminado</span>
      <span class="lang-fr">Utiliser l'avatar par défaut</span>
      <span class="lang-br">Use o avatar padrão</span>
    </span>
  </div>
</div>

<style>
    #desktop_custom_avatar_img {
        border-radius: 50%;
        border: 2px solid #E4E6E9;
    }
    .avatar-text > h4 {
        margin-bottom: 20px;
    }
    .np-account-avatar-choice {
        margin-left: 0;
    }
    .avatar-checkbox {
        width: 20px;
        height: 20px;
        border: 1px solid var(--black-digital);
        border-radius: 2px;
    }
    .avatar-checkbox-wrapper {
        display: flex;
        gap: 10px;
        align-items: center;
        cursor: pointer;
    }
    .avatar-checkbox.avatar-checkbox-selected {
        border: none;
        background: var(--green);
        display: flex;
    }
    .avatar-checkbox-mark {
        display: none;
        margin: auto;
    }
    .avatar-checkbox.avatar-checkbox-selected .avatar-checkbox-mark {
        display: block;
    }
    .upload-avatar-button {
        border: none;
        background: none;
        color: #0070D6;
        margin-bottom: 20px;
        padding: 0;
    }
    .upload-avatar-button:hover {
        color: #0055a3;
    }
    .upload-avatar-button > i {
        rotate: -45deg;
    }
    #desktop_gravatar_img {
        border: 2px solid #E4E6E9;
        border-radius: 50%;
    }
</style>

<script>
  function toggleGravatar() {
    let checkbox = document.querySelector('#gravatar-checkbox');
    checkbox.classList.toggle('avatar-checkbox-selected');
    document.querySelector('.upload-avatar-button').classList.toggle('np-hidden')
    if (checkbox.classList.contains('avatar-checkbox-selected')) {
      document.querySelector(('#desktop_learner_use_gravatar_true')).click()
    } else {
      document.querySelector(('#desktop_learner_use_gravatar_false')).click()
    }
  }
  {% if current_person.avatar_url contains "https://secure.gravatar.com/avatar" and form.use_gravatar? == false %}
  window.addEventListener("DOMContentLoaded", () => {
    let a = document.querySelector('#gravatar-checkbox');
    if (!a.classList.contains('avatar-checkbox-selected')) {
      a.click()
    }
  })
  {% endif %}
</script>
