<link rel="stylesheet" href="../static/css/user_view.css"/>
{% extends "base.html" %} {% block content %}
<div class="user_view_page">
    <div class="user_data_block">
        <div class="header_user">
            <img class="user_photo" src="../{{user.photo}}"/>
        </div>
        <div class="user_data">
            <div class="first_data_block">
                <div class="name_block">
                    <p class="data_header">Имя</p>
                    <div class="data_block">
                        <p class="data_text">{{ user.name }}</p>
                    </div>
                </div>
                <div class="login_block">
                    <p class="data_header">Логин</p>
                    <div class="data_block">
                        <p class="data_text">{{ user.login }}</p>
                    </div>
                </div>
            </div>
            <div class="surname_block">
                <p class="data_header">Фамилия</p>
                <div class="data_block data_bottom">
                    <p class="data_text">{{ user.surname }}</p>
                </div>
            </div>
            <div class="about_block">
                <p class="data_header">О себе</p>
                <div class="data_block data_bottom about_bottom">
                    <p class="data_text">{{ user.about }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="user_projects_block">
        {% for project in list_projects %}
        <div class="accordion list_project" id="accordionPanelsStayOpen{{ project.id }}">
            <div class="accordion-item project">
                <h2 class="accordion-header project_header" id="panelsStayOpen-heading{{ project.id }}">
                    <button class="accordion-button project_header_button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#panelsStayOpen-collapse{{ project.id }}" aria-expanded="true"
                            aria-controls="panelsStayOpen-collapse{{ project.id }}">
                        <div class="project_button_block_one">
                            <div class="project_logo_block">
                                <img src="../{{ project.logo }}" class="project_logo">
                            </div>
                            <div class="project_title_block">
                                <p class="project_title">{{ project.name }}</p>
                            </div>
                        </div>
                    </button>
                </h2>
                <div id="panelsStayOpen-collapse{{ project.id }}"
                     class="accordion-collapse collapse project_description_block"
                     aria-labelledby="panelsStayOpen-heading{{ project.id }}">
                    <div class="accordion-body project_description">
                        <div class="collaborator_block">
                            <div class="staff_block">
                                {% for user in project.staff %}
                                <div class="user">
                                    <a class="link_to_user" href="/user/{{ user.login }}">
                                        <img class="user_logo" src="../{{user.photo}}">
                                        <p class="user_names">{{user.name}}</p>
                                    </a>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="description_block">
                            <div class="description_header_block">
                                <p class="description_header_text">Описание</p>
                            </div>
                            <div class="description_block_text">
                                <p class="description_text">{{ project.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}