{% extends "base.html" %}

{% block content %}
<div class="ui center aligned text container">
    <form action="{{url_for('ytsearch', _method='GET')}}">
    <div class="ui search">
            <input class="prompt" name="q" type="text" placeholder="Search...">
            <select name="s" id="sort">
                <option value="0">Relevance</option>
                <option value="3">Views</option>
                <option value="2">Date</option>
                <option value="1">Rating</option>
            </select>
        </div>
    </form>
</div>
<div class="ui text container"></div>
    {% if results %}
    {% if results.channels %}
        <h3 class="ui dividing header">Users</h3>
    {% endif %}
    <div class="ui relaxed divided list">        
            {% for res in results.channels %}
                    <div class="item">
                        <div class="image">
                            {% if config.isInstance %}
                                <img src="{{res.thumbnail}}" alt="Avatar">
                            {% else %}    
                                <img alt="Avatar" src="{{ url_for('img', url=res.thumbnail) }}">
                            {% endif %}
                        </div>
                        <div class="content">
                          <a class = "header" href="{{ url_for('channel', id=res.channelId)}}">{{res.username}}</a>
                          <div class="meta">
                            <span>{{res.description}}</span>
                          </div>
                          <div class="description">
                            <p></p>
                          </div>
                          <div class="extra">
                            <div class="ui label">
                                <i class="user icon"></i> {{res.suscribers}}
                            </div>

                            <div class="ui label">
                                <i class="video icon"></i> {{res.videos}}
                            </div>
                            
                            {% if restricted or current_user.is_authenticated %}
                                <div class="right floated content">
                                {% if not current_user.is_following_yt(res.channelId) %}
                                    <form action="{{ url_for('ytfollow', channelId=res.channelId) }}" method="post">
                                        {{ btform.hidden_tag() }}
                                        {{ btform.submit(value='Follow') }}
                                    </form>
                                {% else %}
                                    <form action="{{ url_for('ytunfollow', channelId=res.channelId) }}" method="post">
                                        {{ btform.hidden_tag() }}
                                        {{ btform.submit(value='Unfollow') }}
                                    </form>
                                {% endif %}
                                </div>  
                            {% endif %}
                          </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% endif %}


            <div class="ui middle aligned divided list">
                {% if results.videos %}
                <h3 class="ui dividing header">Videos</h3>
                    <div class="ui centered cards">
                        {% for video in results.videos %}
                            {% include '_video_item.html' %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

    {%if ppage%}
    <div class="ui text container center aligned">
       <a href="{{ppage}}"><button class="ui labeled icon button">
            <i class="left arrow icon"></i>
            Prev
        </button></a>
        <a href="{{npage}}"><button class="ui right labeled icon button">
            <i class="right arrow icon"></i>
            Next
        </button></a>
    </div>
    {%endif%}
</div>

{% endblock %}