{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/admin_management_header.html" as mh %}
{% import "macros/loading_spinner.html" as spinner %}
{% import "macros/modal.html" as modal %}

{% block page_title %}PC Build Components{% endblock %}

{% block admin_content %}
<main data-plugin="pc-build" class="blocks-workspace mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
  {{ mh::management_header_simple(title="PC components", subtitle="Manage component specifications, prices and catalog links used by the builder.") }}
  {{ crud::shell_open(config_url="/plugins/pc-build/assets/admin/components_list.json", mount_id="pc-build-components-list", custom_mount=true) }}
  <div class="blocks-table-scroll"><table><thead></thead><tbody>{{ spinner::table_skeleton(colspan=8, lines=3, label="Loading components…") }}</tbody></table></div>
  {{ crud::shell_close() }}
</main>
{{ modal::modal(id="pc-build-component-modal", title='<span id="pc-build-component-modal-title">Component</span>', size="xl", body_html='<div id="pc-build-component-form-mount"></div>', footer_html='<button type="button" class="blocks-button blocks-button-secondary" data-modal-dismiss>Cancel</button>') }}
{% endblock %}

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