{% extends 'core.html' %}
{% block content%}
<div class="p-3 pb-md-4 mx-auto text-center">
    <h1 class="display-4 fw-normal text-body-emphasis">
        Выбери какие отношения ты хочешь со мной
    </h1>
    <p class="fs-5 text-body-secondary">
        Не Я предлагаю это всё, а ТЫ выбираешь и предлагаешь мне, мы обсуждаем <br>и в зависимости от того, что я решу, делаем или не делаем.
    </p>
</div>

<div class="row row-cols-1 row-cols-md-2 mb-3 text-center center">

    <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm card-min-height">
            <div class="card-header py-3">
                <h4 class="my-0 fw-normal">Дружба</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">
                    Никто никому ничего не должен
                </h1>
                <h2>
                    <small class="text-body-secondary fw-light">Вообще ничего</small>
                </h2>
                <p>Бесплатно</p>
                <p>Обо всём можно договориться словами через рот</p>
                <p>Начинается со знакомства, дружбы, узнавания потенциального друга</p>

                <h4>Этапы</h4>
                нейтрал<br>
                знакомый<br>
                приятель<br>
                друг<br>
            </div>
            <div class="card-footer">
                <!-- Button trigger modal -->
                <button type="button" class="w-100 btn btn-lg btn-outline-primary" data-bs-toggle="modal"
                    data-bs-target="#formModal" data-bs-theme="Дружба">
                    Просто начни
                </button>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm card-min-height">
            <div class="card-header py-3">
                <h4 class="my-0 fw-normal">Серьёзные отношения</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">
                    Всё как у взрослых
                </h1>
                <h2>
                    <small class="text-body-secondary fw-light">Ты же уже взрослый, правда?</small>
                </h2>
                <p>Требует вложений времени, сил, денег</p>
                <p>Обо всём можно договориться словами через рот</p>
                <p>Начинается со знакомства, дружбы, узнавания потенциального партнёра</p>

                <h4>Этапы</h4>
                нейтрал<br>
                знакомый<br>
                приятель<br>
                друг<br>
                партнёр-любовник<br>
                муж/жена<br>
                родственник<br>
            </div>
            <div class="card-footer">
                <!-- Button trigger modal -->
                <button type="button" class="w-100 btn btn-lg btn-outline-primary" data-bs-toggle="modal"
                    data-bs-target="#formModal" data-bs-theme="Серьёзные отношения">
                    Просто начни
                </button>
            </div>
        </div>
    </div>

</div>

<h2 class="display-6 text-center mb-4">Сравнение возможностей</h2>
<div class="table-responsive">
    <table class="table text-center">
        <thead>
            <tr>
                <th style="width: 34%"></th>
                <th style="width: 16, 5%">Дружба</th>
                <th style="width: 16, 5%">Серьёзные отношения</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th scope="row" class="text-start">Встречи</th>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Прогулки</th>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Совместный отдых</th>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Дружеские объятия</th>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">
                    Психологическая необременительная поддержка
                </th>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">
                    Нематериальная необременительная помощь
                </th>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Цветы</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Подарки</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Оплата такси</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Оплата кафе, ресторанов</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Оплата кино</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Держаться за руки</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Объятия возлюбленных</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Поцелуи</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">
                    Планирование совместной жизни, развития, доходов, расходов
                </th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Секс</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Планирование детей</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">
                    Покупка туристических путёвок
                </th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Покупка машины</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Покупка квартиры</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">Рождение детией</th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>

            <tr>
                <th scope="row" class="text-start">
                    Покупка земельного участка и дома
                </th>

                <td></td>

                <td>
                    <svg class="bi" width="24" height="24" role="img" aria-label="Included">
                        <use xlink:href="#check"></use>
                    </svg>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<h2 class="display-6 text-center mb-4">Либо ... рабочие отношения</h2>
<div class="row row-cols-1 row-cols-md-2 mb-3 text-center center">

    <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm card-min-height">
            <div class="card-header py-3">
                <h4 class="my-0 fw-normal">Психологическая работа</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">
                    Всё как у взрослых
                </h1>
                <h2>
                    <small class="text-body-secondary fw-light">Ты же уже можешь оплачивать чужой труд?</small>
                </h2>
                <p>5000 рублей в час</p>

                <h4>Темы:</h4>

                Личностный рост<br>
                Межличностные отношения<br><br>

                <h4>Приёмы:</h4>
                Наставничество<br>
                Психологическая консультация<br>
                Активное слушание<br>

            </div>
            <div class="card-footer">
                <!-- Button trigger modal -->
                <button type="button" class="w-100 btn btn-lg btn-outline-primary" data-bs-toggle="modal"
                    data-bs-target="#formModal" data-bs-theme="Психологическая работа">
                    Просто начни
                </button>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm card-min-height">
            <div class="card-header py-3">
                <h4 class="my-0 fw-normal">Разработка программного обеспечения</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">
                    Всё как у взрослых
                </h1>
                <h2>
                    <small class="text-body-secondary fw-light">Ты же уже можешь оплачивать чужой труд?</small>
                </h2>
                <p>5000 рублей в час</p>

                Разработка программного обеспечения<br>

            </div>
            <div class="card-footer">
                <!-- Button trigger modal -->
                <button type="button" class="w-100 btn btn-lg btn-outline-primary" data-bs-toggle="modal"
                    data-bs-target="#formModal" data-bs-theme="Разработка программного обеспечения">
                    Просто начни
                </button>
            </div>
        </div>
    </div>

</div>
{% endblock content %}