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

{% load staticfiles %}

{% block content %}
    {% include 'partials/header.html' %}
    
    <div class="container mainScore mainBlock2">
        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-3 divCol3">
                    <div class="avatar">
                            <div class="avatarInset">
                                <img src="{% static 'img/profile.jpg' %}" alt="profile-image">
                            </div>
                        </div>
                    <div class="menuUser disTab">
                        <ul>
                            <li class="icon_um1">
                                <a href="javascript:void(0)">
                                    редактировать профиль
                                </a>
                                <span></span>
                            </li>
                            <li class="icon_um2">
                                <a href="javascript:void(0)">
                                    пригласить в группу
                                </a>
                                <span></span>
                            </li>
                            <li class="icon_um3">
                                <a href="javascript:void(0)">
                                    написать сообщение
                                </a>
                                <span></span>
                            </li>
                            <li class="icon_um4">
                                <a href="javascript:void(0)">
                                    предложить заказ
                                </a>
                                <span></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-9 divCol9">
                    <div class="col-lg-4">
                        <p class="nameUser">
                            Иванов Петр Иванович [ivanov_petr]
                        </p>
                        <p class="cityUser">Россия, Москва</p>
                        <p class="navv">На сайте 8 лет и 3 месяца</p>
                        <div class="statusUser">Свободен</div>
                        <a href="javascript:void(0)" class="showCon">показать контакты</a>
                    </div>
                    <div class="col-lg-4">
                        <div class="dashedCol4">
                            <p class="specUser">
                                Специализации:
                            </p>
                            <div class="insetSpec">
                                <span>Интерьеры</span>
                                <span>2-й</span>
                            </div>
                            <div class="insetSpec">
                                <span>Визуализация/3D</span>
                                <span>45-й</span>
                            </div>
                            <div class="insetSpec">
                                <span>Экстерьеры</span>
                                <span>10-й</span>
                            </div>
                            <div class="insetSpec">
                                <span>Архитектура</span>
                                <span>3-й</span>
                            </div>
                            <div class="insetSpec">
                                <span>3D Моделирование</span>
                                <span>100-й</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <ul class="rettList">
                            <li><a href="javascript:void(0)">Рейтинг: <span> 0</span></a></li>
                            <li><a href="javascript:void(0)">Безопасные сделки: <span> 0</span></a></li>
                            <li>
                                <a href="javascript:void(0)">
                                    Отзывы: 
                                    <span> + 0</span>
                                    <small> 0</small>
                                    <mark> - 0</mark>
                                </a>
                            </li>
                        </ul>
                        <div class="sroUser">
                            <div class="iconSRO"></div>
                            <p>Есть допуск СРО</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="profileTabs2">
                        <ul class="nav nav-tabs nav-justified">
                            <li role="presentation" class="active">
                                <a href="#tab11" data-toggle="tab">Портфолио</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab12" data-toggle="tab">Готовые проекты</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab13" data-toggle="tab">Резюме / Квалификация</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab14" data-toggle="tab">Отзывы</a>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="tab-content">
                    <div id="tab11" class="tab-pane fade in active">
                        <div class="col-lg-9">
                            <p class="addWork">
                                <a href="#">Добавить работу</a>
                            </p>
                        </div>
                        
                        <div class="galleryWork2 disTab">
                            {% for p in user.portfolio.all %}
                                <div class="col-lg-4">
                                    <div class="insetCol box-sizing disTab">
                                        <div class="imgGal">
                                            <div class="imgFigure"></div>
                                        </div>
                                    </div>
                                    <div class="insetCol2 box-sizing disTab">
                                        <p>{{ p.name }}</p>
                                        <div class="buttonsImg" disTab>
                                            <div class="insetBI insetBI1">
                                                <i class="fa fa-pencil"></i>
                                            </div>
                                            <div class="insetBI insetBI2">
                                                <i class="fa fa-times"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}

                        </div>
                        
                        <div class="col-lg-9 col-lg-offset-3">
                            <div class="linkElse">
                                <a href="javascript:void(0)" class="showElse">показать еще</a>
                            </div>
                        </div>
                    </div>
                    
                    <div id="tab12" class="tab-pane fade">
                        <div class="col-lg-9">
                            <p class="addWork">
                                <a href="#">Добавить проект</a>
                            </p>
                        </div>
                        <div class="galleryWork2 disTab">
                            <div class="col-lg-4">
                                <div class="insetCol box-sizing disTab">
                                    <div class="imgGal">
                                        <div class="imgFigure"></div>
                                    </div>
                                    <div class="cenaImg box-sizing">
                                        <div class="cenaImgInset">
                                            35 000 <i class="fa fa-rub"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="insetCol2 box-sizing disTab">
                                    <p>
                                        Визуализация 
                                        загородного
                                        дома 1500m2
                                    </p>
                                    <div class="buttonsImg" disTab>
                                        <div class="insetBI insetBI1">
                                            <i class="fa fa-pencil"></i>
                                        </div>
                                        <div class="insetBI insetBI2">
                                            <i class="fa fa-times"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-9 col-lg-offset-3">
                            <div class="linkElse">
                                <a href="javascript:void(0)" class="showElse">показать еще</a>
                            </div>
                        </div>
                    </div>
                    
                    <div id="tab13" class="tab-pane fade">
                        <div class="col-lg-9 resume">
                            <div class="upload2 up-l1">
                                <input type="file" name="upload">
                                <p>Загрузить резюме</p>
                            </div>
                            <div class="upload2 up-l2">
                                <input type="file" name="upload">
                                <p>Загрузить файл</p>
                            </div>
                        </div>
                        <div class="col-lg-9 resume-block">
                            <div class="block-is box-sizing">
                                <div class="block-i">
                                    <img src="img/profile.jpg" alt="profile-image">
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="top-summary">
                                    <p class="name-summ">Иванов Петр Сергеевич</p>
                                    <a href="javascript:void(0)" class="download-summ">скачать резюме</a>
                                    <p class="who-summ">
                                        Мужчина, 24 года, 14 февраля 1991
                                    </p>
                                    <div class="list-summ-block">
                                        <div class="col-lg-4">
                                            <ul class="list-summ">
                                                <li>brilliantov.me</li>
                                                <li>alex@brilliantov.me</li>
                                                <li>+7 968 009 19 99</li>
                                                <li>Россия, Москва</li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 col-lg-offset-2">
                                            <div class="dashedCol4">
                                                <p class="specUser">
                                                    Специализации:
                                                </p>
                                                <div class="insetSpec">
                                                    <span>Интерьеры</span>
                                                    <span>2-й</span>
                                                </div>
                                                <div class="insetSpec">
                                                    <span>Визуализация/3D</span>
                                                    <span>45-й</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 wr-inset-pluss">
                                <div class="pluss-block">
                                    <div class="pluss">
                                        <p>Что я умею 1?</p>
                                        <span>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut perspiciatis ducimus ullam saepe sed! Architecto sit, repellendus illo ut odio amet facilis distinctio veniam nulla consequatur a sequi deleniti aperiam!
                                        </span>
                                    </div>
                                    <div class="pluss">
                                        <p>Что я умею 2?</p>
                                        <span>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut perspiciatis ducimus ullam saepe sed! Architecto sit, repellendus illo ut odio amet facilis distinctio veniam nulla consequatur a sequi deleniti aperiam!
                                        </span>
                                    </div>
                                    <div class="pluss">
                                        <p>Что я умею 3?</p>
                                        <span>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut perspiciatis ducimus ullam saepe sed! Architecto sit, repellendus illo ut odio amet facilis distinctio veniam nulla consequatur a sequi deleniti aperiam!
                                        </span>
                                    </div>
                                </div>
                                <div class="gal-pluss">
                                    <div class="inset-gp">
                                        <p class="title-gp">Дипломы / Сертификаты</p>
                                        <div class="upload2 up-l3">
                                            <input type="file" name="upload">
                                            <p>Загрузить файл</p>
                                        </div>
                                        <div class="galleryWork2 gal-iss disTab">
                                            
                                            <div class="col-lg-4">
                                                <div class="insetCol box-sizing disTab">
                                                    <div class="imgGal">
                                                        <div class="imgFigure"></div>
                                                    </div>
                                                </div>
                                                <div class="insetCol2 box-sizing disTab">
                                                    <p>
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                    </p>
                                                    <div class="buttonsImg" distab="">
                                                        <div class="insetBI insetBI2">
                                                            <i class="fa fa-times"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="col-lg-4">
                                                <div class="insetCol box-sizing disTab">
                                                    <div class="imgGal">
                                                        <div class="imgFigure"></div>
                                                    </div>
                                                </div>
                                                <div class="insetCol2 box-sizing disTab">
                                                    <p>
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                    </p>
                                                    <div class="buttonsImg" distab="">
                                                        <div class="insetBI insetBI2">
                                                            <i class="fa fa-times"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <div class="inset-gp">
                                        <p class="title-gp">Допуск СРО</p>
                                        <div class="upload2 up-l3">
                                            <input type="file" name="upload">
                                            <p>Загрузить файл</p>
                                        </div>
                                        <div class="galleryWork2 gal-iss disTab">
                                            
                                            <div class="col-lg-4">
                                                <div class="insetCol box-sizing disTab">
                                                    <div class="imgGal">
                                                        <div class="imgFigure"></div>
                                                    </div>
                                                </div>
                                                <div class="insetCol2 box-sizing disTab">
                                                    <p>
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                    </p>
                                                    <div class="buttonsImg" distab="">
                                                        <div class="insetBI insetBI2">
                                                            <i class="fa fa-times"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="col-lg-4">
                                                <div class="insetCol box-sizing disTab">
                                                    <div class="imgGal">
                                                        <div class="imgFigure"></div>
                                                    </div>
                                                </div>
                                                <div class="insetCol2 box-sizing disTab">
                                                    <p>
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                    </p>
                                                    <div class="buttonsImg" distab="">
                                                        <div class="insetBI insetBI2">
                                                            <i class="fa fa-times"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="tab14" class="tab-pane fade">
                        <div class="new-comm-44">
                            <div class="col-lg-12">
                                <p class="nameComm">
                                    <a href="#">Иванов Петр Иванович</a> 
                                </p>
                                <span class="dateComm44">
                                    Безопасная сделка
                                </span>
                                <div class="stars box-sizing">
                                    <span class="glyphicon glyphicon-star starAct" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star starAct" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star starAct" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                    <a href="#">положительный отзыв</a>
                                </div>
                                <p class="textComm44">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    {% include 'partials/footer.html' %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}