{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}
{% import "components/profile_card.html" as profile_card %}
{% import "components/profile_nav.html" as profile_nav %}
{% import "components/checkbox.html" as checkbox %}

{% block title %}Мои соц. сети{% endblock %}



{% block content %}
{{ header.section(user) }}
<section class="c_dg3k4">
<div class="c_gtoe9">
{{ profile_card.profile_card(user) }}
<div class="c_ru432">
{{ profile_nav.profile_nav(user, 'social') }}
<div class="c_tihtk" id="main">
    <hr>
    <section class="c_fswiv">
        <div class="c_pkxno b_9zn9v">
            <div class="c_xn6qb b_7pvjf">
                <img class="c_5ot6o b_hzn1v" src="/static/icons/vk.svg">
                <span class="c_sk6kn b_cqgn2">ВКонтакте</span>
            </div>
            <a class="c_q9s9u b_fc2ac" href="/api/v1/social/vk/auth">
                <span class="c_fmgwx b_y17do">Авторизоваться</span>
            </a>
            {% set social_vk = socials | selectattr('type', '==', 'vk') | list %}
            {% if social_vk|length==0 or social_vk[0].get('need_auth') %}<span class="c_sk6kn b_cqgn2">Нужна авторизация в ВК</span>{%else%}
            
            <div class="c_yzs44 b_grgx8">
                <span class="c_sk6kn b_cqgn2">Личная старница:</span>
                {% for doc in social_vk %}
                {% if not doc.get('group',False) %}
                <div class="c_yzs44 b_e3k9i">
                    <div class="c_0pok5 b_q158v">
                        <div class="c_j374f b_tto6p">
                            <img class="c_96qcm b_wrh58" src="/b/social/{{doc.img}}">
                        </div>
                        <span class="c_sk6kn b_cqgn2">{{doc.name}}</span>
                    </div>
                    <div class="c_tpnf9 b_549qf">
                        <label class="offer-label">
                            <input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" data-key="active"
                            {% if doc.active %}checked{%endif%}>
                            <span class="offer-text">Публикация картин</span>
                        </label>
                        <label class="offer-label">
                            <input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" 
                            data-key="news"
                            {% if doc.news %}checked{%endif%}>
                            <span class="offer-text">Публикация новостей</span>
                        </label>
                        {% if 'admin' in user.get('roles',[]) or 'partner' in user.get('roles',[]) %}
                        <label class="offer-label">
                            <input type="checkbox" data-id="{{doc._id}}" data-key="service" 
                                class="offer-checkbox"{% if doc.get('service', False) %} checked{%endif%}>
                            <span class="offer-text">Внешние социальные сети</span>
                        </label>
                        {% endif %}
                        <!-- <label class="offer-label">
                            <input type="checkbox" data-id="{{doc._id}}" data-key="sign_avatar" 
                                class="offer-checkbox" {% if doc.get('sign_avatar', True) %}checked{%endif%}>
                            <span class="offer-text">Добавлять подпись-аватар</span>
                        </label> -->
                        <label class="offer-label">
                            <input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" data-key="competition"
                            {% if doc.get('competition', False) %}checked{%endif%}>
                            <span class="offer-text">Модерация публикуемых конкурсов</span>
                        </label>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div> 
            <hr>
            <div class="c_yzs44 b_grgx8">
                <span class="c_sk6kn b_cqgn2">Сообщества:</span>
                {% for doc in (social_vk | selectattr('group') | list) %}
                <div class="c_jkbyo b_e3k9i">
                    <div class="c_0pok5 b_q158v">
                        <div class="c_j374f b_tto6p">
                            <img class="c_96qcm b_wrh58" src="/b/social/{{doc.img}}">
                        </div>
                        <span class="c_sk6kn b_cqgn2">{{doc.name}}</span>
                    </div>
                    <div class="c_tpnf9 b_549qf">
                        <label class="offer-label">
                            <input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" 
                            data-key="active"{% if doc.active %} checked{%endif%}>
                            <span class="offer-text">Публикация картин</span>
                        </label>
                        <label class="offer-label">
                            <input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" 
                            data-key="news"
                            {% if doc.news %}checked{%endif%}>
                            <span class="offer-text">Публикация новостей</span>
                        </label>
                        {% if 'admin' in user.get('roles',[]) or 'partner' in user.get('roles',[]) %}
                        <label class="offer-label">
                            <input type="checkbox" data-id="{{doc._id}}" data-key="service" 
                                class="offer-checkbox"{% if doc.get('service', False) %} checked{%endif%}>
                            <span class="offer-text">Внешние социальные сети</span>
                        </label>
                        {% endif %}
                        <!-- <label class="offer-label">
                            <input type="checkbox" data-id="{{doc._id}}" data-key="sign_avatar" 
                                class="offer-checkbox" {% if doc.get('sign_avatar', True) %}checked{%endif%}>
                            <span class="offer-text">Добавлять подпись-аватар</span>
                        </label> -->
                        <label class="offer-label">
                            <input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" data-key="competition"
                             {% if doc.get('competition', False) %}checked{%endif%}>
                            <span class="offer-text">Модерация публикуемых конкурсов</span>
                        </label>
                    </div>
                </div>
                {% else %}
                    <p>Не найдены.</p>
                {% endfor %}
            </div>
            {%endif%}
        </div>
    </section>
    <hr>
