<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="./images/favicon-32x32.png"
    />
    <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="./images/favicon-16x16.png"
    />
    <link rel="stylesheet" href="./index.css"/>
    <title>Low balance</title>
</head>

<body>
<main class="main">
    <img class="main__image" src="data:," alt="pet near laptop"/>
    <div class="block">
        <div class="block__info block__info_start">
            <form
                    class="form"
                    action="javascript:void(0);"
                    name="widget"
                    id="gbpaymentsForm"
            >
                <div class="block__content">
                    <div class="block__header-box">
                        <p class="block__header">Уважаемый абонент!</p>
                        <!-- <div class="logo"></div> -->
                    </div>
                    <div class="block__text-box block__text-box_wide">
                        <p class="block__text">
                            Доступ в интернет временно приостановлен в связи с недостатком
                            средств на Вашем счете.
                        </p>
                        <p class="block__text">
                            <!-- Вам необходимо пополнить баланс Вашего лицевого счета или
                            воспользоваться услугой -->
                            <!-- Вам необходимо пополнить баланс Вашего лицевого счета -->
                            <a class="block__link deferred_pay hidden">Отложенный платеж</a>
                        </p>
                    </div>
                    <!-- <a class="block__link" href="https://billing.at-home.ru/lk/user/plainAuth/">Отложенный платёж</a> -->
                    <p class="block__name">Пополнение счёта</p>
                    <div class="block__pay-box">
                        <label class="block__input-label">
                            Номер счета
                            <input
                                    class="block__input block__input_number"
                                    name="number"
                                    type="text"
                                    autocomplete="off"
                            />
                        </label>
                        <label class="block__input-label block__input-label_small">
                            сумма
                            <input
                                    class="block__input block__input_value"
                                    name="sum"
                                    type="text"
                                    autocomplete="off"
                            />
                        </label>
                    </div>
                    <!-- <div class="block__checkbox-box" style="justify-content: flex-start; margin-bottom: .25rem">
                         <input
                                 type="checkbox"
                                 class="block__checkbox block__checkbox-start"
                                 id="receipt"
                         />
                         <span class="block__checkbox_custom"></span>
                         <label class="block__text block__text_grey" for="receipt"
                         >Мне нужен кассовый чек
                         </label>
                     </div>-->
                    <!--<input
                            class="block__input block__input_number hidden"
                            id="email"
                            name="email"
                            type="text"
                            autocomplete="off"
                            style="width: 100%; margin: 6px 0 12px 0; box-sizing: border-box"
                            placeholder="email"
                    />-->
                    <!--<div class="block__checkbox-box" style="justify-content: flex-start; margin-bottom: .25rem">
                        <input
                                type="radio"
                                class="block__checkbox block__checkbox-start"
                                id="sbp"
                                name="payment-type"
                                checked
                        />
                        <span class="block__checkbox_custom"></span>
                        <label class="block__text block__text_grey" for="sbp"
                        >
                            <img style="width: 14px; height: 14px;" src="./images/icons/sbp_icon.png"
                                 alt="банковская карта"/>
                            Система быстрых платежей
                        </label>
                    </div>-->
                    <div class="block__checkbox-box" style="justify-content: flex-start; margin-bottom: .25rem">
                        <input
                                type="radio"
                                class="block__checkbox block__checkbox-start"
                                name="payment-type"
                                id="payment-card"
                                checked
                        />
                        <span class="block__checkbox_custom"></span>

                        <label class="block__text block__text_grey" for="payment-card">
                            <img style="width: 14px; height: 14px;" src="./images/icons/card-icon.png"
                                 alt="банковская карта"/>
                            Банковская карта
                        </label>
                    </div>
                    <div class="block__checkbox-box" style="justify-content: flex-start; margin-bottom: .25rem">
                        <input
                                type="radio"
                                class="block__checkbox block__checkbox-start"
                                name="payment-type"
                                id="sbp"
                        />
                        <span class="block__checkbox_custom"></span>

                        <label class="block__text block__text_grey" for="payment-card">
                            <img style="width: 14px; height: 14px;" src="./images/icons/sbp_icon.png"
                                 alt="банковская карта"/>
                            СБП
                        </label>
                    </div>

                    <div class="block__checkbox-box"
                         style="justify-content: flex-start; margin-bottom: .25rem; margin-top: 16px;">
                        <input
                                type="checkbox"
                                class="block__checkbox block__checkbox-start"
                                name="payment-type"
                                checked
                                id="autopayment"
                        />
                        <span class="block__checkbox_custom"></span>

                        <label class="block__text block__text_grey" for="payment-card">
                            Подключить автоплатеж
                        </label>
                    </div>
                    <button class="block__button" type="submit">Оплатить
                        <img id="payment-form-button-icon" style="width: 14px; height: 14px;"
                             src="./images/icons/sbp_icon.png"
                             alt="банковская карта"/>
                    </button>
                </div>
                <img
                        alt="Платежные системы"
                        style="width: 80%; margin: 8px auto 16px auto; display: block"
                        src="./images/icons/cards_image.svg"/>
            </form>
        </div>

        <div class="block__info block__info_success hidden">
            <div class="block__content">
                <div class="block__header-box">
                    <p class="block__header block__header_success">
                        Оплата прошла успешно!
                    </p>
                    <!-- -->
                    <!-- <div class="logo"></div> -->
                </div>
                <div class="blok__ok"></div>
                <div class="block__promo">
                    <div class="block__promo_header">
                        <p class="block__promo_text">Добавьте к своему тарифу:</p>
                    </div>
                    <div class="block__link-box block__link-box-success">
                        <div
                                class="block__promo_link"
                                onclick="window.open('https://at-home.ru/app')"
                        >
                            <button
                                    class="block__promo_button"
                                    onclick="window.open('https://at-home.ru/app')"
                            ></button>
                            <p class="link link_orange">скачать приложение AT-HOME</p>
                            <div class="block__app"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="block__info block__info_success-tv hidden">
            <div class="block__content">
                <div class="block__header-box">
                    <p
                            class="block__header block__header_success block__header_options"
                    ></p>
                    <!-- <div class="logo"></div> -->
                </div>
                <div class="block__success-box">
                    <div class="block__ok block__ok_small"></div>
                    <div class="block__text-box">
                        <p class="block__text block__text_green block__text_success">
                            С Вашего Лицевого счета списана сумма за остаток месяца.
                        </p>
                    </div>
                </div>
                <div
                        class="block__promo_link block__promo_link_orange block__promo_link_shadow"
                        onclick="window.open('https://at-home.ru/app')"
                >
                    <button
                            class="block__promo_button app-link app-link_succsess"
                            onclick="window.open('https://at-home.ru/app')"
                    ></button>
                    <p class="link link_orange">скачать приложение AT-HOME</p>
                    <div class="block__app"></div>
                </div>
            </div>
        </div>

        <div class="block__info block__info_error-tv hidden">
            <div class="block__content">
                <div class="block__header-box">
                    <p class="block__header block__header_error">Оплата не прошла</p>
                    <!-- <div class="logo"></div> -->
                </div>
                <p
                        class="block__text block__text_red"
                        style="width: 200px; margin: auto; text-align: center"
                >
                    Что-то пошло не так, попробуйте еще раз
                </p>
                <div class="block__promo">
                    <div class="block__promo_header">
                        <p class="block__promo_text">Добавьте к своему тарифу:</p>
                    </div>
                    <div class="block__link-box block__link-box-error">
                        <div
                                onclick="window.open('https://at-home.ru/app')"
                                class="block__promo_link block__promo_link_orange"
                        >
                            <button class="block__promo_button"></button>
                            <p class="link link_orange">Скачать приложение</p>
                            <div class="block__app"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="block__info block__info_error-out hidden">
            <div class="block__content">
                <div class="block__header-box">
                    <p class="block__header block__header_error">
                        ТВ пакет не подключен
                    </p>
                    <!-- <div class="logo"></div> -->
                </div>
                <p
                        class="block__text block__text_red"
                        style="width: 200px; margin: auto; text-align: center"
                >
                    Не хватает денежных средств
                </p>
                <p class="block__text block__text_out">
                    Для активации ТВ пакета вам необходимо пополнить баланс. Перейдите
                    в Личный кабнет для оплаты и активации услуги.
                </p>

                <a
                        class="block__link-lk"
                        href="https://billing.at-home.ru/"
                        target="_blank"
                >
                    Личный кабинет</a
                >
            </div>
        </div>

        <div class="block__info block__info_promised hidden">
            <div class="block__content">
                <div class="block__header-box">
                    <p class="block__header block__header_bold">
                        Подключить отложенный платёж
                    </p>
                    <!-- <div class="logo"></div> -->
                </div>
                <p class="block__name">Стоимость подключения тарифной опции:</p>
                <form id="form-radio" class="form form_radio">
                    <div class="radio__box">
                        <label class="block__text radio__label" for="deferred-2days">
                            <input
                                    value="20"
                                    type="radio"
                                    name="promised-option"
                                    class="radio"
                                    id="deferred-2days"
                                    checked
                            />
                            <span class="radio__custom">
                    <span class="radio__custom_active"></span>
                  </span>
                            2 дня - бесплатно
                        </label>
                    </div>
                    <div class="radio__box">
                        <label class="block__text radio__label" for="deferred-3days">
                            <input
                                    value="30"
                                    type="radio"
                                    name="promised-option"
                                    class="radio"
                                    id="deferred-3days"
                            />
                            <span class="radio__custom"></span>
                            3 дня - 30 рублей
                        </label>
                    </div>
                    <div class="radio__box">
                        <label class="block__text radio__label" for="deferred-4days">
                            <input
                                    value="40"
                                    class="radio"
                                    type="radio"
                                    name="promised-option"
                                    id="deferred-4days"
                            />
                            <span class="radio__custom"></span>
                            4 дня - 40 рублей
                        </label>
                    </div>
                    <div class="radio__box">
                        <label class="block__text radio__label" for="deferred-5days">
                            <input
                                    value="50"
                                    type="radio"
                                    name="promised-option"
                                    class="radio"
                                    id="deferred-5days"
                            />
                            <span class="radio__custom"></span>
                            5 дней - 50 рублей
                        </label>
                    </div>
                    <button class="block__button" type="submit">Подключить</button>
                </form>
            </div>
        </div>

        <div class="block__info block__info_promised_error hidden">
            <div class="block__content">
                <div class="block__header-box">
                    <p class="block__header block__header_error block__header_small">
                        Отложенный платёж не подключен
                    </p>
                    <!-- <div class="logo"></div> -->
                </div>
                <p class="block__text block__text_red block__text_bordered">
                    Вы не можете активировать «Отложенный платеж», т.к. баланс
                    положительный
                </p>
                <div
                        class="block__promo_link block__promo_link_orange block__promo_link_shadow"
                        onclick="window.open('https://at-home.ru/app')"
                >
                    <button
                            class="block__promo_button app-link app-link_succsess"
                            onclick="window.open('https://at-home.ru/app')"
                    ></button>
                    <p class="link link_orange">скачать приложение AT-HOME</p>
                    <div class="block__app"></div>
                </div>
            </div>
        </div>

        <div class="block__info block__info_promised_success hidden">
            <div class="block__content">
                <div class="block__header-box">
                    <p class="block__header block__header_success block__header_bold">
                        Вы подключили “Отложенный платёж”
                    </p>
                    <!-- <div class="logo"></div> -->
                </div>
                <div class="block__success-box">
                    <div class="blok__ok blok__ok_small"></div>
                    <div class="block__text-box">
                        <p
                                class="block__text block__text_green block__text_success"
                        ></p>
                        <p class="block__text block__text_green block__text_success">
                            Доступ к услугам будет восстановлен в ближайшее время.
                        </p>
                    </div>
                </div>
                <div
                        class="block__promo_link block__promo_link_orange block__promo_link_shadow"
                        onclick="window.open('https://at-home.ru/app')"
                >
                    <button
                            class="block__promo_button app-link app-link_succsess"
                            onclick="window.open('https://at-home.ru/app')"
                    ></button>
                    <p class="link link_orange">скачать приложение AT-HOME</p>
                    <div class="block__app"></div>
                </div>
            </div>
        </div>
    </div>
</main>
<template class="template">
    <button class="block__promo_link" href="">
        <p class="link link__name"></p>
        <p class="link link_green"></p>
    </button>
</template>
<script src="./index.js"></script>
</body>
</html>
