{% extends "base.html" %}

{% block title %}Your Library - Makenotwork{% endblock %}
{% block body_attrs %} class="padded-page library-page"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <h1 class="page-title">Your Library</h1>

        <div class="tabs" role="tablist" aria-label="Library sections">
            <button class="tab is-selected"
                    role="tab"
                    aria-selected="true"
                    aria-controls="tab-content"
                    id="tab-purchases"
                    hx-get="/library/tabs/purchases"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Purchases</button>
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-feed"
                    title="Updates from creators you follow"
                    hx-get="/library/tabs/feed"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Feed</button>
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-collections"
                    hx-get="/library/tabs/collections"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Collections</button>
            {% if has_mt_memberships %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-communities"
                    hx-get="/library/tabs/communities"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Communities</button>
            {% endif %}
            {% if let Some(user) = session_user %}{% if user.can_create_projects %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-contacts"
                    hx-get="/library/tabs/contacts"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Contacts</button>
            {% endif %}{% endif %}
            <span id="tab-spinner" class="htmx-indicator tab-spinner-indicator" aria-live="polite"> Loading...</span>
        </div>

        <div id="tab-content" class="tab-content active"
             role="tabpanel"
             aria-labelledby="tab-purchases">
            {% include "partials/tabs/library_purchases.html" %}
        </div>
    </div>
{% endblock %}