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

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

{% block content %}
    <section class="section-search">
        <div class="search-filters">
            <form action="" method="get">
                <input type="hidden" name="q" value="{{ searchQuery }}" />

                <header>Difficulties Included</header>
                <div class="filter-input">
                    <label class="filter-difficulty">
                        <input type="checkbox" name="diffEasy" {{ filterEasy ? 'checked' : '' }} />
                        <span></span>
                        <div>Easy</div>
                    </label>
                    <label class="filter-difficulty">
                        <input type="checkbox" name="diffNormal" {{ filterNormal ? 'checked' : '' }} />
                        <span></span>
                        <div>Normal</div>
                    </label>
                    <label class="filter-difficulty">
                        <input type="checkbox" name="diffHard" {{ filterHard ? 'checked' : '' }} />
                        <span></span>
                        <div>Hard</div>
                    </label>
                    <label class="filter-difficulty">
                        <input type="checkbox" name="diffExpert" {{ filterExpert ? 'checked' : '' }} />
                        <span></span>
                        <div>Expert</div>
                    </label>
                    <label class="filter-difficulty">
                        <input type="checkbox" name="diffXD" {{ filterXD ? 'checked' : '' }} />
                        <span></span>
                        <div>XD</div>
                    </label>
                </div>
                
                <header>Difficulty Rating</header>
                <div class="filter-input">
                    <label class="filter-rating">
                        <input type="number" name="diffRatingFrom" value="{{ diffRatingFrom }}" />
                        <div>Minimal Rating</div>
                    </label>
                    <label class="filter-rating">
                        <input type="number" name="diffRatingTo" value="{{ diffRatingTo }}" />
                        <div>Maximum Rating</div>
                    </label>
                </div>

                <input type="submit" value="Filter" />
            </form>

            <!-- <a href="{{ path('search.index', {showAll: true}) }}" class="button">Show all</a> -->
        </div>

        {% 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-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-list-5">
                            {% 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 %}