{% 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.changes|length > 0 -%}
                <div class="my-2 ms-sm-3">Introduced in <a href="https://github.com/TYPO3/TYPO3.Icons/releases/tag/{{ 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', 'status', 'spinner'] -%}
        <div class="mb-4">
            <div class="iconstage">
                <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.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.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>

        <h3 class="my-3">Markup</h3>
        {{ makros.codeblock(icon._inline, 'svg') }}

        <h3 class="my-3">Inline</h3>
        {%- 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>
        {%- 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 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">CSS Background Image</h3>
        {%- 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>
        {%- 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 %}