{% extends "base.html" %}
{% import "macros/modal.html" as modal %}

{% block page_title %}Build Your PC{% 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-builder"
     data-currency="{{ currency_symbol | default(value='₹') }}">
  <header class="mb-5 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
    <div>
      <h1 class="m-0 text-2xl font-semibold text-foreground sm:text-3xl">Build your PC</h1>
      <p class="mt-2 max-w-3xl text-sm text-muted">Choose parts for each slot. Compatibility checks flag conflicts automatically, and your draft stays in this browser until you save it.</p>
    </div>
  </header>
  <div class="flex flex-col gap-3 rounded-xl border border-divider bg-surface p-4 sm:flex-row sm:items-center">
    <label class="sr-only" for="pcb-title">Build name</label>
    <input type="text" id="pcb-title" class="blocks-input min-w-0 flex-1" placeholder="Build name (e.g. Editing Rig)" maxlength="120">
    <button type="button" id="pcb-shortlist-all" class="blocks-button blocks-button-secondary" aria-pressed="false">Shortlist selected</button>
    <span id="pcb-draft-state" class="text-sm text-muted" role="status" aria-live="polite"></span>
  </div>
  <div class="mt-5 grid min-w-0 gap-5 lg:grid-cols-[minmax(0,1fr)_21.25rem] lg:items-start">
    <section id="pcb-categories" aria-label="PC part categories" aria-live="polite" aria-busy="true">
      <p class="text-muted">Loading parts…</p>
    </section>
    <aside class="rounded-xl border border-divider bg-surface p-4 lg:sticky lg:top-4" id="pcb-summary" aria-live="polite" aria-label="Build summary"></aside>
  </div>
</main>

{{ modal::modal(
  id="pcb-buy-modal",
  title="Place order",
  size="md",
  body_html='<div class="blocks-form-field mb-4"><label for="pcb-phone">Phone</label><input type="tel" id="pcb-phone" class="blocks-input" autocomplete="tel" placeholder="Contact number"></div><div class="blocks-form-field mb-4"><label for="pcb-address">Delivery address</label><textarea id="pcb-address" class="blocks-input" rows="3" autocomplete="street-address" placeholder="Full delivery address"></textarea></div><div class="blocks-form-field"><label for="pcb-notes">Notes (optional)</label><textarea id="pcb-notes" class="blocks-input" rows="2"></textarea></div><p id="pcb-buy-status" class="mt-4 text-sm text-muted" role="status" aria-live="polite"></p>',
  footer_html='<button type="button" class="blocks-button blocks-button-secondary" data-modal-dismiss>Cancel</button><button type="button" class="blocks-button blocks-button-primary" id="pcb-confirm-buy">Pay &amp; order</button>'
) }}
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-overlay-stack.js" defer></script>
<script src="/static/js/blocks-admin-modal.js" defer></script>
<script src="/plugins/pc-build/assets/js/builder.js" defer></script>
{% endblock %}