[hideprofile][html]
<script src="https://forumstatic.ru/files/001b/ef/4a/23939.js?v=1"></script>
<style>
    #post-form:not(.gid1 #post-form):not(.gid2 #post-form) {
        visibility: hidden;
        height: 0;
    }

    li.pl-edit {
        display: none !important;
    }

    .gid1 li.pl-edit,
    .gid2 li.pl-edit {
        display: inline-block !important;
    }
</style>

<!-- ОСНОВНОЕ ПРИЛОЖЕНИЕ -->
<div id="bank-app" class="gemini_topic">
    <div class="gemini_topic_title">
        <div class="gemini_topic_humanized">банк</div>
        <div class="gemini_topic_directive">G:\get_tokens</div>
    </div>
    <div class="gemini_topic_main">

        <div class="bank-header gemini_topic_block2">
            <div class="bank-header-points">
                <div class="bank-header-point">
                    Чтобы воспользоваться услугами банка, выберите необходимые позиции прямо в этом сообщении и нажмите
                    "завершить и отправить".
                </div>

                <div class="bank-header-point">
                    Данные банка сохраняются до очистки или отправки, поэтому ничего не потеряется при обновлении
                    страницы.
                </div>

                <div class="bank-header-point">
                    <b>При возникновении непонятных ошибок попробуйте нажать "очистить все" и обновить страницу. Если
                        ошибка
                        сохраняется, пожалуйста, обратитесь в тему вопросов и предложений.</b>
                </div>
            </div>
        </div>

        <div class="global-multiplier bank-settings-item">
            <label class="bank-item-desc">
                <input type="checkbox" v-model="useGlobalDouble" />
                Использовать чек на удвоение всех позиций
            </label>

            <span class="bank-extra">Удвоения по чекам не суммируются. Независимо от количества чеков с
                умножением звёзд/наличии акции по удвоению от администрации, удвоение
                происходит только единоразово.</span>
        </div>

        <bank-item :isclear="isclear"></bank-item>

        <div class="total-block">
            <div class="total-money-item">
                к зачислению: {{ $formatNumber(totalToAdd) }} ☆
            </div>
            <div class="total-money-item" v-if="!this.forAnotherPerson">
                общая сумма в профиле: {{ $formatNumber(totalBalance) }} ☆
            </div>
        </div>

        <div id="bank-end-buttons" v-if="hasFilledData">
            <details class="bank-preview">
                <summary>превью формы</summary>
                <div class="bank-preview-wrap">
                    <div v-html="previewForm"></div>
                    <div class="bank-review-errors" v-if="this.evidenceErrors.length">
                        <div>нет ссылок для:</div>
                        {{this.evidenceErrors}}
                    </div>
                </div>
            </details>
            <button class="bank-btn" id="bank-clear-all-btn" @click="bankClearAll()">
                Очистить все
            </button>
            <bank-form :form="form" v-if="totalToAdd > 0 || toSubstract > 0"></bank-form>
        </div>

        <div v-if="$window.GroupID == 1 || $window.GroupID == 2" class="bank-admin-panel">
            <!-- тут для амс -->
        </div>
    </div>
</div>

<!-- СНАЧАЛА УТИЛИТЫ -->
<script src="https://forumstatic.ru/files/0019/9e/ef/34001.js"></script>

<!-- ПОТОМ КОМПОНЕНТЫ -->
<!-- bank item -->
<script src="https://forumstatic.ru/files/001a/e1/ae/80616.js?v=3"></script>
<!-- checkbox -->
<script src="https://forumstatic.ru/files/0019/9e/ef/58897.js"></script>
<!-- post -->
<script src="https://forumstatic.ru/files/0019/9e/ef/54221.js"></script>
<!-- counter -->
<script src="https://forumstatic.ru/files/0019/9e/ef/76156.js"></script>
<!-- evidence -->
<script src="https://forumstatic.ru/files/0019/9e/ef/36614.js"></script>
<!-- range -->
<script src="https://forumstatic.ru/files/0019/9e/ef/63370.js"></script>
<!-- form -->
<script src="https://forumstatic.ru/files/0019/9e/ef/71136.js"></script>
<!-- pr -->
<script src="https://forumstatic.ru/files/0019/9e/ef/65241.js"></script>

