{% extends "mobile-layout.html" %} {% macro sentence_case(text) %} {{ text[0]|upper}}{{text[1:] }} {% endmacro %} {% block header %}

<article class="page-header d-flex row-gap align-items-center" style="padding: 10px">
    <div style="width: 100%;">
        <form action="/people" method="GET" class="row" style="margin: 0px;">
            <input type="text" name="user_search" class="search-field" style="width: 83%;" {% if search_query=="" %} placeholder="Search in people" {% else %} placeholder="{{search_query}}" {% endif %}>
            <button type="submit" value="Search" class="btn-search" style="width: 17%;">
                    <svg version="1.1" id="Layer_1" width="22" height="22" fill=#2D355F
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                        <path
                            d="M90.4,83L75.8,68.5C87.2,53.9,86,33.1,72.9,20C66,13.1,56.8,9.3,47,9.3S28,13.1,21.1,20S10.4,36.1,10.4,45.9s3.8,19,10.7,25.9S37.2,82.5,47,82.5c8.1,0,16.1-2.7,22.5-7.8L84,89.4c0.9,0.9,2,1.3,3.2,1.3s2.3-0.5,3.2-1.3C92.2,87.7,92.2,84.8,90.4,83z M74.6,45.9c0,7.4-2.9,14.3-8.1,19.5S54.3,73.5,47,73.5s-14.3-2.9-19.5-8.1s-8.1-12.2-8.1-19.5c0-7.4,2.9-14.3,8.1-19.5s12.2-8.1,19.5-8.1c7.4,0,14.3,2.9,19.5,8.1S74.6,38.5,74.6,45.9z" />
                    </svg>
                </button>
        </form>
    </div>
</article>

{% endblock header %} {% block content %}

<script>
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

<div class="row row-gap d-flex align-items-center" style="margin-left: 5px;">
    <h6 class="label">SORT:</h6>
    <form id="sortby">
        <div class="select-wrapper"><select id="SortByDropdown" name="sortby" class="dropdown-sml" onchange="searchSort()">
                <option {% if index==0 %} selected {% endif %} value="Stars">Stars</option>
                <option {% if index==1 %} selected {% endif %} value="Comments">Comments</option>
            </select>
        </div>
    </form>
</div>

{% if people|length == 0 %}
<article class="empty-state">
    We weren't able to find any users matching your search
</article>
{% endif %}
{% for user in people %}
<article class="content-section no-underline d-flex align-items-center" style="padding-left: 10px; padding-right: 0px; margin-bottom: 10px;" href="{{ url_for('profile_bp.user_profile', username=user.username) }}">
    <div style="width: 60%;">
        <div class="row-gap d-flex align-items-center">
            <h4 class="bold no-margin-bottom" style="width: 40px;">{{ loop.index }}</h4>
            <img class="rounded-circle" style="width:40px; height:40px;" src="{{ url_for('static', filename='profile_pics/' + user.image_file) }}">
            <div>
                <a href="{{ url_for('profile_bp.user_profile', username=user.username) }}" class="bold" style="color: white;">
                    <h6 class="bold no-margin-bottom">{{ sentence_case(user.username) }}</h6>
                </a>
                <h6 class="grey-text no-margin-bottom">{{ user.get_post_count() }} posts</h6>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-end align-items-center" style="width: 40%;">
        <div class="row-gap d-flex justify-content-end align-items-center">
            <div class="row-gap d-flex justify-content-end align-items-center" style="margin-right: 20px;">
                <a class="row-gap justify-content-end align-items-center" style="margin-right: 5px;" href="#" data-toggle="tooltip" title="Stars receieved">
                    <h6 class="bold no-margin-bottom">
                        {% if user.star_count > 0 %} {{ user.star_count }} {% else %} 0 {% endif %}
                    </h6>
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#FFB900" class="bi bi-star-fill" viewBox="0 0 16 16">
                    <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                </svg>
                </a>
                <a class="row-gap justify-content-end align-items-center" href="#" data-toggle="tooltip" title="Comments receieved">
                    <h6 class="bold no-margin-bottom">{{ user.comment_count }}</h6>
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#00D1FF" class="bi bi-chat-fill" viewBox="0 0 16 16">
                    <path
                    d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z" />
                </svg>
                </a>
            </div>
        </div>
    </div>
</article>
{% endfor %} {% endblock content %} {% block sidebar %}
<ul class="list-group">
    <h6 class="label" style="margin-top: 12px; margin-bottom: 12px;">TARGET USER GROUPS:</h6>
    <div class="list-group-item row-gap" style="background: white;">
        <div class="d-flex align-items-center black-text" style="width:65%;">
            Everyone
        </div>
        <div class="d-flex justify-content-end" style="width: 30%;">
            <div class="highlight-box" style="background-color:#e8ebf3; padding: 8px 15px;">
                <h6 class="bold black-text no-margin-bottom">{{ people_count }}</h6>
            </div>
        </div>
    </div>
    {% for tag in tag_list_count %} {% if tag[1] > 0 %}
    <a class="list-group-item row-gap" href="{{ url_for('main_bp.people_category', tag_id=tag[0].id) }}">
        <div class="d-flex align-items-center no-margin-bottom" style="width:65%;">
            {{ sentence_case(tag[0].title) }}
        </div>
        <div class="d-flex justify-content-end" style="width: 30%;">
            <div class="highlight-box" style="padding: 8px 15px;">
                <h6 class="bold no-margin-bottom">{{ tag[1] }}</h6>
            </div>
        </div>
    </a>
    {% endif %} {% endfor %}
</ul>
</p>
{% endblock sidebar %}