{% extends "base.html" %}
{% load gravatar %}
{% load static %}
{% load humanize %}

{% block content %}


<style>
  .container-min-height{
    min-height: 50vh;
  }
</style>

    <div class="row container-min-height">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center"><span class="search-header">Search Results for </span><span class="search-header-query">"{{query}}"</span></h1>
            <hr>
            <form method="GET" action="." style="margin-block-end: 0px;">
                <div style="display:flex" class="input-group search-page-bar">

                           <!-- <div class="search"> -->
                    <input type="text" class="form-control" name="query" style="height: 50px;width: 94.9%;border-right: none;"
                           value="{% if type != 'label' %}{{ query }}{% endif %}" placeholder="Search for issues...">
                           
                           <span style="height:max-content;width: max-content;" class="input-group-btn">
                                  <div class="selectdiv ">
                               <select style="height:50px" class="form-control" name="type">
                                   <option value="issue" selected="selected">Issue</option>
                                   <option value="domain">Domain</option>
                                   <option value="user">User</option>
                               </select>
                           </div>  
                           </span>
                           
                        <button style="height: 50px;margin-left:2%" class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                           <!-- <input type="text"placeholder="Cari Ruang"> 
                           <div class="button-src">
                               <button>cari</button>
                           </div> -->
                        <!-- </div> -->
                </div>
            </form>
            {% if type %}
                <script type="text/javascript">
                    $('select').val("{{type}}");
                </script>
            {% endif %}
        </div>
    </div>
    {% if query %}
        <div class="row">
            {% if issues %}
                <div class="col-md-8 col-md-offset-2">
                    {% for activity in issues %}
                        {% include '_activity.html' %}
                    {% endfor %}
                </div>
            {% elif domains %}
                <div class="col-md-8 col-md-offset-2">
                    <div class="list-group">
                        {% for domain in domains %}
                            <div class="list-group-item">
                                <a href="{{ domain.get_absolute_url }}">
                                    <img src="{{ domain.get_logo }}" height="100"
                                         onerror="this.onerror=null; this.style.display ='none';">
                                    <strong>{{ domain.name }}</strong>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% elif users %}
                <div class="col-md-8 col-md-offset-2">
                    <div class="list-group">
                        {% for user in users %}
                            <div class="list-group-item">
                                {% if user.socialaccount_set.all.0.get_avatar_url %}
                                    <img src="{{ user.socialaccount_set.all.0.get_avatar_url }}" height="50px">
                                {% else %}
                                    <img src="{% gravatar_url user.email 50 %}">
                                {% endif %}
                                <a class="search-username" href="/profile/{{ user.username }}">{{ user.user.username }}</a>
                                
                                 <div style="padding:0px 75px;">
                                    {{ user.total_score }} Points
                                 </div>
                                 <div style="padding:0px 75px;">
                                    {{ user.description }}
                                 </div>
                                 <a style="position: absolute;right: 22px;top: 14px;" href="/profile/{{ user.username }}" class="btn btn-danger btn-sm prizebtn">View Profile</a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <div class="col-md-8 col-md-offset-2">
                    <div class="alert alert-danger text-center" role="alert">Nothing Found!</div>
                </div>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}