<!-- ПОТОМ ОСНОВНОЕ ПРИЛОЖЕНИЕ -->
<script src="https://forumstatic.ru/files/001a/e1/ae/97719.js?v=4" defer></script>

<!-- ВСЕ ОСТАЛЬНОЕ -->
<style>
    #bank-app {
        width: 100%;
        box-sizing: border-box;
        font-size: 11px;
    }

    #bank-app label {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    #bank-app input {
        margin: 0;
    }

    .bank-header-points {
        margin: 30px auto;
        width: 80%;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .bank-header-point::before {
        content: "\2014";
        margin-right: 3px;
    }

    .bank-tabs {
        list-style: none;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 10px 10px 0 0;
    }

    .bank-tabs li {
        float: left;
        width: 50%;
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
        border-bottom: 0;
        font-weight: 600;
        transition: all 0.2s;
        margin: 0 !important;
    }

    .bank-tabs li:not(.active):hover {
        opacity: 0.9;
        transition: all 0.4s;
    }

    .bank-tabs li a {
        font-family: var(--regular-font);
        font-size: 1.1em;
        display: block;
        width: 50%;
        margin: 0 auto;
        padding: 7px 0px;
        box-sizing: border-box;
    }

    .bank-tab-content {
        padding: 10px;
        border-radius: 0 0 10px 10px;
        border-top: 0;
    }

    .tab-bank-settings {
        margin: 30px auto;
        width: 80%;
        font-family: inherit;
    }

    .tab-bank-settings .bank-item-desc {
        width: unset;
    }

    .bank-settings-item {
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 10px;
        gap: 10px;
    }

    .tab-bank-settings .bank-input {
        width: 100%;
        max-width: 400px;
    }

    .evidence-error,
    .input-error {
        border-color: var(--apps-error);
    }

    .bank-extra {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding-left: 15px;
        text-align-last: left;
        line-height: 1.5;
    }

    /* айтемы */

    .bank-item {
        border-style: solid;
        border-width: 1px;
        padding: 5px 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        justify-content: space-between;
    }

    .bank-item-check {
        justify-content: space-between;
    }

    .bank-item-count {
        justify-content: flex-start;
    }

    .bank-item-about {
        margin: 0 0 4px;
        min-height: 26px;
        flex-shrink: 0;
        text-align: left;
    }

    .bank-review-errors div::before,
    .bank-category-desc::before,
    .bank-item-price,
    .store-item-price {
        width: 65px;
        height: 18px;
        font-size: 13px;
        line-height: 18px;
        float: left;
        display: flex;
        border-radius: 7px;
        justify-content: center;
        margin: 0 5px 0 0;
    }

    .store-item-price {
        width: 90px;
    }

    .transfer-max-info,
    .bank-item-desc,
    .bank-post-desc {
        text-transform: uppercase;
        font-weight: bold;
        line-height: 18px;
        text-align: left;
        font-size: 0.9em;
    }

    .store-item-comment,
    .bank-item-comment {
        margin: 5px 0;
    }

    .total-block {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin: 20px 0 0;
    }

    .total-money-item {
        text-align: center;
        padding: 10px;
        width: 30%;
        border-radius: 10px;
    }

    .bank-textarea-wrap {
        width: 100%;
        margin: 7px 0 0;
    }

    .bank-textarea {
        min-height: 21px;
        resize: vertical;
    }

    .bank-item-counter {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .bank-item-range {
        justify-content: start;
    }

    .bank-item-range .bank-item-comment {
        padding: 5px;
        text-align: center;
        margin-bottom: 0;
        border-radius: 10px;
    }

    .bank-range-col,
    .bank-counter-col {
        text-align: center;
        width: 41%;
        padding: 5px;
        overflow: hidden;
        display: grid;
        align-items: center;
        justify-items: center;
    }

    .bank-counter-col {
        width: 41%;
    }

    .bank-range-col {
        width: 100%;
        box-sizing: border-box;
        margin-top: 5px;
    }

    .bank-item-total span {
        font-size: 1.1em;
    }

    .bank-range-inputs {
        display: flex;
    }

    .bank-range-col {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bank-range-col span {
        width: 100%;
    }

    /* Убираем стандартные стрелки */
    #bank-app input[type="number"].number-input {
        grid-area: input;
        text-align: center;
    }

    #bank-app input[type="number"].number-input::-webkit-outer-spin-button,
    #bank-app input[type="number"].number-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Стили для кастомных стрелок */
    .number-input-wrapper {
        display: grid;
        grid-template-areas:
            "label label"
            "input buttons";
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        align-items: center;
        gap: 5px 0;
        justify-content: center;
    }

    .number-label {
        grid-area: label;
        text-align: center;
    }

    .number-buttons {
        grid-area: buttons;
        display: flex;
        flex-direction: column;
    }

    .number-btn {
        border: none;
        width: 16px;
        height: 12px;
        font-size: 8px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        transition: background-color 0.2s;
    }

    .number-btn:first-child {
        border-radius: 2px 2px 0 0;
        margin-bottom: 1px;
    }

    .number-btn:last-child {
        border-radius: 0 0 2px 2px;
    }

    .bank-btn:disabled,
    .number-input:disabled,
    .number-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .bank-btn:disabled:active {
        top: 0;
    }

    #bank-app input[type="number"] {
        width: 90%;
    }

    #bank-app input[type="number"]::-webkit-inner-spin-button,
    #bank-app input[type="number"]::-webkit-outer-spin-button {
        opacity: 0.7;
    }

    .quantity-nav {
        float: left;
        position: relative;
        height: 25px;
    }

    .bank-btn {
        display: block !important;
        position: relative;
    }

    .bank-btn:active {
        top: 1px;
    }

    #bank-end-buttons {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
    }

    #bank-end-buttons .bank-btn {
        margin: 20px 10px 0;
    }

    #bank-end-buttons .formsubmit {
        margin: 0;
    }

    #bank-form fieldset {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #bank-form {
        position: unset;
    }

    #bank-end-buttons .bank-error {
        text-align: center;
        width: 100%;
        margin: 10px auto 0;
    }

    #bank-post-area {
        width: 100%;
        margin: 0 0 10px;
    }

    .bank-post-area-item {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .category-posts .bank-item {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sms-post-container {
        width: 30%;
    }

    .post-multiplier {
        margin: 3px 0 10px;
        display: flex;
        gap: 15px;
    }

    .bank-post-price {
        margin-bottom: 10px;
        width: calc(50% - 5px);
    }

    .bank-post-checks {
        width: 100%;
    }

    .bank-post-checks .bank-item-desc,
    .bank-post-checks .bank-item-comment {
        display: inline;
    }

    .post-multiplier {
        width: 100%;
    }

    .post-multiplier .bank-post-price {
        width: auto;
    }

    .bank-post-info-row,
    .bank-post-input-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .bank-post-input {
        width: 48%;
        margin: 5px 10px 5px 0 !important;
        box-sizing: border-box;
    }

    .bank-post-info-row {
        flex-wrap: wrap;
    }

    .bank-post-info-point {
        padding: 5px 10px;
    }

    #bank-post-list {
        display: grid;
        grid-template-columns: 3fr 1fr;
        width: 100%;
        padding: 10px;
    }

    #bank-post-list ul {
        display: block;
        margin: 0;
        padding: 0 10px;
    }

    #bank-post-list li {
        margin: 7px 0;
        list-style-type: disclosure-closed;
    }

    .bank-post-list-controls span {
        display: block;
        text-align: center;
        padding: 5px 7px;
        white-space: nowrap;
    }

    #bank-post-list .bank-btn {
        margin: 10px auto 3px;
    }

    .delete-transfer-btn,
    .delete-post-btn {
        border: none;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        cursor: pointer;
        margin-left: 10px;
        font-size: 12px;
        line-height: 14px;
        padding-left: 7px;
        display: inline-grid;
        align-items: center;
        justify-content: center;
        transition: background-color 200ms;
    }

    .delete-transfer-btn::before,
    .delete-post-btn::before {
        content: "\F62A";
        font-family: var(--icon-font);
    }

    .bank-error {
        color: var(--apps-error);
        font-weight: bold;
        text-transform: uppercase;
        margin: 5px 0;
        text-align: left;
        font-size: 0.9em;
    }

    /* аккордеон категорий */

    .bank-categories-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .bank-category {
        border-radius: 6px;
        overflow: hidden;
    }

    .bank-category-title {
        font-size: 1.1em;
        font-weight: bold;
        padding: 15px;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
    }

    .bank-category-desc {
        margin: 20px auto 0;
        width: 70%;
        justify-content: center;
        display: flex;
        align-items: center;
    }

    .bank-category-desc:nth-child(n + 2) {
        margin: 5px auto;
    }

    .bank-category-desc::before {
        content: "TIP";
        font-size: 11px;
        letter-spacing: 1px;
        width: unset;
        padding: 0 10px;
    }

    #tab-store .bank-category-desc::before {
        content: "INFO";
    }

    .store-category-content-items,
    .bank-category-content-items {
        display: grid;
        gap: 12px;
        padding: 15px;
        align-items: start;
        grid-template-columns: repeat(4, 1fr);
    }

    .bank-category-content-items.category-posts {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-auto-rows: 1fr;
    }

    /* категория пиара */

    #bank-item-pr {
        grid-column: span 3;
    }

    #bank-item-pr .bank-price-item {
        display: flex;
    }

    #bank-item-pr .bank-item-desc,
    #bank-item-pr .bank-extra {
        margin: 0 0 10px;
    }

    #bank-item-pr .bank-item-counter {
        display: grid;
        grid-template-columns: 1fr 1fr 3fr;
        gap: 10px;
    }

    #bank-item-pr .bank-counter-col {
        width: unset;
    }

    #bank-item-pr .bank-textarea-wrap {
        display: grid;
        grid-template-rows: 1fr 0.5fr;
        margin: 0;
    }

    .bank-pricing {
        display: flex;
        justify-content: flex-start;
        gap: 20px;
    }

    #sms-post {
        height: auto;
        align-self: self-start;
    }

    .bank-admin-panel,
    .bank-preview {
        margin: 30px 0 10px;
        width: 100%;
        display: block;
        padding: 20px;
        border-radius: 10px;
        box-sizing: border-box;
        text-align: left;
    }

    .bank-admin-panel {
        width: auto;
    }

    .bank-preview summary {
        text-transform: uppercase;
        font-weight: bold;
        cursor: pointer;
    }

    .bank-preview-wrap {
        margin-top: 20px;
        display: grid;
        grid-template-columns: 5fr 3fr;
        gap: 20px;
    }

    .bank-review-errors div {
        text-transform: uppercase;
        font-weight: bold;
        margin: 0 0 10px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        text-align: left;
    }

    .bank-review-errors div::before {
        content: "внимание";
        font-size: 11px;
        letter-spacing: 1px;
        font-weight: normal;
        width: fit-content;
        padding: 0 5px;
    }

    /* ===================================================== */
    /* моб */

    @media screen and (max-width: 540px) {

        .store-category-content-items,
        .bank-category-content-items {
            grid-template-columns: 1fr;
        }

        .bank-category-desc {
            width: 90%;
        }

        .bank-post-price {
            width: 100%;
        }

        .bank-post-info-row,
        .bank-post-input-row {
            flex-wrap: wrap;
        }

        #bank-post-list {
            grid-template-columns: 1fr;
        }

        .post-multiplier {
            flex-wrap: wrap;
            gap: 5px;
        }

        #bank-item-pr {
            grid-column: unset;
        }

        .bank-category-content-items.category-posts {
            grid-template-columns: 1fr;
            grid-auto-rows: unset;
        }

        .category-pr .bank-pricing {
            gap: 7px;
            flex-wrap: wrap;
        }

        #bank-item-pr .bank-item-counter {
            grid-template-columns: 1fr 1fr;
        }

        #bank-item-pr .bank-textarea-wrap {
            grid-template-rows: unset;
            grid-column: span 2;
        }

        .bank-preview-wrap {
            grid-template-columns: unset;
        }

        .total-money-item {
            width: 100%;
        }

        .store-header {
            width: 100%;
        }

        .store-item-transfer {
            grid-column: unset;
        }

        .transfer-container {
            grid-template-columns: unset;
        }

        .bank-item-twink .bank-item-counter {
            flex-wrap: wrap;

            justify-content: center;
        }

        .bank-item-twink .bank-counter-col {
            min-width: unset;
            width: calc(45% - 10px);
        }

        .store-character-price-big .store-item-price {
            height: fit-content;
        }

        .transfer-inputs {
            grid-template-columns: 1fr 15px;
            grid-template-rows: auto auto;
        }

        .transfer-amount {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        .transfer-profile {
            grid-column: 1 / 3;
            grid-row: 2 / 3;
        }

        .delete-transfer-btn {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
            align-self: start;
        }
    }
</style>

[/html]