{% from 'snippets/BOM.jinja' import showBOM with context %}

{%- macro showDetail(content, parentChapter, isNested = false) -%}


{% if content['folder'] == 'components'  and content['images']|length > 1 %}
<header class="page--image" data-length="{{content['images']|length}}">

    {% for image in content['images'] %}
        <figure class="" index="{{loop.index0}}">
            <img src="{{ image['src'] }}" alt="{{image['alt']}}" />
            {% if image['alt'] %}
              <figcaption>{{image['alt']}}</figcaption>
            {% endif %}

        </figure>
    {% endfor %}

</header>
{%endif%}
<article class="{% if content['shortDescription'] %}fix-break-left{% else %}fix-break{% endif %} ">
    {%- if content['folder'] == 'components'  and content['images']|length == 1 -%}
    <figure class="">
        <img class="img--fullpage" src="{{ content['images'][0]['src'] }}" alt="{{content['images'][0]['alt']}}" />
            {% if content['images'][0]['alt'] %}
        <figcaption>{{content['images'][0]['alt']}}</figcaption>
        {% endif %}

    </figure>
    {%- endif -%}
    <section class="meta">
        {% if isNested %}
        {% else %}
        <span data-chapter-title>{{content['title']}}</span>
        {% endif %}

    </section>

    <header>

        <h1>{{content['title']}}</h1>

        {% if content['alsoKnownAs'] %}
        <h5>Also known as {{content['alsoKnownAs']}}</h5>
        {% endif %}

        {% if content['shortDescription'] %}
        <p>{{content['shortDescription'] }}</p>
        {% endif %}

        {% if content['sample'] %}
        <div class="sample fn-sample">
            <audio src="{{ content['sample'] }}"></audio>
            <svg class="icon play" width="12" height="13" viewBox="0 0 12 13" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M4 2.52588V9.52588L9.5 6.02588L4 2.52588Z" fill="black" />
            </svg>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="icon pause"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M3 9.5H5V2.5H3V9.5ZM7 2.5V9.5H9V2.5H7Z" fill="black" />
            </svg>
            <label>play sample (web only)</label>
        </div>


        {% endif %}
    </header>

    <section>
        {{content['body']}}
    </section>

    {% if content['image'] %}<img src="{{ content['image'] }}" alt="" />{% endif %} {% if content['material'] %}

    <dl>
        <dt>Material</dt>
        <dd>{{content['material']}}</dd>
        <dt>Usage</dt>
        <dd>{{content['usage']}}</dd>
        <dt>Typically found in</dt>
        <dd>{{content['whereToFind']}}</dd>
        {% if content['schematicSymbol'] %}
        <dt>Schematic symbol</dt>
        <dd><img src="{{content['schematicSymbol']}}" /></dd>
        {% endif %}
    </dl>
    {% endif %}
</article>
{%- endmacro -%}
