{% extends 'base.html' %}
{% load humanize %}
{% load static %}

{% block content %}
    <br>
    <script>
    window.onkeydown = function( event ) {
        if ( event.keyCode === 27 ) {
            window.close(); // closes current tab
        }
    };
    </script>

    <div class="d-flex justify-content-center">
        <h1> Search all of UnTube
            {% if user.profile.open_search_new_tab %}<h6>Press <kbd>Esc</kbd> to close.</h6>{% endif %}
        </h1>
    </div>
        <div id="search-playlist-form">

        <input class="form-control me-lg-2" type="text"
               id="untubeSearchBar"
                name="search" placeholder="Search UnTube"
                hx-post="{% url 'search_UnTube' %}"
                hx-trigger="keyup changed delay:700ms"
                hx-target="#untube-searchbar-results"
                hx-include="[id='search-playlist-form']"
                hx-indicator="#spinner" autofocus>

        <br>

        <div class="row d-flex justify-content-center">
            <div class="col-md-6">

                <select class="visually-hidden" onchange="triggerSubmit()"
                     id="choices-multiple-remove-button" name="playlist-tags" placeholder="Add playlist tags to search within" multiple>
                    {% for tag in user.playlist_tags.all %}
                    <option value="{{ tag.name }}" hx-post="{% url 'search_UnTube' %}">{{ tag.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <br>
    <div class="d-flex justify-content-center">
        <div class="form-check me-5">
            <input hx-post="{% url 'search_UnTube' %}"
        hx-trigger="click"
        hx-target="#untube-searchbar-results"
        hx-include="[id='search-playlist-form']"
        hx-indicator="#spinner"
                           class="form-check-input" type="radio" name="search-settings" value="starts-with" id="starts-with-cb" checked>
            <label class="form-check-label" for="starts-with-cb">
                    Starts with
            </label>
        </div>
         <div class="form-check">
            <input hx-post="{% url 'search_UnTube' %}"
        hx-trigger="click"
        hx-target="#untube-searchbar-results"
        hx-include="[id='search-playlist-form']"
        hx-indicator="#spinner"
                    class="form-check-input" type="radio" name="search-settings" value="contains" id="contains-cb">
                  <label class="form-check-label" for="contains-cb">
                    Contains
                  </label>
        </div>
    </div>
</div>

    <div id="spinner" class="htmx-indicator d-flex justify-content-center p-3">
        <div class="spinner-border text-light" role="status">
        </div>
    </div>

    <div id="untube-searchbar-results">
        {% if playlists %}
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">All Playlists <span class="badge bg-primary rounded-pill">{{ playlists.count }}</span></h1>
        </div>
            {% include 'intercooler/playlists.html' %}
        {% endif %}
    </div>

    <button class="scrollToTopBtn sticky-top">
<i class="fa fa-angle-double-up fa-lg"></i></button>

    <script type="application/javascript">

    $(document).ready(function(){
        // multiple choices select search box
        var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
                    removeItemButton: true,
                });

            });

        function triggerSubmit() {
            var startsWithCB = document.getElementById("starts-with-cb");
            var containsCB = document.getElementById("contains-cb");

            if (startsWithCB.checked) {
                startsWithCB.click();
            } else {
                containsCB.click();
            }
        }
    </script>

{% endblock %}