UnTube/apps/main/templates/home.html

{% extends 'base.html' %}
{% block content %}
        <br>
        {% if user.profile.playlists.all.count == 0 %}
            <div class="alert alert-success" role="alert">
              <h4 class="alert-heading">It's empty in here</h4>
              <p>
                  There's no playlists in your UnTube right now. You can change that by heading over to <a href="{% url 'manage_playlists' %}" class="btn btn-sm btn-primary">Manage</a> to import some public playlists into your UnTube.
                  {% if not user.profile.imported_yt_playlists %}
                      Or you could always head over to your <a href="{% url 'profile' %}" class="btn btn-sm btn-primary">Profile</a> to import all of your public/private YouTube playlists.
                  {% else %}
                      Keep in mind that your own YouTube playlists will automatically be imported into UnTube.
                  {% endif %}
              </p>
            </div>
        {% endif %}
        {% if import_successful %}
            <br>
                <br>
                <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
                    <h1>Welcome to UnTube, {{ user.username|capfirst }}</h1>
                </div>
                  <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
                            <h2>{{ user.profile.playlists.all.count }} playlists from YouTube have been successfully imported.</h2>
                  </div>

                  <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
                        <h3>You'll now be notified on the Dashboard whenever there's any new un-exported playlists on YouTube :)</h3>
                  </div>


                <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
                    <a href="{% url 'home' %}" class="btn btn-lg btn-success">Go to Dashboard</a>
                </div>

            {% else %}

            <!--
            <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">Dashboard</h1>

                <span><small>Logged in as <b>{{ user.username }}</b></small></span>

            </div>
            -->

            {% if user.profile.imported_yt_playlists %}
            <div hx-get="{% url 'user_playlists_updates' 'check-for-updates' %}" hx-trigger="load" hx-swap="outerHTML">

            </div>
            {% endif %}

            <div class="row row-cols-1 row-cols-md-4 g-4 text-dark d-flex justify-content-center">
                <div class="col">
                    <div class="card">
                        <a style="background: linear-gradient(-45deg, #ae6ba3, #ab7b91, #bc8a9a, #d69aa1); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
                            <div class="card-body">
                                <div class="d-flex justify-content-center h1">
                                    <i class="fas fa-map-pin"></i>
                                </div>
                                <div class="d-flex justify-content-center h1">
                                    YOUR
                                </div>
                                <div class="d-flex justify-content-center h1">
                                    PINS
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a style="background: linear-gradient(-45deg, #0645a4, #2480cd, #84bcf3, #b7d6f7); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
                            <div class="card-body">
                                <div class="d-flex justify-content-center h1">
                                    <i class="fas fa-thumbs-up"></i>
                                </div>
                                <div class="d-flex justify-content-center h1">
                                    LIKED
                                </div>
                                <div class="d-flex justify-content-center h1">
                                    VIDEOS
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a style="background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
                            <div class="card-body">
                                <div class="d-flex justify-content-center h1">
                                    <i class="fas fa-history"></i>
                                </div>
                                <div class="d-flex justify-content-center h1">
                                    YOUR
                                </div>
                                <div class="d-flex justify-content-center h1">
                                    ACTIVITY
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

            </div>
            <br>

            {% if watching %}
                <div class="border border-5 rounded-3 border-primary p-3">
                    <h3><span style="border-bottom: 3px #ffffff dashed;">Continue Watching</span><i class="fas fa-fire-alt ms-2" style="color: #d24646"></i></h3>
           <div class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0">
                {% for playlist in watching|slice:"0:3" %}
                <div class="col">
                    <div class="card">
                        <a style="background-color: #7e89c2;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
                            <div class="card-body">
                        <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">
                            <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>

                            {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
                        </p>
                            {% if playlist.tags.all %}
                        <small>
                        <i class="fas fa-tags fa-sm" style="color: yellow"></i>
                            {% for tag in playlist.tags.all %}
                                <span class="badge rounded-pill bg-primary mb-lg-1">
                                    {{ tag.name }}
                                </span>
                            {% endfor %}
                        </small>
                            {% endif %}
                        </div>
                        </a>
                    </div>
                </div>
                    {% if forloop.counter == 3 %}
                        {% if watching.count|add:"-3" != 0 %}
                        <div class="col">
                            <div class="card">
                                <a style="background-color: #7e89c2;" href="{% url 'all_playlists' 'watching' %}" class="list-group-item list-group-item-action" aria-current="true">
                                    <div class="card-body">

                                        <p class="card-text">
                                            <h3>+ {{ watching.count|add:"-3" }} more</h3>
                                        </p>
                                     </div>
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
            </div>
                <br>
            {% endif %}





           <div class="row text-dark mt-0 d-flex justify-content-evenly">
                <div class="col">
                  <div class="card bg-dark text-white">
                        <div class="card-body">
                          <h6 class="d-flex align-items-center mb-3"><span class="text-info me-2">{{ user.profile.playlists.count }}</span>Playlists Statistics</h6>

                          <small>Public <span class="text-warning ms-1">{{ statistics.public_x }}%</span></small>
                          <div class="progress mb-3" style="height: 5px">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.public_x }}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>

                          <small>Private <span class="text-warning ms-1">{{ statistics.private_x }}%</span></small>
                          <div class="progress mb-3" style="height: 5px">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.private_x }}%" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                          <small>Favorites <span class="text-warning ms-1">{{ statistics.favorites_x }}%</span></small>
                          <div class="progress mb-3" style="height: 5px">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.favorites_x }}%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                          <small>Watching <span class="text-warning ms-1">{{ statistics.watching_x }}%</span></small>
                          <div class="progress mb-3" style="height: 5px">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.watching_x }}%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                          <small>Imported <span class="text-warning ms-1">{{ statistics.imported_x }}%</span></small>
                          <div class="progress mb-3" style="height: 5px">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.imported_x }}%" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>

                </div>
               <div class="col">
                  <div class="card bg-transparent text-black border border-5 rounded-3 border-success p-3">
                        <div class="card-body">
                              <h3><span style="border-bottom: 3px #ffffff dashed;">Most viewed playlists</span> <a href="{% url 'all_playlists' 'all' %}" class="pt-1"><i class="fas fa-binoculars"></i> </a></h3>
                                {% if user_playlists %}
                                <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
                                    {% for playlist in user_playlists|slice:"0:3" %}
                                    <div class="col">
                                        <div class="card">
                                            <a style="background-color: #4790c7;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
                                                <div class="card-body">
                                            <h5 class="card-title">
                                               #{{ forloop.counter }} <br><br>{{ 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>
                                            <small>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                                                <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>

                                            </small>
                                            </div>
                                            </a>
                                        </div>
                                    </div>
                                    {% endfor %}

                                </div>

                                {% else %}
                                    <br>
                                <h5>Nothing to see here... yet.</h5>
                                {% endif %}


                        </div>
                      </div>
                </div>
            </div>

            <br>

           <div class="row text-dark mt-0 d-flex justify-content-evenly">
               <div class="col">

                <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Added</span> <i class="fas fa-plus-square" style="color:#972727;"></i></h3>
                {% if recently_added_playlists %}
                    <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
                        {% for playlist in recently_added_playlists %}
                        <div class="col">
                            <div class="card">
                                <a style="background-color: #958a44;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
                                    <div class="card-body">
                                <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>
                                <small>
                                    <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                    <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                                    <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>

                                </small>
                                </div>
                                </a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                     {% else %}
                    <br>
                    <h5>You have no playlists ;-;</h5>
                    {% endif %}
               </div>

                <div class="col">
                    <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Accessed</span> <i class="fas fa-redo fa-sm" style="color: #3c3fd2"></i></h3>

                    {% if recently_accessed_playlists %}
                    <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
                        {% for playlist in recently_accessed_playlists %}
                        <div class="col">
                            <div class="card">
                                <a style="background-color: #357779;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
                                    <div class="card-body">
                                <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>
                                <small>
                                    <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                    <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                                    <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>

                                </small>
                                </div>
                                </a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <br>
                    <h5>Nothing to see here... yet.</h5>
                    {% endif %}

                </div>
            </div>


            <br>
            <br>
        {% endif %}


{% endblock %}