{% extends 'base.html.twig' %}
{% block body %}
    {% include 'astro-navigation.html.twig' %}

    <div class="main container-fluid" >
        <div class="row">

<div class="fixed-width" id="astro-toc"> <!-- table of contents -->

<ul id="TOC" class="list-unstyled ps-0">
                {% set chapLink = 'chapter-' %}

                {% if chapters %}
                {% for chapter in chapters  %}

                    <li class="mb-1" >

                        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0"
                                data-bs-toggle="collapse" data-bs-target="#chapter-{{ loop.index }}" aria-expanded="false">
                            {{ chapter['title']|e }}
                        </button>
                        <div class="collapse hide" id="chapter-{{ loop.index }}">
                            <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                                {% for concept in chapter['topics'] %}
                                    <li>
                                    <a href="{{ concept['href'] }}" class="link-body-emphasis d-inline-flex text-decoration-none rounded">
                                        {{ concept['title']|e }}
                                    </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </li>

                {% endfor %}
                {% endif %}

            </ul>


    </li>  <!-- topmost list item -->

</div> <!-- table of contents -->

<div class="col"> <!-- right side topmost column -->

            <div class="container-fluid"> <!-- container for narrative and SVG -->
                <div class="row"> <!-- row for narrative and SVG -->

                    <div class="col-5" >
                        <div class="astro-tools">
                            <button id="zoomInText" ><i class="bi bi-zoom-in"></i></button>
                            &nbsp;
                            <button id="zoomOutText" ><i class="bi bi-zoom-out"></i></button>
                        </div>
                        <div class="astro"  id="narrativeContent">
                            <p id="noContent">Please select a content page.</p>
                        </div>
                        <div id="errorPanel" style="display:none;">

                        </div>
                    </div>
                    <div class="col-5">
                        <div class="astro-tools">
                            <button id="zoomInSvg" ><i class="bi bi-zoom-in"></i></button>
                            &nbsp;
                            <button id="zoomOutSvg" ><i class="bi bi-zoom-out"></i></button>
                        </div>
                    <!--    <div id="svg-wrapper">    -->
                            <div id="svg-content" >
                                <div id="introDiv">
                                    <p id="introText">
                                        No content selected.
                                    </p>
                                </div>
                            </div>

                  <!-- KCF      </div>  -->

                    </div>
                    <div id="ad-wrapper" class="col-2" >
                        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4350197627796875"
                                crossorigin="anonymous"></script>
                        <!-- astronomy-history -->
                        <ins class="adsbygoogle"
                             style="display:block"
                             data-ad-client="ca-pub-4350197627796875"
                             data-ad-slot="1897876614"
                             data-ad-format="auto"
                             data-full-width-responsive="true"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div> <!-- row for narrative and SVG -->

            </div>
               </div>
        </div> <!-- top row -->



    </div> <!-- main container -->
    {% if startup_concept is defined %}
        <input id="startupConcept" type="hidden" value="{{startup_concept }}" />
    {% endif %}

    {% include 'footer.html.twig' %}
{% endblock %}