{%- extends "theming/base.html" -%}

{%- set component_title = (component[0]|upper ~ component[1:])|replace("_", " ") if component else none -%}
{%- set styles = {
            "experimental": "danger",
            "recommended": "success",
            "custom": "info",
    } -%}

{%- block subtitle -%}
    {{- ui.subtitle_item(component_title) if component_title }}
    {{- ui.subtitle_item("Components") }}
    {{- super() }}
{%- endblock %}


{%- block breadcrumb_content -%}
    {{ super() }}
    {{- ui.breadcrumb(_("Components"), href=h.url_for("theming.component"), active=not component) }}
    {{- ui.breadcrumb(_(component_title), href=h.url_for("theming.component"), active=component) if component_title}}
{%- endblock %}


{%- block secondary_content -%}
    {{ super() }}

    {%- if available_components -%}

        {%- call ui.util.call(ui.sidebar_nav, title=_("Components")) -%}
            {%- for name in available_components -%}
                {%- call ui.util.call(ui.sidebar_nav_item, href=h.url_for("theming.component", component=name), active=component==name) -%}
                    {{ (name[0]|upper ~ name[1:])|replace("_", " ") }}
                    {%- with category=ref[name].category %}
                        {{ ui.badge(category.value, style=styles[category.value]) if category.value != "essential" }}
                    {%- endwith %}
                {%- endcall %}

            {%- endfor %}
        {%- endcall %}
    {%- endif %}
{%- endblock %}

{%- block content_primary_nav -%}
    {{ ui.content_nav_item("Overview", href=h.url_for("theming.component", component=component), active=request.endpoint == "theming.component") }}
{%- endblock %}

{%- block primary_content_inner -%}
    {%- include "theming/components/" ~ component ~ ".html" -%}
{%- endblock %}