{% extends 'layouts/base.html' %}

{% block content %}
    <div class="card border-0 shadow mb-4">
        <div class="card-body">
            <h1 class="h4" style="margin-bottom: 40px;">Информация об аккаунте</h1>
            <div class="row">
                <div class="col-3">
                    <div style="height: 100%; width: 100%;">
                        <img src="{{ account.profile_photo_url }}" height="100%" width="100%" alt="Фото профиля">
                    </div>
                    {% if owner %}
                        <label for="file-upload" class="btn btn-gray-50" style="margin-top: -120px; margin-left: 20%; width: 60%;">
                            <i class="fa fa-upload"></i> Загрузить фото
                        </label>
                        <input type="file" form="photoform" style="display: none;" accept="image/png, image/jpg" class="btn form-control-file" id="file-upload" value="Выбрать файл" name="file" onchange="document.getElementById('photoform').submit();">
                        <form method="POST" enctype="multipart/form-data" id="photoform">
                            <input type="hidden" name="action" value="upload_photo">
                            {% csrf_token %}
                        </form>
                    {% endif %}
                </div>
                <div class="col-9">
                    <h3>
                        {{ account.surname }} {{ account.name }}
                        <span style="margin-left: 15px; margin-bottom: 20px;" class="badge bg-{% if account.userinfo.activity_status == online_status %}success{% else %}secondary{% endif %}">{{ account.userinfo.activity_status }}</span>
                    </h3>
                    <form method="POST">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="save_data" />
                    <table>
                        <tr>
                            <td>
                                <h2><i class="fa fa-user"></i></h2>
                            </td>
                            <td><div style="width: 20px;"></div></td>
                            <td>
                                <p style="padding-top: 8px; font-size: 24px;">{{ user.username }}</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h2><i class="fa fa-calendar"></i></h2>
                            </td>
                            <td><div style="width: 20px;"></div></td>
                            <td>
                                <p style="padding-top: 8px; font-size: 24px;">{{ account.date_joined.date }}</p>
                            </td>
                        </tr>
                        {% if owner %}
                            <tr>
                                <td>
                                    <h2><i class="fa fa-users"></i></h2>
                                </td>
                                <td><div style="width: 20px;"></div></td>
                                <td>
                                    <a href="https://oauth.vk.com/authorize?client_id=8123759&redirect_uri=https://platform.sprinthub.ru/vk_auth&display=page&response_type=token&v=5.59';"><img style="width: 40px; height: 40px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/VK_Compact_Logo_%282021-present%29.svg/1200px-VK_Compact_Logo_%282021-present%29.svg.png"></a>
                                    {% if account.vk_id %}
                                       <div style="margin-top: -15px; margin-left: 30px;"><i style="color: green;" class="fa fa-check-circle"></i></div>
                                    {% endif %}
                                    <a href="https://oauth.yandex.ru/authorize?response_type=code&client_id=38f1906e99de4810bd79828f420ba885&redirect_uri=https://platform.sprinthub.ru/yandex_auth"><img style="width: 40px; height: 40px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Yandex_icon.svg/2048px-Yandex_icon.svg.png"></a>
                                    {% if account.yandex_id %}
                                       <div style="margin-top: -15px; margin-left: 30px;"><i style="color: green;" class="fa fa-check-circle"></i></div>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endif %}
                        <tr>
                            <td>
                                <h2><i class="fa fa-at"></i></h2>
                            </td>
                            <td><div style="width: 20px;"></div></td>
                            <td>
                                {% if owner %}
                                    <input placeholder="email" type="text" name="email" value="{% if account.email %}{{ account.email }}{% endif %}" style="width: 400px;">
                                {% else %}
                                <p style="padding-top: 8px; font-size: 24px;">{{ account.email }}</p>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h2><i class="fa fa-telegram"></i></h2>
                            </td>
                            <td><div style="width: 20px;"></div></td>
                            <td>
                                {% if owner %}
                                    <input placeholder="telegram username" type="text" name="telegram_username" value="{% if account.telegram_username %}{{ account.telegram_username }}{% endif %}" style="width: 400px; margin-bottom: 5px;"><br>
                                    <input placeholder="telegram id" type="number" name="telegram_id" value="{% if account.telegram_id %}{{ account.telegram_id }}{% endif %}" style="width: 400px;"> <a style="color: blue;" href="https://t.me/getmyid_bot">Узнать можно в боте</a>
                                {% else %}
                                    {% if account.telegram_username %}
                                        <a style="padding-top: 8px; font-size: 24px;" href="https://t.me/{{ account.telegram_username }}">{{ account.telegram_username }}</a>
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h2><i class="fa fa-star"></i></h2>
                            </td>
                            <td><div style="width: 20px;"></div></td>
                            <td>
                                {% for project in account.projects %}
                                    {{ project.name }}<br>
                                {% endfor %}
                            </td>
                        </tr>
                        {% if owner %}
                        <tr>
                            <td></td><td></td>
                            <td>
                                <a href="/logout" class="btn btn-primary" style="margin-right: 5px;">Выход из аккаунта</a><button type="submit" class="btn btn-success">Сохранить данные</button>
                            </td>
                        </tr>
                        {% endif %}
                    </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow mb-4">
        <div class="card-body">
            <h1 class="h4" style="margin-bottom: 40px;">Сменить пароль</h1>
            <div class="row">
                <div class="col-4">
                    {% if err %}
                        <div class="alert alert-danger" role="alert">
                          Пароли не совпадают
                        </div>
                    {% endif %}
                    <form method="POST">
                        {% csrf_token %}
                        <input class="form-control" name="password" type="password" placeholder="Новый пароль">
                        <input style="margin-top: 5px; margin-bottom: 5px;" class="form-control" name="repeat" type="password" placeholder="Повтори пароль">
                        <button type="submit" name="action" value="change_password" class="btn btn-primary">Сохранить</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}