{% extends 'base.html.twig' %}
{% block body %}
    {% include 'iannotate-navigation.html.twig' %}
    {% if system_error %}
    <div class="error">
        {{ system_error }}
    </div>
    {% else %}
    {% if user %}
            <div class="imageControls">
                Marker Type:&nbsp;
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="stampType" id="stampTypePoint" value="point" checked >
                    <label class="form-check-label" for="stampType">
                        Point
                    </label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="stampType" id="stampTypeRegion" value="region" >
                    <label class="form-check-label" for="stampTypeRegion">
                        Region
                    </label>
                </div>

                &nbsp;&nbsp;
                Marker Color:
                <select id="stampColor" class="form-select-sm form-select-inline" aria-label="Marker color select">
                    <option {% if stamp_color == 'yellow' %}selected{% endif %} value="yellow">Yellow</option>
                    <option {% if stamp_color == 'red' %}selected{% endif %} value="red">Red</option>
                    <option {% if stamp_color == 'black' %}selected{% endif %} value="black">Black </option>
                </select>&nbsp;
                &nbsp;

                <button id="buildURL" type="button" class="btn btn primary">Make URL</button>
                <div id="svgInfo">Current Scale: </div>

            </div>

        {% endif %}
        <div class="main container">
          <div class="row">
            <div id="imageContainer" class="col-xl-6 col-xxl-5"> <!-- column for image display -->

                <svg id="svgImage" xmlns="http://www.w3.org/2000/svg"
                x="0" y="0" height="{{ svgprops.svgHeight }}" width=" {{  svgprops.svgWidth }}"
                viewBox="{{ svgprops.viewBox.x }} {{ svgprops.viewBox.y }} {{ svgprops.viewBox.width }} {{ svgprops.viewBox.height }} ">
                    <g id="imageGroup">
                        <image id="image" href="{{ svgprops.backgroundImage }}">
                    </image>
                    </g>
                </svg>

            </div> <!-- col for image display -->

                <div id="roiArea" class="col-xl-6 col-xxl-5"> <!-- region of interest column -->

                    <div id="regionOfInterestContainer">

                     <div id="regionOfInterest" style='background-image:url("{{ svgprops.backgroundImage }}")'>

                     </div>
                    </div>

                </div> <!-- region of interest column -->
                    <div class="col-xxl-2" id="regionOfInterestInfoArea">
                        <div id="regionOfInterestInfo">

                        </div>
                        <div id="imageMetaInfo">
                            {% if assetinfo == null %}
                                <p>No meta info available.</p>
                            {% else %}
                                <p><span style="font-weight:bold">Title: </span>{{ assetinfo.assetTitle }}</p>
                                <p><span style="font-weight:bold">NASA ID: </span>{{ assetinfo.assetId }}</p>
                                <p><span style="font-weight:bold">Description: </span></p>
                                <p>{{ assetinfo.assetDescription }}</p>
                            {% endif %}
                        </div>
                    </div>


            </div>  <!-- row for image and roi -->
        <div class="row">
        <div class="col-12">
            Full size original image may be found <a href="{{ svgprops.backgroundImage }}" target="_blank">here</a>.
        </div>

        </div>

        <input type="hidden" id="roi" value="{{ roi }}">
        {% if external_stamp_color is defined and external_stamp_color != null %}
        <input type="hidden" id="externalStampColor" value="{{  external_stamp_color }}">
        {% endif %}
        </div> <!-- main container -->
    {% endif %}
    {% include 'footer.html.twig' %}
{% endblock %}