{% extends 'base.html.twig' %}
{% block body %}
    <!-- login page for iAnnotate app -->
    {% include 'iannotate-navigation.html.twig' %}
    <div class="main container-fluid"  {{  stimulus_controller('login') }}>
    <div class="row">
        <div class="col">
           <h4>Welcome to the iAnnotate Site</h4>
            <p>This site supports the ability to select from over 100,000 images from the National Aeronautical and Space Administration (NASA), and add pointers to portions of the image for use in online dialog.</p>
            <p>After logging in, users will be able to search for images, and add graphics which highlight a point or region of the image. A URL can then be built to support a user's annotation (commentary) referencing the selection of the image.</p>
            <div style="margin:10px;">
                <img src="{{ asset('images/iannotate-sample.png') }}">
            </div>
            <h4>Who Would Use This?</h4>
            <p>The application is ideal for:
                <ul>
                <li>Hobbyists interested in discussing some of the latest images from space.</li>
                <li>Educators looking to reference parts of large images to explain space phenomena.</li>
                <li>Students in engineering and science discussing parts of spacecrafts, launch vehicles, satellites, and any device used in space exploration.</li>
            </ul>
            </p>
            <p>Details of how to use this application may be found by pressing the HELP button at the top right part of the web page.</p>
            <p>Note that while you are required to log in, Electric Book Company does not use cookies to track any searches or annotations.</p>


        </div> <!-- left col -->
        <div class="col">
            <div id="idProviderPanel">
                <h3>Log In:</h3>
                <div id="g_id_onload"
                     data-client_id={{ google_client_id }}
                     data-callback="handleGoogleCredentialResponse">
                </div>
                <div class="g_id_signin"
                     data-type="standard"
                     data-theme="filled_blue"
                     data-size="large"
                     data-theme="outline"
                     data-text="sign_in_with"
                     data-shape="rectangular"
                     data-logo_alignment="left">
                </div>
                <div class="error" id="googleError">

                </div>
                <div id="linkedInLoginPanel" >
                    <a href="https://www.linkedin.com/oauth/v2/authorization?redirect_uri={{ li_redirect }}&response_type=code&state={{ app_secret }}&scope=profile%20email%20openid&client_id={{ li_client_id }}">
                        <img src="{{ asset('images/linkedin-signon.png') }}" alt="Sign in with LinkedIn">
                    </a>
                </div>
                <div class="error" id="linkedInError">
                    {% if linkedIn_error is defined %}
                      <p>{{ linkedIn_error }}</p>
                    {% endif %}
                </div>


            </div>

            {% if env == 'dev' %}
            <div>
                <div class="form-control">
                    {{ form_start(userform) }}
                    <span style="font-weight:bold">Premium Account Users:</span>
                    {{ form_row(userform.uid,{'label': "User ID:"}) }}
                    {{ form_row(userform.pw,{'label': "Password:"}) }}
                    {{ form_row(userform.submit,{'label': "Submit"}) }}

                    <div class="error">
                        {{ form_errors(userform) }}
                    </div>
                    {{ form_end(userform) }}
                </div> <!-- form control -->
            </div>
            {% endif %}

        </div>
    </div> <!-- top row -->
    </div> <!-- top container -->
    {% include 'footer.html.twig' %}

    <script>
        function handleGoogleCredentialResponse(response) {
            document.getElementById("googleError").innerHTML = "";
            // Send the ID token to your PHP backend for verification
            fetch('/connect/google/check', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ credential: response.credential })
            })
                .then(response => response.json())
                .then(data => {

                    // Handle successful login or error
                    if (data.oauth2Status === 'success') {
                        window.location.href = '{{ path('site-search') }}';
                    } else {
                        document.getElementById("googleError").innerHTML = data.message;
                    }
                })
                .catch(error => {
                    console.error('Error sending credential to backend:', error);
                    document.getElementById("googleError").innerHTML = error.toString();
                });
        }
    </script>

{% endblock %}