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

{% load specializtions_tags %}
{% load thumbnail %}

{% 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">
                            {% if team.owner.avatar %}
                                {% thumbnail team.owner.avatar "265x264" crop="center" as im %}
                                    <img src="{{ im.url }}" alt="profile-image">
                                {% endthumbnail %}
                            {% else %}
                                {% if team.owner.gender == "female" %}
                                    <img src="{% static 'img/avatars/avatar-female.jpg' %}"
                                         alt="profile-image">
                                {% else %}
                                    <img src="{% static 'img/avatars/avatar-male.jpg' %}"
                                         alt="profile-image">
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>

                    <div class="menuUser disTab">
                        {% if request.user == team.owner %}
                            <a href="{% url 'users:contractor-filter' %}" class="add-man">
                                добавить участника
                            </a>
                        {% endif %}

                        <div class="block-users">
                            <p>Состав группы</p>

                            {% for c in team.contractors.all %}
                                <div class="message-new">
                                    <div class="imgMess">
                                        {% if c.avatar %}
                                            {% thumbnail c.avatar "60x60" crop="center" as im %}
                                                <img src="{{ im.url }}" alt="mess-image">
                                            {% endthumbnail %}
                                        {% else %}
                                            {% if c.gender == "female" %}
                                                <img src="{% static 'img/avatars/avatar-female.jpg' %}"
                                                     alt="profile-image">
                                            {% else %}
                                                <img src="{% static 'img/avatars/avatar-male.jpg' %}"
                                                     alt="profile-image">
                                            {% endif %}
                                        {% endif %}
                                    </div>

                                    <p class="nameMess" style="float: none">
                                        <a href="{% url 'users:contractor-profile' c.pk %}">{{ c.get_full_name }}</a>
                                    </p>

                                    <p><span>{{ c.get_popular_specialization }}</span></p>
                                </div>
                            {% empty %}
                                В группе пока нет участников
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="col-lg-9 divCol9">
                    <div class="col-lg-4">
                        <p class="nameUser">{{ team.name }}</p>
                        <p class="cityUser">{{ team.owner.get_location }}</p>
                        <p class="navv">На сайте {{ team.created }}</p>

                        <p class="navv">
                            Кол-во человек: <span>{{ team.contractors.count }}</span>
                        </p>

                        <p class="navv">
                            Выполненных проектов: <span>{{ completed_project_count }}</span>
                        </p>

                        {% if team.owner.contractor_status == 'free' %}
                            <div class="statusUser">Свободен</div>
                        {% else %}
                            <div class="statusUser busy">Занят</div>
                        {% endif %}

                        <a href="{% url 'chat:chat-user' %}?user_id={{ team.owner.pk }}#user{{ team.owner.pk }}"
                           class="new-prop new-prop2 new-prop3">написать сообщение</a>
                    </div>

                    <div class="col-lg-4">
                        {% specialization_team_widget team.pk %}
                    </div>

                    <div class="col-lg-4">
                        {% ratings_team_widget team.pk %}

                        {% if team.owner.cro %}
                            <div class="sroUser">
                                <div class="iconSRO"></div>
                                <p>Есть допуск СРО</p>
                            </div>
                        {% endif %}
                    </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>
                        </ul>
                    </div>
                </div>

                <div class="tab-content">
                    <div id="tab11" class="tab-pane fade in active">
                        <div class="galleryWork2 disTab col-lg-9 -portfolios-container">
                            <script type="text/x-template" class="-portfolio-item-templ">
                                <div class="col-lg-4">
                                    <div class="insetCol box-sizing disTab">
                                        <div class="imgGal"
                                             style="background:rgba(0, 0, 0, 0) url('<%- portfolio.photos[0].img %>') no-repeat scroll center center / cover">
                                            <a class="open-modal-image" href="<%- portfolio.photos[0].img %>">
                                                <div class="imgFigure"></div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="insetCol2 box-sizing disTab text-center">
                                        <a href="<%- portfAbsUrl %>"><%- trunc({length: 50}, portfolio.name) %></a>
                                    </div>
                                </div>
                            </script>
                        </div>

                        <div class="col-lg-9 col-lg-offset-3 -more-portfolios-btn">
                            <div class="linkElse">
                                <a href="#" onclick="loadMorePortfolios(); return false" class="showElse">показать
                                    еще</a>
                            </div>
                        </div>
                    </div>

                    <div id="tab12" class="tab-pane fade">
                        <div class="galleryWork2 disTab -work-sells-container">
                            <script type="text/x-template" class="-work-sell-item-templ">
                                <div class="col-lg-4">
                                    <div class="insetCol box-sizing disTab">
                                        <div class="imgGal"
                                             style="background:rgba(0, 0, 0, 0) url('<%- workSell.photos[0].img %>') no-repeat scroll center center / cover ;">
                                            <a class="open-modal-image" href="<%- workSell.photos[0].img %>">
                                                <div class="imgFigure"></div>
                                            </a>
                                        </div>

                                        <div class="cenaImg box-sizing">
                                            <div class="cenaImgInset">
                                                <%- workSell.budget %> <i class="fa fa-rub"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="insetCol2 box-sizing disTab">
                                        <a href="<%- workSellAbsUrl %>"><%- trunc({length: 50}, workSell.name) %></a>
                                    </div>
                                </div>
                            </script>
                        </div>

                        <div class="col-lg-9 col-lg-offset-3 -more-work-sells-btn">
                            <div class="linkElse">
                                <a href="#" onclick="loadMoreWorkSells(); return false" class="showElse">показать
                                    еще</a>
                            </div>
                        </div>
                    </div>

                    <div id="tab13" class="tab-pane fade">
                        {% for review in reviews %}
                            <div class="new-comm-44">
                                <div class="col-lg-12">
                                    <p class="nameComm">
                                        <a href="#">{{ review.get_sender }}</a>
                                    </p>

                                    {% if review.project.deal_type == 'secure_deal' %}
                                        <span class="dateComm44">Безопасная сделка</span>
                                    {% endif %}

                                    <div class="stars box-sizing">
                                        <a href="#">положительный отзыв</a>
                                    </div>

                                    <p class="textComm44">
                                        {{ review.text|safe }}
                                    </p>
                                </div>
                            </div>
                        {% empty %}
                            <div class="new-comm-44">
                                <p style="text-align: center;">Отзывов пока нет</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>


                <div>
                    {% include 'partials/footer.html' %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block js_block %}
    <script type="text/javascript">
        (function () {
            // Pagination ---------------------------------------------------


            var $portfoliosContainer = $('.-portfolios-container').first()
            var portfolioItemTempl = _.template($portfoliosContainer.find('.-portfolio-item-templ').first().html())
            var $morePortfBtn = $('.-more-portfolios-btn').first()
            var portfAbsUrl = '/projects/portfolio/'

            var $workSellsContainer = $('.-work-sells-container').first()
            var workSellItemTempl = _.template($workSellsContainer.find('.-work-sell-item-templ').first().html())
            var $moreWorkSellsfBtn = $('.-more-work-sells-btn').first()
            var workSellAbsUrl = '/work_sell/'

            var teamId =
            {{ team.pk }}
            var contractorIds = [{{ team.owner.pk }}]

            var portfUrl = new URI('/api/portfolios/')
            var workSellUrl = new URI('/api/work-sells/')
            var pageSize = {% if TESTING %}99999{% else %}9{% endif %}

            $.get('/api/teams/' + teamId + '/').then(function (res) {
                Array.prototype.push.apply(contractorIds, _.map(function (contractor) {
                    return contractor.id
                }, res.contractors))
            })
                    .then(loadMorePortfolios)
                    .then(loadMoreWorkSells)

            function loadMorePortfolios() {
                var query = portfUrl.query(true)

                portfUrl.setQuery('user__id__in', _.join(',', contractorIds))
                portfUrl.setQuery('page_size', pageSize)
                portfUrl.setQuery('page', query.page ? Number(query.page) + 1 : 1)

                $.get(portfUrl.href())
                        .then(function (res) {
                            _.each(function (portfolio) {
                                $portfoliosContainer.append(portfolioItemTempl({
                                    portfolio: portfolio,
                                    portfAbsUrl: portfAbsUrl + portfolio.id + '/',
                                    trunc: _.truncate,
                                }))
                            }, res.results)

                            if (!res.next)
                                $morePortfBtn.css('display', 'none')
                        })

                        .then(function () {
                            $('.open-modal-image').magnificPopup({type: 'image'})
                        })
            }

            function loadMoreWorkSells() {
                var query = workSellUrl.query(true)

                workSellUrl.setQuery('team', teamId)
                workSellUrl.setQuery('page_size', pageSize)
                workSellUrl.setQuery('page', query.page ? Number(query.page) + 1 : 1)

                $.get(workSellUrl.href()).then(function (res) {
                    _.each(function (ws) {
                        $workSellsContainer.append(workSellItemTempl({
                            workSell: ws,
                            workSellAbsUrl: workSellAbsUrl + ws.id + '/',
                            trunc: _.truncate,
                        }))
                    }, res.results)

                    if (!res.next)
                        $moreWorkSellsfBtn.css('display', 'none')
                })
            }

            window.loadMorePortfolios = loadMorePortfolios
            window.loadMoreWorkSells = loadMoreWorkSells


            // Persistent Bootstrap tabs --------------------------------------


            $('a[data-toggle="tab"][href="' + window.location.hash + '"]').tab('show')

            $('a[data-toggle="tab"]').on('click', function ($evt) { // Better handle "shown.bs.tab" event?
                window.location.hash = $(this).attr('href')
            })
        }())
    </script>
{% endblock %}