{% extends "_layout.html.twig" %}
{% import "_makros.html.twig" as makros %}
{% block title %}{{ icon.identifier }} - {{ category.title }}{% endblock %}
{% block content %}

    <nav>
        <ul class="breadcrumb mb-0 text-muted bg-transparent p-0">
            <li class="breadcrumb-item"><a href="{{ pathPrefix }}index.html">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ pathPrefix }}icons/{{ category.identifier }}.html">{{ category.title }}</a></li>
            <li class="breadcrumb-item">{{ icon.identifier }}</li>
        </ul>
    </nav>

    <div class="mb-4">
        <h1 class="h2 mb-2">{{ icon.identifier }}</h1>
        <div class="d-sm-flex">
            <div class="my-2 flex-grow-1">
                {%- if icon._meta.tags|length > 0 -%}
                    <strong>Tags:</strong>
                    {{ icon._meta.tags|join(', ') }}
                {%- endif -%}
            </div>
            {%- if icon._meta.bidi -%}
                <div class="my-2">
                    <span class="badge bg-primary" title="This icon automatically flips in right-to-left (RTL) languages">BiDi</span>
                </div>
            {%- endif -%}
            {%- if icon._meta.changes|length > 0 -%}
                <div class="my-2 ms-sm-3">Introduced in <a href="https://github.com/TYPO3/TYPO3.Icons/releases/tag/v{{ icon._meta.changes.0 }}" target="_blank" rel="noopener">v{{ icon._meta.changes.0 }}</a></div>
                {%- set available = false -%}
                {%- for typo3version, version in typo3.versions -%}
                    {%- if version in icon._meta.changes %}{% set available = true %}{% endif -%}
                {%- endfor -%}
                {%- if available -%}
                <div class="my-2 ms-sm-3">
                    Available in TYPO3
                    {% for typo3version, version in typo3.versions %}{% if version in icon._meta.changes %}<span class="badge bg-primary ">{{ typo3version }}</span> {% endif %}{% endfor %}
                </div>
                {%- endif -%}
            {% endif %}
        </div>
    </div>

    {%- if category.identifier in ['actions', 'apps', 'content', 'default', 'form', 'information', 'mimetypes', 'module', 'status', 'spinner'] -%}
        <div class="mb-4">
            <div class="iconstage"{% if category.identifier in ['module'] %} style="--iconstage-icon-base-size: 32"{% endif %}>
                <div class="iconstage-icon">
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: icon.identifier,
                        iconSize: 'auto',
                        iconSpinning: category.rendering.spinning
                    } -%}
                </div>
            </div>
        </div>
    {%- endif -%}

    {%- if 'actions-brand' in icon.identifier -%}
    <div class="mb-4">
        <div class="alert alert-info">
            This work includes material that may be protected as a trademark in some jurisdictions. If you want to use it, you have to ensure that you have the legal right to do so and that you do not infringe any trademark rights.
            The use of these trademarks does not indicate endorsement of the trademark holder by TYPO3, nor vice versa. See the trademark owner for rules about appropriate use of their trademarks.
        </div>
    </div>
    {%- endif -%}

    {%- if category.rendering.preview -%}
        <div class="section">
            {%- set colors = ['light', 'dark'] -%}
            {%- for color in colors -%}
                <div class="preview">
                    {%- set sizes = ['mega', 'large', 'medium', 'small', 'default'] -%}
                    {%- for size in sizes -%}
                        <div class="preview-item" data-color="{{ color }}" data-size="{{ size }}">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: icon.identifier,
                                iconSize: size,
                                iconSpinning: category.rendering.spinning
                            } -%}
                        </div>
                    {%- endfor -%}
                </div>
            {%- endfor -%}
        </div>
    {%- endif -%}

    {%- if category.rendering.menuview -%}
        <div class="section">
            <h2 class="mb-3">Module Menu Preview</h2>
            <div class="menuview">
                <div class="menuview-item">
                    {%- for colorVariant in ['light', 'dark', 'accent1', 'accent2', 'accent3'] -%}
                    <span class="modulemenu-preview" data-color="{{ colorVariant }}">
                        <span class="modulemenu-action">
                            <span class="modulemenu-icon">
                                {%- include '_icon.html.twig' with {
                                    iconIdentifier: icon.identifier,
                                    iconSize: 'medium',
                                    iconSpinning: category.rendering.spinning
                                } -%}
                            </span>
                            <span class="modulemenu-name">{{ icon.identifier }}</span>
                        </span>
                    </span>
                    {%- endfor -%}
                </div>
            </div>
        </div>
    {%- endif -%}

    {%- if category.rendering.buttons -%}
        <div class="section">
            <h2 class="mb-3">Buttons</h2>
            <p>
                <span class="btn btn-default">
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: icon.identifier,
                        iconSize: 'small',
                        iconSpinning: category.rendering.spinning
                    } -%}
                </span>
                <span class="btn btn-dark">
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: icon.identifier,
                        iconSize: 'small',
                        iconSpinning: category.rendering.spinning
                    } -%}
                </span>
            </p>
            <p>
                <span class="btn btn-default">
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: icon.identifier,
                        iconSize: 'small',
                        iconSpinning: category.rendering.spinning
                    } -%}
                    Button Label
                </span>
                <span class="btn btn-dark">
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: icon.identifier,
                        iconSize: 'small',
                        iconSpinning: category.rendering.spinning
                    } -%}
                    Button Label
                </span>
            </p>
            <p>
                <span class="btn btn-default" style="width: 300px;">
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: icon.identifier,
                        iconSize: 'small',
                        iconSpinning: category.rendering.spinning
                    } -%}
                    Button Label
                </span>
                <span class="btn btn-dark" style="width: 300px;">
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: icon.identifier,
                        iconSize: 'small',
                        iconSpinning: category.rendering.spinning
                    } -%}
                    Button Label
                </span>
            </p>
        </div>
    {%- endif -%}

    {%- if category.rendering.buttons and icon._meta.bidi -%}
        <div class="section">
            <h2 class="mb-3">BiDi Comparison (LTR vs RTL)</h2>
            <div class="row">
                <div class="col-md-6" dir="ltr">
                    <h3 class="h5 mb-3">LTR (Left-to-Right)</h3>
                    <p>
                        <span class="btn btn-default">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: icon.identifier,
                                iconSize: 'small',
                                iconSpinning: category.rendering.spinning
                            } -%}
                        </span>
                        <span class="btn btn-dark">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: icon.identifier,
                                iconSize: 'small',
                                iconSpinning: category.rendering.spinning
                            } -%}
                        </span>
                    </p>
                    <p>
                        <span class="btn btn-default">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: icon.identifier,
                                iconSize: 'small',
                                iconSpinning: category.rendering.spinning
                            } -%}
                            Next
                        </span>
                    </p>
                </div>
                <div class="col-md-6" dir="rtl">
                    <h3 class="h5 mb-3">RTL (Right-to-Left)</h3>
                    <p>
                        <span class="btn btn-default">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: icon.identifier,
                                iconSize: 'small',
                                iconSpinning: category.rendering.spinning
                            } -%}
                        </span>
                        <span class="btn btn-dark">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: icon.identifier,
                                iconSize: 'small',
                                iconSpinning: category.rendering.spinning
                            } -%}
                        </span>
                    </p>
                    <p>
                        <span class="btn btn-default">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: icon.identifier,
                                iconSize: 'small',
                                iconSpinning: category.rendering.spinning
                            } -%}
                            التالي
                        </span>
                    </p>
                </div>
            </div>
        </div>
    {%- endif -%}

    {%- if category.rendering.overlay -%}
        <div class="section">
            <div class="preview">
                {%- set mainIcons = ['apps-filetree-folder-default', 'apps-filetree-folder-temp', 'apps-pagetree-page'] -%}
                {%- for mainIcon in mainIcons -%}
                    {%- set colors = ['light', 'dark'] -%}
                    {%- for color in colors -%}
                        {%- set sizes = ['mega', 'large', 'medium', 'small', 'default'] -%}
                        {%- for size in sizes -%}
                            <div class="preview-item" data-color="{{ color }}" data-size="{{ size }}">
                                {%- include '_icon.html.twig' with {
                                    iconIdentifier: mainIcon,
                                    iconOverlayIdentifier: icon.identifier,
                                    iconSize: size,
                                    iconSpinning: category.rendering.spinning
                                } -%}
                            </div>
                        {%- endfor -%}
                    {%- endfor -%}
                {%- endfor -%}
            </div>
        </div>
    {%- endif -%}

    <div class="section">
        <h2 class="mb-3">Usage</h2>

        {%- if icon._meta.bidi -%}
        <div class="alert alert-info">
            <strong>BiDi Support:</strong> This icon uses logical naming (start/end instead of left/right) and is designed for bidirectional support.
            See the usage examples below for implementation details.
        </div>
        {%- endif -%}

        <h3 class="my-3">Icon Identifier</h3>
        {{ makros.codeblock(icon.identifier) }}

        <h3 class="my-3">Markup</h3>
        {%- if icon._meta.bidi -%}
        <p class="text-muted small mb-2">⚠ BiDi NOT supported - Raw SVG cannot be flipped. Use inline or sprite methods for BiDi support.</p>
        {%- endif -%}
        {{ makros.codeblock(icon._inline, 'svg') }}

        <h3 class="my-3">Inline</h3>
        {%- if icon._meta.bidi -%}
        <p class="text-muted small mb-2">✓ BiDi supported - Icon will flip in RTL mode when using the <code>icon-bidi</code> class</p>
        {%- endif -%}
        {%- set inlineusage -%}
            {%- if not category.rendering.overlay -%}
                {%- include '_icon.html.twig' with {
                    pathPrefix: '',
                    iconInline: true,
                    iconIdentifier: icon.identifier,
                    iconSize: 'small',
                    iconSpinning: category.rendering.spinning
                } -%}
            {%- else -%}
                {%- include '_icon.html.twig' with {
                    pathPrefix: '',
                    iconInline: true,
                    iconIdentifier: 'apps-pagetree-page',
                    iconOverlayIdentifier: icon.identifier,
                    iconSize: 'small',
                    iconSpinning: category.rendering.spinning
                } -%}
            {%- endif -%}
        {%- endset -%}
        {{ makros.codeblock(inlineusage) }}

        <h3 class="my-3">Sprite</h3>
        {%- if icon._meta.bidi -%}
        <p class="text-muted small mb-2">✓ BiDi supported - Icon will flip in RTL mode when using the <code>icon-bidi</code> class</p>
        {%- endif -%}
        {%- set spriteusage -%}
            {%- if not category.rendering.overlay -%}
                {%- include '_icon.html.twig' with {
                    pathPrefix: '',
                    iconIdentifier: icon.identifier,
                    iconSize: 'small',
                    iconSpinning: category.rendering.spinning
                } -%}
            {%- else -%}
                {%- include '_icon.html.twig' with {
                    pathPrefix: '',
                    iconIdentifier: 'apps-pagetree-page',
                    iconOverlayIdentifier: icon.identifier,
                    iconSize: 'small',
                    iconSpinning: category.rendering.spinning
                } -%}
            {%- endif -%}
        {%- endset -%}
        {{ makros.codeblock(spriteusage) }}

        <h3 class="my-3">TYPO3 ViewHelper</h3>
        {%- if icon._meta.bidi -%}
        <p class="text-muted small mb-2">✓ BiDi supported</p>
        {%- endif -%}
        {%- if category.rendering.overlay -%}
            {{ makros.codeblock('<core:icon identifier="apps-pagetree-page" overlay="' ~ icon.identifier ~ '" size="small" />') }}
        {%- else -%}
            {{ makros.codeblock('<core:icon identifier="' ~ icon.identifier ~ '" size="small" />') }}
        {%- endif -%}

        <h3 class="my-3">TYPO3 Web Component</h3>
        {%- if icon._meta.bidi -%}
        <p class="text-muted small mb-2">✓ BiDi supported</p>
        {%- endif -%}
        {%- if category.rendering.overlay -%}
            {{ makros.codeblock('<typo3-backend-icon identifier="apps-pagetree-page" overlay="' ~ icon.identifier ~ '" size="small"></typo3-backend-icon>') }}
        {%- else -%}
            {{ makros.codeblock('<typo3-backend-icon identifier="' ~ icon.identifier ~ '" size="small"></typo3-backend-icon>') }}
        {%- endif -%}

        <h3 class="my-3">CSS Background Image</h3>
        {%- if icon._meta.bidi -%}
        <p class="text-muted small mb-2">⚠ BiDi NOT supported - Background images cannot be flipped with CSS. Use inline or sprite methods for BiDi support.</p>
        {%- endif -%}
        {%- set cssbackgroundimageusage -%}
