{% load humanize %}
{% with all_videos_unavailable=playlist.all_videos_unavailable percent_complete=playlist.get_percent_complete %}
<div class="py-2 bg-light rounded-3">
  <div class="d-flex justify-content-center">
      <span class="h3 ms-3 {% if percent_complete == 0 or all_videos_unavailable %}w-75{% endif %}" style="color: #70777E">
          {% if percent_complete == 0 or all_videos_unavailable %}
              <i class="fas fa-sun fa-spin" style="color: {% if not all_videos_unavailable %}#d0bc0b{% else %}red{% endif %};"></i>
              Yay, you marked a playlist as watching! {% if all_videos_unavailable %}However, there's no videos in this playlist you can mark as 'watched' :({% else %}This message will keep updating as you mark videos as watched. Good luck!{% endif %}
              <i class="fas fa-sun fa-spin" style="color: {% if not all_videos_unavailable %}#d0bc0b{% else %}red{% endif %}"></i>
          {% else %}
            {% if percent_complete == 100 %}
                <i class="fas fa-flag-checkered" style="color: #2c9c6b"></i>
            {% endif %}
          <span style="color: #2c9c2c">{{ playlist.get_watched_videos_count }}</span>
              /
              <span {% if percent_complete == 100 %}style="color: #2c9c2c"{% endif %}>{{ playlist.get_watchable_videos_count }}</span> (<span style="color: #2c9c2c">{{ percent_complete }}%</span>) <span {% if percent_complete == 100 %}style="color: #2c9c2c"{% endif %}> watched!</span>
          {% if percent_complete != 100 %}<span class="text-dark" style="border-bottom: 3px #e760f1 dashed; {% if percent_complete >= 70 and percent_complete != 100 %}background: linear-gradient(-45deg, #AE876B, #ABA27B, #A7BC8A, #A3D69A);
                        background-size: 400% 400%; animation: gradient 7s ease infinite;{% endif %}">{{ playlist.get_watch_time_left }}</span> left to go!{% endif %}

            {% if percent_complete == 100 %}
                <i class="fas fa-flag-checkered" style="color: #2c9c6b"></i>
            {% elif percent_complete >= 90  %}
              <i class="fas fa-glass-cheers" style="color: #9C2C42FF"></i>
            {% elif percent_complete >= 75  %}
              <i class="fas fa-cocktail" style="color: #9C2C42FF"></i>
            {% elif percent_complete >= 60 %}
              <i class="fas fa-glass-martini" style="color: #9C2C42FF"></i>
            {% elif percent_complete >= 40 %}
                <i class="fas fa-glass-martini-alt" style="color: #9C2C42FF"></i>
            {% elif percent_complete >= 20 %}
              <i class="fas fa-mug-hot" style="color: #9C2C42FF"></i>
            {% elif percent_complete >= 0 %}
              <i class="fas fa-coffee" style="color: #9C2C42FF"></i>
            {% endif %}
          {% endif %}
      </span>
  </div>
    {% if percent_complete == 100 %}
        <!--
      <div class="d-flex justify-content-center h5">
        Started {{ playlist.started_on|naturaltime }}
      </div>
        <div class="d-flex justify-content-center h5">
            Finished {{ playlist.last_watched|naturaltime }}
      </div>
      -->
  <div class="d-flex justify-content-center mt-2">
    <a class="btn btn-danger" href="{% url 'reset_watched' playlist.playlist_id %}">Reset</a>
  </div>
    {% endif %}
</div>
{% endwith %}