UnTube/apps/search/templates/search_untube_page.html

{% 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 (leave this empty to just filter playlists by tags or filter videos by channels)"
                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" id="playlists">
                Filter by playlist tags:
                <select class="visually-hidden" onchange="triggerSubmit()"
                     id="choices-playlist-tags" 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 class="col-md-6" id="videos">
                Filter by video channels:
                <select class="visually-hidden" onchange="triggerSubmit()"
                     id="choices-channels" name="channel-names" placeholder="Select channels to search within" multiple>
                    {% for channel in user.profile.get_channels_list %}
                    <option value="{{ channel }}" hx-post="{% url 'search_UnTube' %}">{{ channel }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <br>
    <div class="d-flex justify-content-center">

        <div class="form-check me-5">
            <input onclick="hideShow()" 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="playlists" id="playlists-cb" checked>
            <label class="form-check-label " for="playlists-cb">
                    Playlists
            </label>
        </div>
         <div class="form-check" >
            <input onclick="hideShow();" 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="videos" id="videos-cb">
                  <label class="form-check-label" for="videos-cb">
                    Videos
                  </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>
            <div class="row row-cols-1 row-cols-md-4 g-4">
            {% include 'intercooler/playlists.html' %}
            </div>
        {% 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(){

                        videos.style.display = 'none';

        // multiple choices select search box
        var choicesPlaylistTags = new Choices('#choices-playlist-tags', {
                    removeItemButton: true,
                });

        var choicesChannels = new Choices('#choices-channels', {
                    removeItemButton: true,
                });
    });


        function hideShow() {
            var playlistsCB = document.getElementById("playlists-cb");

            var videos = document.getElementById("videos");
            var playlists = document.getElementById("playlists");
            if (playlistsCB.checked) {
                videos.style.display = 'none';
                playlists.style.display = 'block';
            } else {
                videos.style.display = 'block';
                playlists.style.display = 'none';
            }
        }
        function triggerSubmit() {
            var playlistsCB = document.getElementById("playlists-cb");
            var videosCB = document.getElementById("videos-cb");

            if (playlistsCB.checked) {
                playlistsCB.click();
            } else {
                videosCB.click();

            }
        }
    </script>

{% endblock %}