{% extends "base.html" %}

{% block page_title %}My Builds & Presets{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8" data-plugin="pc-build" id="pcb-profiles"
      data-currency="{{ currency_symbol | default(value='₹') }}">
  <header class="mb-5">
    <h1 class="m-0 text-2xl font-semibold text-foreground sm:text-3xl">My builds &amp; presets</h1>
    <p class="mt-2 text-muted">Start from a ready-made profile or continue one of your saved builds.</p>
  </header>
  <div class="mb-5 flex flex-wrap gap-2" role="tablist" aria-label="Build collections">
    <button type="button" id="pcb-tab-presets" class="blocks-button blocks-button-primary" data-tab="presets" role="tab" aria-selected="true" aria-controls="pcb-presets" tabindex="0">Preset profiles</button>
    <button type="button" id="pcb-tab-mine" class="blocks-button blocks-button-secondary" data-tab="mine" role="tab" aria-selected="false" aria-controls="pcb-mine" tabindex="-1">My builds</button>
  </div>
  <section id="pcb-presets" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3" role="tabpanel" aria-labelledby="pcb-tab-presets" aria-busy="true">
    <p class="text-muted">Loading presets…</p>
  </section>
  <section id="pcb-mine" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3" role="tabpanel" aria-labelledby="pcb-tab-mine" aria-busy="true" hidden>
    <p class="text-muted">Loading your builds…</p>
  </section>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/pc-build/assets/js/profiles.js" defer></script>
{% endblock %}