{% macro profile_card(user) -%}
<div class="c_iiehk">
    <div class="c_86o9o b_u9ode">
        {% if 'admin' in user.get('roles', []) %}
        <p class="c_kpaav b_xsvl1">Личный кабинет Администратора</p>
        {% elif 'partner' in user.get('profile', '') %}
        <p class="c_kpaav b_xsvl1" style="color: #f39318;">Личный кабинет Партнера</p>
        {% elif 'galerist' in user.get('roles', []) %}
        <p class="c_kpaav b_xsvl1">Личный кабинет Галериста</p>
        {% else %}
        <p class="c_kpaav b_xsvl1">Личный кабинет Художника</p>
        {% endif %}
    </div>
    <div class="c_8xkk0 b_2rmrs">
        {% if 'admin' not in user.get('roles', []) %}
        {% if 'partner' in user.get('roles', [])%}
        {% if 'partner' in user.get('profile', '') %}
        <button class="c_6cfr8 b_m2ah9 b ba" onclick="switchProfile()">
            <span class="c_d2l0b b_al8e7">Личный кабинет галериста</span>
        </button>
        {% else %}
        <button class="c_6cfr8 b_m2ah9 b ba" onclick="switchProfile()">
            <span class="c_d2l0b b_al8e7">Личный кабинет партнера</span>
        </button>
        {% endif %}
        {% endif %}
        {% endif %}
        <!-- <a href="/profile" class="c_6cfr8 b_m2ah9"><span class="c_d2l0b b_al8e7">Кабинет
                Автопост</span></a> -->
        <p class="c_kpaav b_xsvl1">Профиль</p>
        <div class="c_vzkm9 b_hjteq">
            <label class="c_nw0wv b_zo7wz" for="avatar">
                <img class="c_tv6iu b_rhmvx" src="/a/{{user._id}}" alt="{{user.username}}" id="preview"
                    crossorigin="anonymous" fetchpriority="high" loading="eager">
                <svg class="c_mrl59 b_lgvu4" width="50" height="50" viewBox="0 0 50 50" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <rect width="50" height="50" rx="25" fill="#5F1798" />
                    <path
                        d="M21 30H29V29.45C29 28.7 28.6333 28.1042 27.9 27.6625C27.1667 27.2208 26.2 27 25 27C23.8 27 22.8333 27.2208 22.1 27.6625C21.3667 28.1042 21 28.7 21 29.45V30ZM26.4125 25.4125C26.8042 25.0208 27 24.55 27 24C27 23.45 26.8042 22.9792 26.4125 22.5875C26.0208 22.1958 25.55 22 25 22C24.45 22 23.9792 22.1958 23.5875 22.5875C23.1958 22.9792 23 23.45 23 24C23 24.55 23.1958 25.0208 23.5875 25.4125C23.9792 25.8042 24.45 26 25 26C25.55 26 26.0208 25.8042 26.4125 25.4125ZM17 34C16.45 34 15.9792 33.8042 15.5875 33.4125C15.1958 33.0208 15 32.55 15 32V20C15 19.45 15.1958 18.9792 15.5875 18.5875C15.9792 18.1958 16.45 18 17 18H20.15L22 16H28L29.85 18H33C33.55 18 34.0208 18.1958 34.4125 18.5875C34.8042 18.9792 35 19.45 35 20V32C35 32.55 34.8042 33.0208 34.4125 33.4125C34.0208 33.8042 33.55 34 33 34H17ZM17 32H33V20H28.95L27.125 18H22.875L21.05 20H17V32Z"
                        fill="white" />
                </svg>
            </label>
            <input class="c_ijkun b_jkzqx" type="file" accept="image/*" id="avatar" name="avatar">
        </div>
        <p class="c_kpaav b_xsvl1">{{user.username}}</p>
        <button onclick="logout()" class="c_ryjri b_yzw2z">
            <span class="c_d2l0b b_al8e7">Выйти</span>
        </button>
    </div>
    <div class="c_o5uzd b_h9dsc">
        <p class="c_kpaav b_xsvl1">Нужна помощь?</p>
        <a class="c_yveil b_v63fu" href="#">
            <span class="c_z2tjg b_440jc">Поддержка</span>
        </a>
    </div>
</div>
<script defer>
    async function logout() {
        try {
            const resp = await fetch('/logout', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'same-origin'
            });
            if (resp.ok) {
                window.location.href = '/';
            } else {
                console.error('Logout failed', resp.status);
            }
        } catch (err) {
            console.error('Network error during logout', err);
        }
    }
</script>
<script defer>
    async function switchProfile() {
        try {
            const resp = await fetch('/api/switch-profile', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });
            if (!resp.ok) throw new Error('Network error');
            window.location.href = '/profile';
            window.location.reload()
        } catch (err) {
            console.error(err);
        }
    }
</script>
<script defer>
document.addEventListener('DOMContentLoaded', () => {
  const avatarInput = document.getElementById('avatar');
  const preview = document.getElementById('preview');

  avatarInput.addEventListener('change', async () => {
    if (avatarInput.files.length === 0) return;

    const file = avatarInput.files[0];
    preview.src = URL.createObjectURL(file);

    const form = new FormData();
    form.append('avatar', file);

    try {
      const resp = await fetch('/api/avatar', {
        method: 'POST',
        body: form
      });

      if (!resp.ok) {
        const text = await resp.text();
        throw new Error(`Upload failed: ${resp.status} ${text}`);
      }

      const data = await resp.json();
      if (data.url) preview.src = data.url;
      console.log('Upload success', data);
    } catch (err) {
      console.error(err);
    } finally {
      URL.revokeObjectURL(preview.src);
    }
  });
});
</script>
{% endmacro %}