{% extends "layout.html.jinja" %}
{% set title = "Helix Calculator" %}
{% block contents %}
    <script>
        {%if context['corners'] and 'ff_cpp' is active_feature %}
            var corners_data = {{ context['corners']|tojson}};
            if (corners_data){
                console.log("Corners data :");
                console.log(corners_data);
            }
        {%endif%}
    </script>

    <script>
        var is_csv_available = {{ context['csv_available']|tojson|safe }};
    </script>

    <div id="spinner-panel" class="spinner-panel">
        <p>Uploading files. Please wait, this may take a while.</p>
        <i class="icon-spin6 animate-spin"></i>
    </div>

    {% if 'sf_session' in session %}
        <ul id="sf_msg_container" class="msg-container" style="display:none;">
        </ul>

        <div id="sf-spinner-panel" class="spinner-panel">
            <p>Loading DXF file from Salesforce. Please wait, this may take a while.</p>
            <i class="icon-spin6 animate-spin"></i>
        </div>
    {% endif %}

    {% if not context['csv_available'] %}
        <form action="" method="post" enctype="multipart/form-data">
            {{ form.csrf_token }}
            <div class="form_section">
                <h3>Array Information</h3>
                <div class="system_data_upload initial_array_upload" id="text_upload_form">
                    <span class="system_data_title">Option 1: AutoCAD System Text File</span>
                    <span>A System Data file is needed in order to continue.</span>
                    {% for field in form.group('array_info') %}
                        <div class="upload_field button cad_block_upload">
                            <span class="upload_field_text">
                                <i class="icon-upload-cloud"></i>
                                Upload System Text Data
                            </span>
                            {{ field }}
                        </div>
                    {% endfor %}
				    <div id="error_container_txt" class="error_container">
		                    {% for field in form.group('array_info') %}
		                        {% if field.errors %}
		                            <span id="error_message_txt" class="error_message centered_error">{{ field.errors[0] }}</span>
		                        {% endif %}
		                    {% endfor %}

		                    {% if context['infinite_loop_detection_message'] %}
		                        <span id="error_message_txt_inf_loop" class="error_message centered_error">{{ context['infinite_loop_detection_message'] }}</span>
		                    {% endif %}

				    </div>
                </div>

                	<div class="system_data_upload initial_array_upload" id="dxf_upload_form">
                    <span class="system_data_title">Option 2: Aurora DXF File</span>
                    <span>An Aurora DXF file is needed in order to continue.</span>
                    {% for field in form.group('dxf_file') %}
                        <div class="upload_field button">
                            <span class="upload_field_text">
                                <i class="icon-upload-cloud"></i>
                                Upload System DXF
                            </span>
                            {{ field }}
                        </div>
                    {% endfor %}
				    <div id="error_container_dxf" class="error_container">
		                    {% for field in form.group('dxf_file') %}
		                        {% if field.errors %}
		                            <span id="error_message_dxf" class="error_message centered_error">{{ field.errors[0] }}</span>
		                        {% endif %}
		                    {% endfor %}
				    </div>
                	</div>

            </div>
            {% include 'navigation_buttons.html.jinja' %}
        </form>
    {% else %}
        <script>
            var panel_data = {{ context['panel_array']|tojson|safe }};
            var is_dual_tilt = {{ context['system_type']|is_dual_tilt|tojson }};
            var buildings_coordinates = {{ context['buildings']|tojson|safe }};
        </script>
        <div class="form_section">
            <h3>Array Information</h3>

            <div class="array_information">
                <div class="array_summary">
                    {% for value in context['summary_values'] %}
                        <div class="summary_item">
                            <span class="item_title">{{ value['label'] }}</span><br>
                            <span class="item_body">{{ value['value']|format_number }}</span>
                        </div>
                    {% endfor %}
                </div>
                <form class="system_data_upload change_array_form cad_block_upload" action="" method="post" enctype="multipart/form-data">
                    {{ form.csrf_token }}
                    {% for field in form.group('array_info') %}
                        <div class="upload_field button {{ field.render_kw['row_class'] }}" id="{{ field.id + '_row' }}">
                            <span class="upload_field_text">
{#                                <i class="icon-upload-cloud"></i>#}
                                {{ context['cad_file_name'] }}
                            </span>
                            {{ field }}
                        </div>
                    {% endfor %}

                    {% for field in form.group('dxf_file') %}
                        <div class="upload_field button {{ field.render_kw['row_class'] }}" id="{{ field.id + '_row' }}">
                            <span class="upload_field_text">
                                <!--i class="icon-upload-cloud"></i-->
                                {{ context['dxf_file_name'] }}
                            </span>
                            {{ field }}
                        </div>
                    {% endfor %}

                    <div id="error_container_txt" class="error_container">
		        	{% for field in form.group('array_info') %}
	                    {% if field.errors %}
	                        <span class="error_message">{{ field.errors[0] }}</span>
	                    {% endif %}
					{% endfor %}
                    </div>

                    <div id="error_container_dxf" class="error_container">
				        {% for field in form.group('dxf_file') %}
	                        {% if field.errors %}
	                            <span class="error_message">{{ field.errors[0] }}</span>
	                        {% endif %}
						{% endfor %}
                    </div>

                    <input type="submit" class="button" name="submit_button" style="display: none;" value="Upload File">
                </form>
                <div class="subarray_summary">
                    <div id="seismic_save" class="hidden">
                        <div class="left_container">
                            <div class="circle">!</div>
                            <span class="seismic_save_message"></span>
                        </div>
                        <div class="dismiss_button clickable"><i class="icon-close"></i></div>
                    </div>
                    <h4>Subarray Summary</h4>
                    <table class="summary_table" id="seismic_anchor_table">
                        <tr>
                            <th>Subarray</th>
                            {% for subarray in context['seismic_anchors'] %}
                                <th>{{ subarray.subarray_number }}</th>
                            {% endfor %}
                        </tr>
                        <tr id="needed_anchors">
                            <th>Seismic Anchors Needed</th>
                            {% for subarray in context['seismic_anchors'] %}
                                <td>{{ subarray.required_seismic_anchors }}</td>
                            {% endfor %}
                        </tr>
                        <tr id="current_anchors">
                            <th>Seismic Anchors Current</th>
                            {% for subarray in context['seismic_anchors'] %}
                                <td>{{ subarray.required_seismic_anchors }}</td>
                            {% endfor %}
                        </tr>
                        <tr id="subarray_weight">
                            <th>Weight</th>
                            {% for subarray in context['seismic_anchors'] %}
                                <td>{{ subarray.weight|round|format_number }}</td>
                            {% endfor %}
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="form_section">
              {% if context['is_drawing_inaccurate'] %}
               <div class="array_summary_warning"> {{ context['inaccurate_drawing_warning'] }} </div>
              {% endif %}

              <div class="array_visualization_header">


                <div id="overlay_control" class="header_action">
                    <div id="anchor_overlay" class="overlay_toggle clickable">ANCHORS</div>
                    <div id="all_overlay" class="overlay_toggle clickable">ALL</div>
                </div>
                <div id="zoom_control" class="header_action">
                    <div id="zoom_level">0%</div>
                    <div class="header_action">
                        <div class="clickable zoom_button" id="decrease_zoom">-</div>
                        {% for i in range(7) %}
                            <div class="clickable zoom_indicator" id="zoom_indicator_{{ i }}"></div>
                        {% endfor %}
                        <div class="clickable zoom_button" id="increase_zoom"><i class="icon-plus"></i></div>
                    </div>
                </div>
            </div>
            <div class="grey_line"></div>
            <div class="array_visualization_header" id="seismic_control_section">
                <div class="seismic_anchor_control">
                    <div id="add_seismic" class="seismic_control clickable">
                        <i class="icon-seismic-anchor"></i>
                        <span>Add Seismic</span>
                    </div>
                    <div id="remove_seismic" class="seismic_control clickable">
                        <i class="icon-seismic-anchor"></i>
                        <span>Remove Seismic</span>
                    </div>
                </div>
                <div class="seismic_anchor_control">
                    <div id="save_seismic_changes" class="seismic_control button clickable">Save</div>
                    <a href="./" class="seismic_control clickable cancel_button">Cancel</a>
                </div>
            </div>
            <canvas id="arrayCanvas" width="850" height="850"></canvas>
            <div id="legend_container">
                {% if context['system_type']|is_dual_tilt %}
                    <img style="display: none" class='legend anchors_mode'
                         src={{ url_for('static', filename='images/sp-helix-legend-dual-anchors.png') }}>
                    <img style="display: none" class='legend all_mode'
                         src={{ url_for('static', filename='images/sp-helix-legend-dual-all.png') }}>
                {% else %}
                    <img style="display: none" class='legend anchors_mode'
                         src={{ url_for('static', filename='images/sp-helix-legend-single-anchors.png') }}>
                    <img style="display: none" class='legend all_mode'
                         src={{ url_for('static', filename='images/sp-helix-legend-single-all.png') }}>
                {% endif %}
                <img class="anchor_colors_legend"
                     src={{ url_for('static', filename='images/sp-helix-legend-anchor-types.png') }}>
            </div>
            <a href="{{ url_for('test_dxf') }}">Wind Zone Check</a>
        </div>
        {% include 'navigation_buttons.html.jinja' %}
    {% endif %}
{% endblock %}