{% extends "base.html" %}
{% load gravatar %}
{% load static %}
{% load humanize %}
{% block content %}
    <style>
  .container-min-height{
    min-height: 25vh;
  }

  .bottom-right {
            position: absolute;
            bottom: 10px;
            right: 15px;
   }
    </style>
    <div class="bottom-right">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/search.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=513%3A768&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <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="." class="mb-0">
                <div class="input-group search-page-bar flex">
                    <!-- <div class="search"> -->
                    <input type="text"
                           class="form-control h-[50px] w-[94.9%] border-r-0"
                           name="query"
                           value="{% if type != 'label' %}{{ query }}{% endif %}"
                           placeholder="Search for issues...">
                    <span class="input-group-btn h-max w-max">
                        <div class="selectdiv ">
                            <select class="form-control h-[50px]" name="type">
                                <option value="issue" selected="selected">Issue</option>
                                <option value="domain">Domain</option>
                                <option value="user">User</option>
                                <option value="label">Label</option>
                            </select>
                        </div>
                    </span>
                    <button class="btn btn-default h-[50px] ml-[2%]" 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';"
                                         width="100"
                                         alt="{{ domain.name }}">
                                    <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 flex">
                                <div>
                                    {% if user.user.userprofile.avatar %}
                                        <img src="{{ user.user.userprofile.avatar }}"
                                             width="50px"
                                             height="50px"
                                             class="img-responsive img-rounded"
                                             loading="lazy"
                                             alt="{{ user.user.username }}">
                                    {% elif user.user.socialaccount_set.all.0.get_avatar_url %}
                                        <img src="{{ user.user.socialaccount_set.all.0.get_avatar_url }}"
                                             width="100"
                                             class="img-responsive img-rounded"
                                             loading="lazy"
                                             height="100"
                                             alt="user image">
                                    {% else %}
                                        <img src="{% static 'images/dummy-user.png' %}"
                                             width="50"
                                             class="img-responsive img-rounded"
                                             loading="lazy"
                                             height="50"
                                             alt="user image">
                                    {% endif %}
                                    <a class="search-username"
                                       href="{% url 'profile' slug=user.user.username %}">{{ user.user.username }}</a>
                                </div>
                                <div class="py-0 px-20">
                                    <label class="text-sm">User points :</label>
                                    {% if user.total_score is None %}
                                        <span class="text-sm">0</span> Point
                                    {% else %}
                                        <span class="text-sm">{{ user.total_score|floatformat:0 }}</span> Points
                                    {% endif %}
                                </div>
                                <a href="{% url 'profile' slug=user.user.username %}"
                                   class="btn btn-danger btn-sm prizebtn absolute right-[22px] top-[14px]">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 content %}