.myclass {
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,{{ icon._inlineEscaped|raw|replace({"fill='currentColor'": "fill='%23fff'"}) }}");
}
        {%- endset -%}
        {{ makros.codeblock(cssbackgroundimageusage) }}

        <h3 class="my-3">Sass Background Variable</h3>
        {%- if icon._meta.bidi -%}
        <p class="text-muted small mb-2">⚠ BiDi NOT supported - Background images cannot be flipped with CSS. Use inline or sprite methods for BiDi support.</p>
        {%- endif -%}
        {%- set sassbackgroundvariable -%}
@import "@typo3/icons/dist/icons.scss";
@import "@typo3/icons/dist/scss/icons-variables-{{ icon.category }}.scss";

.myclass {
    background-size: 1em 1em;
    background-image: $icon-{{ icon.identifier }};
}
        {%- endset -%}
        {{ makros.codeblock(sassbackgroundvariable) }}

    </div>

    {%- if icon._meta.alias|length > 0 -%}
        <div class="section">
            <h2 class="mb-3">Alias</h2>
            <ul class="list-unstyled">
                {%- for alias in icon._meta.alias -%}
                    <li>{{ alias }}</li>
                {%- endfor -%}
            </ul>
        </div>
    {%- endif -%}

    <div class="section">
        <h2 class="mb-3">Download</h2>
        <p>
            <a class="btn btn-primary" href="{{ pathPrefix }}dist/{{ icon.svg }}">Download</a>
        </p>
    </div>

{% endblock %}