{% extends "piggyback/base.html" %}

{% block title %}My Card Library{% endblock %}

{% block content %}
<div class="pb-container pb-page-header">
  <h1>My Card Library</h1>
  <p>Your saved designs, drafts, and sent cards</p>
</div>

<div class="pb-container">
  <div class="pb-tabs">
    <a href="?"
       class="pb-tab {% if not filter_type %}active{% endif %}"
       hx-get="?"
       hx-target="#library-grid"
       hx-select="#library-grid"
       hx-swap="outerHTML"
       hx-push-url="true">All</a>
    <a href="?type=draft"
       class="pb-tab {% if filter_type == 'draft' %}active{% endif %}"
       hx-get="?type=draft"
       hx-target="#library-grid"
       hx-select="#library-grid"
       hx-swap="outerHTML"
       hx-push-url="true">Drafts</a>
    <a href="?type=saved"
       class="pb-tab {% if filter_type == 'saved' %}active{% endif %}"
       hx-get="?type=saved"
       hx-target="#library-grid"
       hx-select="#library-grid"
       hx-swap="outerHTML"
       hx-push-url="true">Saved</a>
    <a href="?type=sent"
       class="pb-tab {% if filter_type == 'sent' %}active{% endif %}"
       hx-get="?type=sent"
       hx-target="#library-grid"
       hx-select="#library-grid"
       hx-swap="outerHTML"
       hx-push-url="true">Sent</a>
    <span class="htmx-indicator pb-loading" aria-hidden="true"></span>
  </div>

  {% include "piggyback/partials/library_grid.html" %}
</div>
{% endblock %}