{extends "../@layout.xml"}
{block title}{_"my_settings"}{/block}

{block header}
    {_"my_settings"}
{/block}

{block content}

{var $isMain       = $mode === 'main'}
{var $isPrivacy    = $mode === 'privacy'}
{var $isFinance    = $mode === 'finance'}
{var $isFinanceTU  = $mode === 'finance.top-up'}
{var $isInterface  = $mode === 'interface'}

       <div class="tabs">
        <div n:attr="id => ($isMain ? 'activetabs' : 'ki')" class="tab">
            <a n:attr="id => ($isMain ? 'act_tab_a' : 'ki')" href="/settings">{_"main"}</a>
        </div>
        <div n:attr="id => ($isPrivacy ? 'activetabs' : 'ki')" class="tab">
            <a n:attr="id => ($isPrivacy ? 'act_tab_a' : 'ki')" href="/settings?act=privacy">{_"privacy"}</a>
        </div>
        <div n:if="OPENVK_ROOT_CONF['openvk']['preferences']['commerce']" n:attr="id => (($isFinance || $isFinanceTU) ? 'activetabs' : 'ki')" class="tab">
            <a n:attr="id => (($isFinance || $isFinanceTU) ? 'act_tab_a' : 'ki')" href="/settings?act=finance">{_points}</a>
        </div>
        <div n:attr="id => ($isInterface ? 'activetabs' : 'ki')" class="tab">
            <a n:attr="id => ($isInterface ? 'act_tab_a' : 'ki')" href="/settings?act=interface">{_"interface"}</a>
        </div>
    </div>
    
    <div class="container_gray">
        {if $isMain}
        
        <form action="/settings?act=main" method="POST" enctype="multipart/form-data">
            <h4>{_"change_password"}</h4>
            <table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
                <tbody>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_"old_password"}</span>
                        </td>
                        <td>
                            <input type="password" name="old_pass" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_"new_password"}</span>
                        </td>
                        <td>
                            <input type="password" name="new_pass" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_"repeat_password"}</span>
                        </td>
                        <td>
                            <input type="password" name="repeat_pass" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr n:if="$user->is2faEnabled()">
                        <td width="120" valign="top">
                            <span class="nobold">{_"2fa_code"}</span>
                        </td>
                        <td>
                            <input type="text" name="code" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            
                        </td>
                        <td>
                            <input type="hidden" name="hash" value="{$csrfToken}" />
                            <input type="submit" value="{_"change_password"}" class="button" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <h4>{_two_factor_authentication}</h4>
            <table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
                <tbody>
                    {if $user->is2faEnabled()}
                        <tr>
                            <td>
                                <div class="accent-box">
                                    {_two_factor_authentication_enabled}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <a class="button" href="javascript:viewBackupCodes()">{_view_backup_codes}</a>
                                <a class="button" href="javascript:disableTwoFactorAuth()">{_disable}</a>
                            </td>
                        </tr>

                        <script>
                            function viewBackupCodes() {
                                MessageBox("Просмотр резервных кодов", `
                                    <form id="back-codes-view-form" method="post" action="/settings/2fa">
                                        <label for="password">Пароль</label>
                                        <input type="password" id="password" name="password" required />
                                        <input type="hidden" name="hash" value={$csrfToken} />
                                    </form>
                                `, ["Просмотреть", "Отменить"], [
                                    () => {
                                        document.querySelector("#back-codes-view-form").submit();
                                    }, Function.noop
                                ]);
                            }

                            function disableTwoFactorAuth() {
                                MessageBox("Отключить 2FA", `
                                    <form id="two-factor-auth-disable-form" method="post" action="/settings/2fa/disable">
                                        <label for="password">Пароль</label>
                                        <input type="password" id="password" name="password" required />
                                        <input type="hidden" name="hash" value={$csrfToken} />
                                    </form>
                                `, ["Отключить", "Отменить"], [
                                    () => {
                                        document.querySelector("#two-factor-auth-disable-form").submit();
                                    }, Function.noop
                                ]);
                            }
                        </script>
                    {else}
                        <tr>
                            <td>
                                <div class="accent-box">
                                    {_two_factor_authentication_disabled}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <a class="button" href="/settings/2fa">{_connect}</a>
                            </td>
                        </tr>
                    {/if}
                </tbody>
            </table>
            <br/>
            <h4>{_your_email_address}</h4>
            <table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
                <tbody>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_current_email_address}</span>
                        </td>
                        <td>
                            {$user->getEmail()}
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <h4>{_your_page_address}</h4>
            <table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
                <tbody>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_page_id}</span>
                        </td>
                        <td>
                            {$user->getId()}
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_page_address}</span>
                        </td>
                        <td>
                            <input type="text" name="sc" value="{$user->getShortCode()}" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            
                        </td>
                        <td>
                            <input type="hidden" name="hash" value="{$csrfToken}" />
                            <input type="submit" value="{_'save'}" class="button" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        
        <!-- dsrev: it's better if we hide it before the page deletion function appears tbh.
             vc: i agree
        
        <div class="settings_delete">
            {_you_can_also} <a href="#" onclick="alert('Не реализовали ждите')">{_delete_your_page}</a>.
        </div>
        
        -->
        
        {elseif $isPrivacy}
        
        <form action="/settings?act=privacy" method="POST" enctype="multipart/form-data">
            <table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_access_page}</span>
                    </td>
                    <td>
                        <select name="page.read" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('page.read') == 3}selected{/if}>{_privacy_value_anybody_dative}</option>
                            <option value="2" {if $user->getPrivacySetting('page.read') == 2}selected{/if}>{_privacy_value_users}</option>
                            <option value="1" {if $user->getPrivacySetting('page.read') == 1}selected{/if}>{_privacy_value_friends_dative}</option>
                            <option value="0" {if $user->getPrivacySetting('page.read') == 0}selected{/if}>{_privacy_value_only_me_dative}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_read_info}</span>
                    </td>
                    <td>
                        <select name="page.info.read" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('page.info.read') == 3}selected{/if}>{_privacy_value_anybody_dative}</option>
                            <option value="2" {if $user->getPrivacySetting('page.info.read') == 2}selected{/if}>{_privacy_value_users}</option>
                            <option value="1" {if $user->getPrivacySetting('page.info.read') == 1}selected{/if}>{_privacy_value_friends_dative}</option>
                            <option value="0" {if $user->getPrivacySetting('page.info.read') == 0}selected{/if}>{_privacy_value_only_me_dative}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_see_groups}</span>
                    </td>
                    <td>
                        <select name="groups.read" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('groups.read') == 3}selected{/if}>{_privacy_value_anybody_dative}</option>
                            <option value="2" {if $user->getPrivacySetting('groups.read') == 2}selected{/if}>{_privacy_value_users}</option>
                            <option value="1" {if $user->getPrivacySetting('groups.read') == 1}selected{/if}>{_privacy_value_friends_dative}</option>
                            <option value="0" {if $user->getPrivacySetting('groups.read') == 0}selected{/if}>{_privacy_value_only_me_dative}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_see_photos}</span>
                    </td>
                    <td>
                        <select name="photos.read" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('photos.read') == 3}selected{/if}>{_privacy_value_anybody_dative}</option>
                            <option value="2" {if $user->getPrivacySetting('photos.read') == 2}selected{/if}>{_privacy_value_users}</option>
                            <option value="1" {if $user->getPrivacySetting('photos.read') == 1}selected{/if}>{_privacy_value_friends_dative}</option>
                            <option value="0" {if $user->getPrivacySetting('photos.read') == 0}selected{/if}>{_privacy_value_only_me_dative}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_see_videos}</span>
                    </td>
                    <td>
                        <select name="videos.read" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('videos.read') == 3}selected{/if}>{_privacy_value_anybody_dative}</option>
                            <option value="2" {if $user->getPrivacySetting('videos.read') == 2}selected{/if}>{_privacy_value_users}</option>
                            <option value="1" {if $user->getPrivacySetting('videos.read') == 1}selected{/if}>{_privacy_value_friends_dative}</option>
                            <option value="0" {if $user->getPrivacySetting('videos.read') == 0}selected{/if}>{_privacy_value_only_me_dative}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_see_notes}</span>
                    </td>
                    <td>
                        <select name="notes.read" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('notes.read') == 3}selected{/if}>{_privacy_value_anybody_dative}</option>
                            <option value="2" {if $user->getPrivacySetting('notes.read') == 2}selected{/if}>{_privacy_value_users}</option>
                            <option value="1" {if $user->getPrivacySetting('notes.read') == 1}selected{/if}>{_privacy_value_friends_dative}</option>
                            <option value="0" {if $user->getPrivacySetting('notes.read') == 0}selected{/if}>{_privacy_value_only_me_dative}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_see_friends}</span>
                    </td>
                    <td>
                        <select name="friends.read" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('friends.read') == 3}selected{/if}>{_privacy_value_anybody_dative}</option>
                            <option value="2" {if $user->getPrivacySetting('friends.read') == 2}selected{/if}>{_privacy_value_users}</option>
                            <option value="1" {if $user->getPrivacySetting('friends.read') == 1}selected{/if}>{_privacy_value_friends_dative}</option>
                            <option value="0" {if $user->getPrivacySetting('friends.read') == 0}selected{/if}>{_privacy_value_only_me_dative}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_add_to_friends}</span>
                    </td>
                    <td>
                        <select name="friends.add" style="width: 164px;">
                            <option value="3" {if $user->getPrivacySetting('friends.add') == 2}selected{/if}>{_privacy_value_anybody}</option>
                            <option value="0" {if $user->getPrivacySetting('friends.add') == 0}selected{/if}>{_privacy_value_nobody}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_write_wall}</span>
                    </td>
                    <td>
                        <select name="wall.write" style="width: 164px;">
                            <option value="2" {if $user->getPrivacySetting('wall.write') == 2}selected{/if}>{_privacy_value_anybody}</option>
                            <option value="1" {if $user->getPrivacySetting('wall.write') == 1}selected{/if}>{_privacy_value_friends}</option>
                            <option value="0" {if $user->getPrivacySetting('wall.write') == 0}selected{/if}>{_privacy_value_only_me}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="120" valign="top">
                        <span class="nobold">{_privacy_setting_write_messages}</span>
                    </td>
                    <td>
                        <select name="messages.write", style="width: 164px;">
                            <option value="2" {if $user->getPrivacySetting('messages.write') == 2}selected{/if}>{_privacy_value_anybody}</option>
                            <option value="1" {if $user->getPrivacySetting('messages.write') == 1}selected{/if}>{_privacy_value_friends}</option>
                            <option value="0" {if $user->getPrivacySetting('messages.write') == 0}selected{/if}>{_privacy_value_nobody}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        
                    </td>
                    <td>
                        <input type="hidden" name="hash" value="{$csrfToken}" />
                        <input type="submit" value="{_'save'}" class="button" />
                    </td>
                </tr>
            </table>
        </form>
        
        {elseif $isFinance}
        
        <div style="width: 75%; display: inline-block;">
            {presenter "openvk!Support->knowledgeBaseArticle", "points"}
            <center>{tr("also_you_can_transfer_points", $thisUser->getCoins(), rawurlencode($csrfToken))|noescape}</center>
        </div>
        <div style="width: 22%; float: right;">
            <div style="margin: 0; font-size: medium; text-align: center; font-weight: 900;">
                {_on_your_account}
                <div style="width: 100%; height: 60px; font-weight: 100;" id="balance">{$thisUser->getCoins()}</div>
                {_points_count}<br/>
                <small><a href="?act=finance.top-up">[{_have_voucher}?]</a></small>
            </p>
        </div>
        
        {script "js/node_modules/textfit/textFit.min.js"}
        <script>
            let balance = document.querySelector("#balance");
            
            balance.style.width = Math.ceil(balance.parentNode.getBoundingClientRect().width) + "px";
            textFit(balance, { alignVert: true });
        </script>
        
        {elseif $isFinanceTU}
        
        <p>{_voucher_explanation} {_voucher_explanation_ex}</p>
        <form name="vouncher_form" action="/settings?act=finance.top-up" method="POST" enctype="multipart/form-data">
            <input type="text" name="key0" class="vouncher_input" size="6" maxlength="6" placeholder="123456" required="required" oninput="autoTab(this, document.vouncher_form.key1, undefined)" style="display: inline-block; width: 50px; text-align: center;" /> -
            <input type="text" name="key1" class="vouncher_input" size="6" maxlength="6" placeholder="789012" required="required" oninput="autoTab(this, document.vouncher_form.key2, document.vouncher_form.key0)" style="display: inline-block; width: 50px; text-align: center;" /> -
            <input type="text" name="key2" class="vouncher_input" size="6" maxlength="6" placeholder="345678" required="required" oninput="autoTab(this, document.vouncher_form.key3, document.vouncher_form.key1)" style="display: inline-block; width: 50px; text-align: center;" /> -
            <input type="text" name="key3" class="vouncher_input" size="6" maxlength="6" placeholder="90ABCD" required="required" oninput="autoTab(this, undefined, document.vouncher_form.key2)" style="display: inline-block; width: 50px; text-align: center;" />
            <br/><br/>
            
            <input type="hidden" name="hash" value="{$csrfToken}" />
            <input type="submit" value="{_redeem}" class="button" />
        </form>
        <script>
            u(".vouncher_input").on("paste", function(event) {
                const vouncher = event.clipboardData.getData("text");

                let segments;
                if(vouncher.length === 27) {
                    segments = vouncher.split("-");
                    if(segments.length !== 4)
                        segments = undefined;
                } else if(vouncher.length === 24) {
                    segments = chunkSubstr(vouncher, 6);
                }

                if(segments !== undefined) {
                    document.vouncher_form.key0.value = segments[0];
                    document.vouncher_form.key1.value = segments[1];
                    document.vouncher_form.key2.value = segments[2];
                    document.vouncher_form.key3.value = segments[3];
                    document.vouncher_form.key3.focus();
                }

                event.preventDefault();
            });
        </script>
        
        {elseif $isInterface}
        
        <h4>{_ui_settings_interface}</h4>
        <form action="/settings?act=interface" method="POST" enctype="multipart/form-data">
            <table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
                <tbody>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_"avatars_style"}</span>
                        </td>
                        <td>
                            <select name="style_avatar">
                                <option value="0" {if $user->getStyleAvatar() == 0}selected{/if}>{_"arbitrary_avatars"} ({_"default"})</option>
                                <option value="1" {if $user->getStyleAvatar() == 1}selected{/if}>{_"cut"}</option>
                                <option value="2" {if $user->getStyleAvatar() == 2}selected{/if}>{_"round_avatars"}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_"style"}</span>
                        </td>
                        <td>
                            <select name="style">
                                <option value="ovk" {if $user->getStyle() == 'ovk'}selected{/if}>OpenVK ({_"default"})</option>
                                <option n:foreach="$themes as $id => $theme"
                                        n:attr="selected => $user->getStyle() === $id"
                                        value="{$id}">
                                            {$theme}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">{_ui_settings_rating}</span>
                        </td>
                        <td>
                            <select name="rating">
                                <option value="1" {if !$user->prefersNotToSeeRating()}selected{/if}>{_ui_settings_rating_show}</option>
                                <option value="0" {if $user->prefersNotToSeeRating()}selected{/if}>{_ui_settings_rating_hide}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">NSFW-контент</span>
                        </td>
                        <td>
                            <select name="nsfw">
                                <option value="0" {if $user->getNsfwTolerance() === 0}selected{/if}>Не показывать в глобальной ленте</option>
                                <option value="1" {if $user->getNsfwTolerance() === 1}selected{/if}>Только замазывать</option>
                                <option value="2" {if $user->getNsfwTolerance() === 2}selected{/if}>Показывать</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top">
                            <span class="nobold">Вид постов</span>
                        </td>
                        <td>
                            <select name="microblog">
                                <option value="0" {if !$user->hasMicroblogEnabled()}selected{/if}>Старый</option>
                                <option value="1" {if $user->hasMicroblogEnabled()}selected{/if}>Микроблог</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top" align="right">
                            <input type="checkbox" name="theme_for_session" value="1">
                        </td>
                        <td>
                            {_apply_style_for_this_device}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            
                        </td>
                        <td>
                            <input type="hidden" name="hash" value="{$csrfToken}" />
                            <input type="submit" value="{_'save'}" class="button" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        
        <h4>{_ui_settings_sidebar}</h4>
        <form action="/settings?act=lMenu" method="POST" enctype="multipart/form-data">
            <table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
                <tbody>
                    <tr>
                        <td width="120" valign="top" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('photos')"
                                  type="checkbox"
                                  name="menu_bildoj" />
                        </td>
                        <td>
                            <span class="nobold">{_my_photos}</span>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('videos')"
                                  type="checkbox"
                                  name="menu_filmetoj" />
                        </td>
                        <td>
                            <span class="nobold">{_my_videos}</span>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('messages')"
                                  type="checkbox"
                                  name="menu_mesagoj" />
                        </td>
                        <td>
                            <span class="nobold">{_my_messages}</span>
                        </td>
                    </tr>
                    <tr>
                        <td width="120" valign="top" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('notes')"
                                  type="checkbox"
                                  name="menu_notatoj" />
                        </td>
                        <td>
                            <span class="nobold">{_my_notes}</span>
                        </td>
                    </tr><tr>
                        <td width="120" valign="top" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('groups')"
                                  type="checkbox"
                                  name="menu_grupoj" />
                        </td>
                        <td>
                            <span class="nobold">{_my_groups}</span>
                        </td>
                    </tr><tr>
                        <td width="120" valign="top" align="right" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('news')"
                                  type="checkbox"
                                  name="menu_novajoj" />
                        </td>
                        <td>
                            <span class="nobold">{_my_feed}</span>
                        </td>
                    </tr><tr n:if="sizeof(OPENVK_ROOT_CONF['openvk']['preferences']['menu']['links']) > 0">
                        <td width="120" valign="top" align="right" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('links')"
                                  type="checkbox"
                                  name="menu_ligiloj" />
                        </td>
                        <td>
                            <span class="nobold">{_additional_links}</span>
                        </td>
                    </tr><tr n:if="OPENVK_ROOT_CONF['openvk']['preferences']['adPoster']['enable']">
                        <td width="120" valign="top" align="right" align="right">
                            <input
                                  n:attr="checked => $user->getLeftMenuItemStatus('poster')"
                                  type="checkbox"
                                  name="menu_standardo" />
                        </td>
                        <td>
                            <span class="nobold">{_ad_poster}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            
                        </td>
                        <td>
                            <input type="hidden" name="hash" value="{$csrfToken}" />
                            <input type="submit" value="{_'save'}" class="button" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        
        {/if}
    </div>
    
{/block}