UnTube/apps/main/templates/intercooler/search_untube.html

{% load humanize %}
        <div class="bg-dark">
            <input class="form-control me-lg-2 bg-dark text-white" type="text"
       name="search" placeholder="Search UnTube"
                   value="{{ search_query }}"
       hx-post="{% url 'search_UnTube' %}"
       hx-trigger="keyup changed delay:200ms"
       hx-target="#untube-searchbar-results"
                   hx-include="[id='searchbar-radio-form']"
       hx-indicator=".htmx-indicator" autofocus onfocus="this.setSelectionRange(this.value.length,this.value.length);">
            <br>
                          <div id="searchbar-radio-form">

                  <div class="d-flex justify-content-center">

                          <div class="form-check me-5">
                      <input class="form-check-input" type="radio" name="search-settings" value="starts-with" id="starts-with-cb" {% if starts_with %} checked {% endif %}>
                      <label class="form-check-label" for="starts-with-cb">
                        Starts with
                      </label>
                    </div>
                         <div class="form-check">
                      <input class="form-check-input" type="radio" name="search-settings" value="contains" id="contains-cb" {% if contains %} checked {% endif %}>
                      <label class="form-check-label" for="contains-cb">
                        Contains
                      </label>
                    </div>
                      </div>
                  </div>

        </div>

        <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">Playlists <span class="badge bg-primary rounded-pill">{{ playlists.count|default:"0" }}</span></h1>
        </div>

        <div>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                {% if playlists %}
                {% for playlist in playlists %}
                <div class="col">
                    <div class="card h-100" style="background-color: #1A4464;">
                        <a style="background-color: #1A4464;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">

                            <div class="card-body text-white">

                                <h5 class="card-title">
                                    {{ playlist.name }}
                                    {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                                    {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
                                </h5>
                                <p class="card-text">
                                    {% if playlist.description %}
                                        {{ playlist.description }}
                                    {% else %}
                                        No description
                                    {% endif %}
                                </p>
                                <small>
                                    <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} views</span>
                                    <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                                </small>
                            </div>
                        </a>
                    </div>
                </div>
                {% endfor %}

                {% else %}
                <h5 class="text-white align-content-center">Nothing found :(</h5>
                {% endif %}
            </div>
        </div>

        <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">Videos <span class="badge bg-primary rounded-pill">{{ videos_count }}</span></h1>
        </div>

                <div>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                {% if videos %}
                {% for video in videos %}
                <div class="col">
                    <div class="card" style="background-color: #1A4464;">

                            <div class="card-body">
                                <h5 class="card-title text-light">
                                    {{ video.name }}<br>

                                    <small><span class="badge bg-dark text-white-50">{{ video.duration }}</span></small>
                                    {% if video.is_unavailable_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                                    {% if video.has_cc %}<small><span class="badge bg-danger text-dark">CC</span></small> {% endif %}
                                </h5>
                                                                <br>

                                <span class="d-flex justify-content-center">
                                    <a href="https://www.youtube.com/watch?v={{ video.video_id }}" class="btn btn-info me-1" target="_blank" id="share_link" style=""><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
                                    <input class="form-control me-1 visually-hidden" id="video-{{ video.video_id }}" value="https://www.youtube.com/watch?v={{ video.video_id }}">
                                    <button class="copy-btn btn btn-success" data-clipboard-target="#video-{{ video.video_id }}">
                                        <i class="far fa-copy" aria-hidden="true"></i>
                                    </button>
                                </span>
                            </div>
                    </div>
                </div>
                {% endfor %}

                {% else %}
                <h5 class="text-white align-content-center">Nothing found :(</h5>
                {% endif %}
            </div>
        </div>

    <br>