{% block content %}
    <!-- Learn how to modify -->
    <!-- Update the text inside the div with "modal-body" class below in order to update the help info -->
    <div class="modal fade" id="geeModal" tabindex="-1" aria-labelledby="geeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="geeModalLabel">About this page</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                                <div class="modal-body">
                    <div class="container">
                        <h2>Display GEE layers on fixed size map</h2>
                        <p>This page is designed to provide visualization of layers from Google Earth Engine. In this template we are using Image Collection and User Asset layers.</p>
                        <ul>
                            <li>The layout and content of this page is defined in the template
                                located at
                                <mark>templates\WebApp\map_from_GEE.html</mark>
                                .
                            </li>
                            <li>For layout and styling we rely on standard bootstrap containers, however,
                                you can add your own CSS classes in the
                                <mark>WebApp\static\css\base.css</mark> and <mark>WebApp\static\css\gee_map.css</mark>
                                files.
                            </li>
                            </li>
                            <li>The custom interaction used for the search box is implemented through javaScript,
                                in
                                <mark>WebApp\static\js\map_from_GEE.js</mark>
                                .
                            </li>
                            <li>The code for this Django view is in the <strong>map_from_gee</strong> function, located in
                                <mark>WebApp\views.py</mark>
                            </li>
                            <li>The URL for this page is defined through the <strong>urlpatterns</strong>
                                array, in
                                <mark>SERVIR_AppTemplate\urls.py</mark>
                            </li>
                            <li>The text for this popup window is located at
                                <mark>templates\WebApp\map_from_GEE_about.html</mark>
                            </li>
                        </ul>
                        <p></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}