{% extends 'base.html' %}
{% block content %}
    <br>
<div hx-get="{% url 'user_playlists_updates' 'check-for-updates' %}" hx-trigger="load" hx-swap="outerHTML">

</div>

<div class="row row-cols-1 row-cols-md-3 g-4" >
    <div id="manage-import-playlists-btn" class="col">

        <a  hx-get="{% url 'manage_view_page' 'import' %}" hx-trigger="click" hx-target="#manage-pl-div" class="text-decoration-none text-white">
        <div class="card" style="background-color: #25641a;">
            <div class="card-body">
                <h4 class="card-title">Import Playlists</h4>
                    <p class="card-text">Add public playlists to your own collection. Unfortunately, the YouTube API doesn't let us retrieve your liked videos and watch later playlists :(</p>
            </div>
        </div>
        </a>
    </div>
    <div id="manage-create-playlists-btn" class="col">
        <a  hx-get="{% url 'manage_view_page' 'create' %}" hx-trigger="click" hx-target="#manage-pl-div" class="text-decoration-none text-white">
        <div class="card" style="background-color: #64631a;">
            <div class="card-body">
                <h4 class="card-title">Create a New Playlist</h4>
                    <p class="card-text">Make a new playlist using the videos in your collection and export it to YouTube!</p>
            </div>
        </div>
        </a>
    </div>
    <div id="manage-untube-playlists-btn" class="col">
        <a  hx-get="{% url 'manage_view_page' 'untube' %}" hx-trigger="click" hx-target="#manage-pl-div" class="text-decoration-none text-white">
        <div class="card" style="background-color: #641a52;">
            <div class="card-body">
                <h4 class="card-title">Create an UnTube Playlist</h4>
                <p class="card-text">UnTube playlists are playlists can contain YouTube videos and YouTube playlists which can then be shared with other users via a link. Coming soon. Maybe.</p>
            </div>
        </div>
        </a>
    </div>
</div>
<script>
    document.getElementById('manage-import-playlists-btn').onclick = function() {
        document.getElementById('manage-import-playlists-btn').className = "col border border-5 rounded-3 border-primary p-3";
        document.getElementById('manage-create-playlists-btn').className = "col";
        document.getElementById('manage-untube-playlists-btn').className = "col";
    }

    document.getElementById('manage-create-playlists-btn').onclick = function() {
        document.getElementById('manage-import-playlists-btn').className = "col";
        document.getElementById('manage-create-playlists-btn').className = "col border border-5 rounded-3 border-primary p-3";
        document.getElementById('manage-untube-playlists-btn').className = "col";
    }

    document.getElementById('manage-untube-playlists-btn').onclick = function() {
        document.getElementById('manage-import-playlists-btn').className = "col";
        document.getElementById('manage-create-playlists-btn').className = "col";
        document.getElementById('manage-untube-playlists-btn').className = "col border border-5 rounded-3 border-primary p-3";
    }
</script>
<div id="manage-pl-div">

</div>
{% endblock %}