{% extends '@layout/_layout.twig' %}
{% import '@site/includes/_lists.twig' as lists %}
{% block title %}
{{ 'BDSM.fm - dating social network for BDSM people'|trans }}
{% endblock %}

{% block content %}
    <div class="search-container" id="pageContacts">
        <header class="search-header">
            <h2 class="search-title">{{ 'Contacts'|trans }}</h2>
        </header>
        <div class="search-inner">
            <div class="tabs">
                <ul id="tabs-contacts" class="tabs-list">
                    <li class="tabs-list-item active" data-hash="subscribes">
                        <span class="tabs-list-item-inner">{{ 'Subscribes'|trans }}&nbsp;&nbsp;<span
                                    class="tabs-list-item-counter">{{ subscribes.count }}</span></span>
                    </li>
                    <li class="tabs-list-item" data-hash="subscribers">
                        <span class="tabs-list-item-inner">{{ 'Subscribers'|trans }}&nbsp;&nbsp;<span
                                    class="tabs-list-item-counter">{{ subscribers.count }}</span></span>
                    </li>
                </ul>
            </div>
            <ul class="tabs-containers">
                <li class="tabs-container active">
                    <ul class="search-result search-result--subscribes search-result-friends">
                        {% for view in subscribes.views %}
                            <li class="search-result-elem result-elem--subs_i">
                                <a href="{{ path('profile',{id: view.user.profileId}) }}" class="search-result-link">
                                    <span data-id="{{ view.user.id }}" class="search-result-elem-btn-unsubscribes">{{ 'Unsubscribe'|trans }}</span>
                                    <div class="profile-blank-view">
                                        <div class="profile-blank-view-left">
                                            <div class="profile-avatar">
                                                <img src="{{ avatar_url(view.user,2,false) }}" alt="" class="profile-avatar-img">
                                            </div>
                                        </div>
                                        <div class="profile-blank-view-right">
                                            <div class="profile-main-info">
                                                <div class="profile-main-info-inner">
                                                    <span class="profile-level {{ lists.inThemeStatus(view.user.inTheme) }}"
                                                        data-values="[no-level, dominant, passive, sab, nooby, vip]"></span>
                                                    <span class="profile-username">
                                                        <span class="profile-username-value">{{ view.user.nickname }}</span>, 
                                                        <span class="profile-username-age">{{ view.user.age }}</span>
                                                    </span>
                                                    <span class="profile-online-status {{ view.user.isOnline ? 'active' : '' }}">
                                                        <span class="profile-online-status-on">{{ 'On Air'|trans }}</span>
                                                        <span class="profile-online-status-off">{{ user_last_action_time(view.user) }}</span>
                                                    </span>
                                                </div>
                                                <div class="profile-main-info-inner">
                                                    {% if view.user.status != '' %}
                                                        <div class="profile-user-emotions">
                                                            <span class="profile-user-emotions-input profile-user-emotions-input--view">{{ view.user.status }}</span>
                                                            <span class="profile-user-emotions-angle"></span>
                                                        </div>
                                                    {% else %}
                                                        <br>
                                                    {% endif %}
                                                    <div class="profile-user-add-info">
                                                        <p class="profile-user-add-info-str">{{ city_full_name(view.user.city) }}</p>
                                                        <p class="profile-user-add-info-str">
                                                            {{ lists.gender(view.user.gender) }}.
                                                            {% if view.user.orientation != 0 %}
                                                                {{ lists.orientation(view.user.orientation) }}.
                                                            {% endif %}
                                                            {% if view.user.inTheme != 0 %}
                                                                {{ lists.inTheme(view.user.inTheme) }}.
                                                            {% endif %}
                                                            {% if view.user.experience != 0 %}
                                                                {% set experience = user_experience(view.user) %}
                                                                {% trans %}Experience {{ experience }} year.{% plural experience %}Experience {{ experience }} years.{% endtrans %}
                                                            {% endif %}
                                                            {% if view.user.maritalStatus != 0 %}
                                                                {{ lists.maritalStatus(view.user.maritalStatus) }}
                                                            {% endif %}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a href="{{ path('messages',{id: view.user.profileId}) }}"
                                    class="button button--md button--subscribes">
                                    <span class="button-inner">{{ 'Write a message' | trans }}</span>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
                <li class="tabs-container">
                    <ul class="search-result search-result--subscribes search-result-friends">
                        {% for view in subscribers.views %}
                            <li class="search-result-elem result-elem--subs_me{% if view.subscribedUser.hasSubscribe(globals.id) %}is-subscriber{% endif %}">
                                <a href="{{ path('profile',{id: view.subscribedUser.profileId}) }}" class="search-result-link">
                                    <span data-id="{{ view.subscribedUser.id }}"
                                        data-subscribe-text="{{ 'Подписаться'|trans }}"
                                        data-unsubscribe-text="{{ 'Unsubscribe'|trans }}"
                                        class="search-result-elem-btn-subscribes c-button c-button--black {% if view.subscribedUser.hasSubscribe(globals.id) %}is-active{% endif %}">
                                         {% if view.subscribedUser.hasSubscribe(globals.id) %}
                                            {{ 'Unsubscribe'|trans }}
                                        {% else %}
                                            {{ 'Подписаться'|trans }}
                                        {% endif %} 
                                    </span>
                                    <div class="profile-blank-view">
                                        <div class="profile-blank-view-left">
                                            <div class="profile-avatar">
                                                <img src="{{ avatar_url(view.subscribedUser,2,false) }}" alt="" class="profile-avatar-img">
                                            </div>
                                        </div>
                                        <div class="profile-blank-view-right">
                                            <div class="profile-main-info">
                                                <div class="profile-main-info-inner">
                                                    <span class="profile-level {{ lists.inThemeStatus(view.subscribedUser.inTheme) }}"
                                                        data-values="[no-level, dominant, passive, sab, nooby, vip]"></span>
                                                    <span class="profile-username">
                                                        <span class="profile-username-value">{{ view.subscribedUser.nickname }}</span>, 
                                                        <span class="profile-username-age">{{ view.subscribedUser.age }}</span>
                                                    </span>
                                                    <span class="profile-online-status {{ view.subscribedUser.isOnline ? 'active' : '' }}">
                                                        <span class="profile-online-status-on">{{ 'On Air'|trans }}</span>
                                                        <span class="profile-online-status-off">{{ user_last_action_time(view.subscribedUser) }}</span>
                                                    </span>
                                                </div>
                                                <div class="profile-main-info-inner">
                                                    {% if view.subscribedUser.status != '' %}
                                                        <div class="profile-user-emotions">
                                                            <span class="profile-user-emotions-input profile-user-emotions-input--view">{{ view.subscribedUser.status }}</span>
                                                            <span class="profile-user-emotions-angle"></span>
                                                        </div>
                                                    {% else %}
                                                        <br>
                                                    {% endif %}
                                                    <div class="profile-user-add-info">
                                                        <p class="profile-user-add-info-str">{{ city_full_name(view.subscribedUser.city) }}</p>
                                                        <p class="profile-user-add-info-str">
                                                            {{ lists.gender(view.subscribedUser.gender) }}.
                                                            {% if view.subscribedUser.orientation != 0 %}
                                                                {{ lists.orientation(view.subscribedUser.orientation) }}.
                                                            {% endif %}
                                                            {% if view.subscribedUser.inTheme != 0 %}
                                                                {{ lists.inTheme(view.subscribedUser.inTheme) }}.
                                                            {% endif %}
                                                            {% if view.subscribedUser.experience != 0 %}
                                                                {% set experience = user_experience(view.subscribedUser) %}
                                                                {% trans %}Experience {{ experience }} year.{% plural experience %}Experience {{ experience }} years.{% endtrans %}
                                                            {% endif %}
                                                            {% if view.subscribedUser.maritalStatus != 0 %}
                                                                {{ lists.maritalStatus(view.subscribedUser.maritalStatus) }}
                                                            {% endif %}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a href="{{ path('messages',{id: view.user.profileId}) }}"
                                    class="button button--md button--subscribes">
                                    <span class="button-inner">{{ 'Write a message' | trans }}</span>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}