<article class="system__wrapper">
    <header>
        <h1 id="systems">
            <%= systems.filter(system => system.status !== 'soon').length %> detailed body systems
        </h1>
        <aside>
            The <%= site.site_name %> app includes <strong><%= systems.filter(system => system.status !== 'soon').length %></strong> body systems, which can be hidden or shown (in layers) and colored to easily distinguish the individual anatomical parts.
            All body systems can be viewed individually or in customizable combinations.
        </aside>
    </header>
    <section>
        <ul class="system__list">
            <% systems.forEach((system, index)=> { %>
                <li onclick="zoom('<%= system.slug %>')"
                    class="system system--<%= system.slug %> system--<%= system.status %> <%= index === 0 ? 'system--selected' : '' %>">
                    
                    <%- include('/system-icons/'+system.slug+'.svg') %>
                    <span>
                        <%= system.name %>
                    </span>
                </li>
                <% }) %>
        </ul>
        <div class="system__zoom-wrapper">
            <img class="zoom__image--bkg %>"
                src="./assets/images/systems/layers/bkg.png" alt="background">
            <% systems.filter(system => system.status !== 'soon').forEach((system, index)=> { %>
                <img class="zoom__image zoom__image--<%= system.slug %> <%= index === 0 ? 'zoom__image--visible' : '' %>"
                    src="./assets/images/systems/layers/<%= system.slug %>.png" alt="<%= system.name %>"
                    title="<%= system.name %>">
                <% }) %>
        </div>
    </section>
</article>

<script>

    function zoom(slug) {

        const thisIconClass = 'system--' + slug;
        let thisIconImage = document.querySelector('.' + thisIconClass);

        thisIconImage.classList.add('system--selected')

        let allIconImages = document.querySelectorAll('.system');

        for (let elem of allIconImages) {
            if (!elem.classList.contains(thisIconClass)) {
                elem.classList.remove('system--selected')
            }
        }

        const thisZoomClass = 'zoom__image--' + slug;
        let thisZoomImage = document.querySelector('.' + thisZoomClass);

        thisZoomImage.classList.add('zoom__image--visible')

        let allZoomImages = document.querySelectorAll('.zoom__image');

        for (let elem of allZoomImages) {
            if (!elem.classList.contains(thisZoomClass)) {
                elem.classList.remove('zoom__image--visible')
            }
        }
    }



</script>
