{% extends "djust_theming/catalogue/base.html" %}
{% load theme_tags theme_components djust_components %}

{% block title %}{{ display_name }} — Components{% endblock %}
{% block catalogue_content_class %}dc-content--with-rail{% endblock %}

{% block catalogue_content %}
<article>
{% theme_breadcrumb items=crumbs %}

<h1 class="dc-comp-title">{{ display_name }}</h1>
{% if description %}<p class="dc-comp-desc">{{ description }}</p>{% endif %}
<div class="dc-comp-meta">
  {% theme_badge component_type variant=component_type %}
  {% if component_type == "template" %}
    <span>{{ required_context|length }} required</span>
    <span>{{ optional_context|length }} optional</span>
    <span>{{ available_slots|length }} slot{{ available_slots|length|pluralize }}</span>
    <span>{{ accessibility|length }} a11y rule{{ accessibility|length|pluralize }}</span>
  {% elif python_params %}
    <span>{{ python_params|length }} param{{ python_params|length|pluralize }}</span>
  {% endif %}
</div>

{% comment %}
This page renders a component on a live server; the reference entry is the
same component written down, generated from the same registry and pinned to
whatever djust version the docs site builds from. Link both ways so a reader
never has to guess which one they are looking at.
{% endcomment %}
<p class="dc-doc-links">
  <a href="{{ docs_component_url }}" rel="noopener">Reference</a>
  <a href="{{ docs_guide_url }}" rel="noopener">Guide</a>
</p>

{% comment %}
===== Preview — one bound component (ADR-032) =====
`{{ preview }}` is the only read of the component on this page, so an event
that changes only its state (a playground chip, an accordion toggle) patches
the preview's subtree instead of re-rendering the page. Keep it the bare
variable.
{% endcomment %}
{{ preview }}
{% if client_script_url %}<script src="{{ client_script_url }}" defer></script>{% endif %}

<section id="dc-usage" class="dc-section">
  {% card title="Usage" %}
    {% comment %}
    The two-file example a developer actually writes: the LiveView that owns
    the component and the template line that renders it (`_usage_snippet`).
    {% endcomment %}
    <div class="dc-subtitle">views.py</div>
    {{ usage_html.view }}
    <div class="dc-subtitle">my_template.html</div>
    {{ usage_html.template }}
    {% if events %}
    <p class="dc-note">Events this component sends to the view: {% for ev in events %}<code>{{ ev }}</code>{% if not forloop.last %}, {% endif %}{% endfor %}.</p>
    {% endif %}
    {% if client_script %}
    <p class="dc-note">Needs its script on the page: <code>&lt;script src="{&#37; static '{{ client_script }}' &#37;}"&gt;&lt;/script&gt;</code>. djust ships it; without it the markup renders but does not update in the browser.</p>
    {% endif %}
    {% if unstyled_class_root %}
    <p class="dc-note">This is the <code>{&#37; theme_{{ name }} &#37;}</code> tag, which follows your theme. The <code>{{ unstyled_class }}</code> Python class (<code>from djust.components import {{ unstyled_class }}</code>) renders the same component <strong>unstyled</strong>: no stylesheet djust ships has a rule for its <code>{{ unstyled_class_root }}</code> classes, so you style it yourself — its docstring lists them.</p>
    {% endif %}
    {% if client_hook %}
    <p class="dc-note dc-note--warning">Needs a client hook djust does not ship: <code>dj-hook="{{ client_hook }}"</code>. The markup renders, but the interaction described above is yours to add — register <code>window.djust.hooks.{{ client_hook }} = { mounted() { … } }</code> before <code>client.js</code> loads (see the <a href="{{ docs_hooks_url }}" rel="noopener">hooks guide</a>).</p>
    {% endif %}
  {% endcard %}
</section>

{% if props_rows %}
<section id="dc-props" class="dc-section">
  {% card title="Props" %}
    {% theme_table headers=props_headers rows=props_rows class="dc-props" %}
  {% endcard %}
</section>
{% elif params_rows %}
<section id="dc-props" class="dc-section">
  {% card title="Parameters" %}
    {% theme_table headers=params_headers rows=params_rows class="dc-props" %}
  {% endcard %}
</section>
{% endif %}

{% if a11y_rows %}
<section id="dc-a11y" class="dc-section">
  {% card title="Accessibility" %}
    {% theme_table headers=a11y_headers rows=a11y_rows %}
  {% endcard %}
</section>
{% endif %}

{% if available_slots %}
<section id="dc-slots" class="dc-section">
  {% card title="Slots" %}
    <div class="dc-badges">{% for slot in available_slots %}{% theme_badge slot variant="secondary" %}{% endfor %}</div>
  {% endcard %}
</section>
{% endif %}

{% comment %}
Collapsed by default: the paths to override and the template source are for
the reader who has decided to change the component, not the one choosing it.
A native `details` — the framework has no block-form collapsible yet.
{% endcomment %}
<details id="dc-source" class="dc-section dc-details">
  <summary>Source &amp; styles</summary>
  {% card %}
    {% theme_table headers=styles_headers rows=styles_rows %}
    {% if css_variables %}
    <div class="dc-subtitle" id="dc-css-variables">CSS variables</div>
    <div class="dc-badges">{% for var in css_variables %}{% theme_badge var variant="secondary" %}{% endfor %}</div>
    {% endif %}
    {% if template_source %}
    <div class="dc-subtitle">Template source — {{ name }}.html</div>
    {{ template_source_html }}
    {% endif %}
  {% endcard %}
</details>

<nav class="dc-pager" aria-label="Previous and next component">
  {% for item in pager_items %}{% theme_nav_item item.label item.url class="dc-pager-link" navigate=True %}{% endfor %}
</nav>
</article>

<aside class="dc-rail" aria-label="On this page">
  {% table_of_contents items=toc_items title="On this page" %}
</aside>
{% endblock %}