</div>
</div>
</div>
</section>
<script>
async function postSetting(id, key, value) {
  const payload = {
    id: id,
    key: key,
    check: value
  };

  try {
    const resp = await fetch('/api/social/settings', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    });

    if (!resp.ok) {
        showToast({message: 'Ошибка сохранения', status : 'error'})
      console.error('Server responded with', resp.status);
    } else {
      showToast({message: 'Сохранено!'})
      console.log('Saved:', payload);
    }
  } catch (err) {
    showToast({message: err, status: 'error'})
    console.error('Network error', err);
  }
}

document.addEventListener('change', function (e) {
  const target = e.target;
  if (target.matches('input[type="checkbox"]')) {
    const id  = target.dataset.id;
    const key = target.dataset.key;
    const checked = target.checked;

    postSetting(id, key, checked);
  }
});
</script>
{{ footer.section(user) }}
{% endblock %}

{% block head %}
{{ header.style() }}
{{ profile_nav.style() }}
{{ checkbox.style() }}
<style>
    hr{width: 100%;
  color: #5e179888;}
.b_v6dzl { height: 12px; stroke-width: 3px; stroke: #0ED646; width: 16px; }
.b_x94nr { height: 16px; width: 20px; }
.b_mzhbc { flex-shrink: 0; height: 30px; width: 30px; }
.b_hzn1v { align-items: center; aspect-ratio: 1/1; display: flex; height: 30px; justify-content: center; width: 30px; }
.b_cqgn2 { color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_7pvjf { align-items: center; display: flex; gap: 10px; justify-content: center; }
.b_y17do { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_fc2ac { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 12px 30px; }
.b_cqyno { flex-shrink: 0; height: 50px; width: 50px; }
.b_wrh58 { border-radius: 50%; align-items: center; aspect-ratio: 1/1; display: flex; height: 50px; justify-content: center; width: 50px; }
.b_tto6p { align-items: center; display: flex; gap: 10px; }
.b_q158v { align-items: center; align-self: stretch; display: flex; gap: 10px; }
.b_549qf { align-items: flex-start; display: flex; flex-direction: column; gap: 5px; }
.b_grgx8 { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 25px; }
.b_e3k9i { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.b_9zn9v { width: 90%; margin: auto; align-items: flex-start; display: flex; flex-direction: column; gap: 9px; justify-content: center; }

/* Mobile */
@media (max-width: 699px) {
.c_fswiv { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; width: 100%; }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_fswiv { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; width: 100%; }
}

/* Desktop */
@media (min-width: 901px) {
.c_jkbyo { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 5px; }
.c_fswiv { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; width: 100%; }
}</style>
<style>/* Base (common) styles */
.b_qgav8 { height: 12px; stroke-width: 3px; stroke: #0ED646; width: 16px; }
.b_h1rw4 { height: 16px; width: 20px; }
.b_bpfdu { flex-shrink: 0; height: 30px; width: 30px; }
.b_bz5d5 { align-items: center; aspect-ratio: 1/1; display: flex; height: 30px; justify-content: center; width: 30px; }
.b_xg9ou { color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_dua9o { align-items: center; display: flex; gap: 10px; justify-content: center; }
.b_d9pzu { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_jphak { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 12px 30px; }
.b_2tr5g { align-items: center; display: flex; flex-direction: column; gap: 9px; }
</style>
<style>
    /* Mobile */
    @media (max-width: 699px) {
        .c_mrl59 {
            align-items: center;
            background: #5F1798;
            border-radius: 25px;
            bottom: -15px;
            display: flex;
            height: 50px;
            justify-content: center;
            position: absolute;
            right: -15px;
            width: 50px;
        }
    }

    /* Tablet */
    @media (min-width: 700px) and (max-width: 900px) {
        .c_iiehk {
            align-items: center;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 335px;
        }

        .c_nnsh6>a>img {
            display: none;
        }

    }

    /* Desktop */
    @media (min-width: 901px) {
        .c_iiehk {
            align-items: flex-end;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 310px;
        }

        .c_nnsh6>a>img {
            display: none;
        }
    }
    .c_tihtk{width: 100%;}
</style>
{{ footer.style() }}
{% endblock %}