{% extends 'base.html.twig' %}

{% block title %}{{ searchQuery|default('Search') }}{% endblock %}

{% block content %}
    <section class="section-search">
        <header>
            <div class="title">Search</div>
            <div class="actions">
                <form action="{{ path('search.index') }}" method="GET">
                    <input name="q" type="search" placeholder="Search for songs, tags & profiles..." value="{{ searchQuery|default('') }}" />
                </form>
                <a href="{{ path('search.index', {showAll: true}) }}" class="button">Show all</a>
            </div>
        </header>
        {% if results is defined %}
            <div class="search-results">
                {% if results.users|length == 0 and results.songs|length == 0 %}
                    <div class="search-results-noresults">
                        <div class="noresults-title">{{ searchQuery }}</div>
                        <div class="noresults-text">Your search did not match any songs or users. Make sure, that all words are spelled correctly or try a different query.</div>
                    </div>
                {% endif %}
                {% if results.users|length > 0 %}
                    <div class="user-row search-results-users">
                        <div class="user-header">
                            <div class="row-title row-title-noactions">Users</div>
                        </div>
                        <div class="user-list">
                            {% for user in results.users %}
                                <a href="{{ path('user.detail', {userId: user.id}) }}" class="user-item">
                                    <div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
                                    <div class="user-metadata">
                                        <div class="user-name">{{ user.userName }}</div>
                                        {% if user.isVerified %}
                                            <div class="user-badge"><i class="mdi mdi-check-decagram"></i></div>
                                        {% endif %}
                                        {% if user.isPatreon %}
                                            <div class="user-badge"><i class="mdi mdi-patreon"></i></div>
                                        {% endif %}
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                {% if results.songs|length > 0 %}
                    <div class="song-row search-results-songs">
                        <div class="song-header">
                            <div class="row-title row-title-noactions">Songs</div>
                        </div>
                        <div class="song-list">
                            {% for song in results.songs %}
                                {{ include('components/song-item.html.twig', {song: song}) }}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endif %}
    </section>
{% endblock %}

{% block scripts %}
  <script src="{{ asset('assets/js/search.js') }}"></script>
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ asset('assets/css/search.css?v=' ~ date().timestamp) }}" />
{% endblock %}