{% extends 'django_cotton_gallery/base.html' %} {% load i18n %} {% block title %}{{ component_name }}{% endblock %} {% block content %}

{{ component_name }}

{% if description %}

{{ description }}

{% endif %} {% if snake_case_mismatch %} {% comment %} Friendly explanation when the preview will fail because the filename has hyphens but Cotton is in snake_case mode. Pre-empts the cryptic "TemplateDoesNotExist" / "cannot unpack NoneType" errors and points the user at the Insights page where the full diagnosis lives. {% endcomment %} {% trans "Naming mismatch — this preview will fail." %} {% blocktranslate %}This component's filename has a hyphen, but COTTON_SNAKE_CASED_NAMES = True in your settings — Cotton looks for the underscored version and can't find it.{% endblocktranslate %} {% trans "See full report" %} {% endif %}
<c-{{ tag_path }} /> {% trans "Raw" %} {% trans "Compare" %} {% comment %} Share — copies the live URL (preview.js keeps it in sync with the form via history.replaceState) so a teammate can jump straight into the same playground state. The cotton tag itself is already copyable via the button on the preview's code panel below. {% endcomment %} {% comment %} Lint badge — clickable summary of @prop / consistency for this component. Click toggles the inline issues panel below; if the component is already clean, the badge is informational and the panel is empty. {% endcomment %} {% if lint.errors %} {% elif lint.warnings %} {% elif lint.hints %} {% else %} {% trans "Lint clean" %} {% endif %}
{% if lint.issues %} {% endif %}
{% trans "Viewport" %}
{% trans "Bg" %}
{% trans "Loading preview…" %}
Cotton
{% if auto_props or has_slots or accepts_attrs %} {% endif %}
{% if not auto_props %}

{% trans "This component doesn't define any props." %}

{% else %} {% for prop in auto_props %} {% endfor %}
{% trans "Prop" %}{% trans "Type" %}{% trans "Default" %}{% trans "Description" %}
{{ prop.name }} {% if prop.required %}required{% endif %} {% if prop.deprecated != None %}deprecated{% endif %} {% if prop.hidden %}hidden{% endif %} {% if prop.type == 'boolean' %}boolean {% elif prop.type == 'select' %}{{ prop.options|join:" | " }} {% elif prop.type == 'number' %}number {% else %}string{% endif %} {% if prop.has_default %}{{ prop.default|default:'""' }}{% else %}—{% endif %} {{ prop.description|default:"—" }} {% if prop.deprecated %}
{{ prop.deprecated }}{% endif %}
{% endif %}
{% endblock %}