{% if context.get('panels') %}
    <p>Color is used to represent different subarrays, not different panels/tents.</p>
    <p>The first number on the panel is the panel id</p>
    <p>The second number on the panel is the panel type - 1 is corner, 2 is north/south, 3 is east/west, 4 is middle</p>
    <p>The third number on the panel is the wind zone it is in - 1 is A, 2 is B, 3 is C, and so on</p>
    <p>Areas shaded <span style="color:red">red</span> indicates wind zone A</p>
    <p>Areas shaded <span style="color:green">green</span> indicates wind zone B</p>
    <p>Areas shaded <span style="color:blue">blue</span> indicates wind zone C</p>
    <p>Areas shaded <span style="color:black">black</span> indicates wind zone D</p>
    <p>Areas shaded <span style="color:purple">purple</span> indicates wind zone E (Single Tilt only. No color indicates E)</p>
    <p>Areas shaded <span style="color:grey">grey</span> indicates wind zone F</p>
    <p>Areas shaded <span style="color:hotpink">hotpink</span> indicates wind zone G</p>
    <p>Areas shaded <span style="color:yellow">yellow</span> indicates wind zone H</p>
    <p>Areas shaded <span style="color:orange">orange</span> indicates wind zone I</p>
    <p>Areas shaded <span style="color:forestgreen">forestgreen</span> indicates wind zone J</p>
    <p>In Single tilt, no shade indicates wind zone K. In Dual tilt, no shade indicates wind zone E.</p>
    <p>The current L_B is {{ context['l_b']|format_number }} inches</p>
    {% if context['buildings']|length == 0 %}
        <p>Unable to perform wind zone analysis - no building edges provided.</p>
    {% endif %}
    <svg width="{{ context['size'][0] }}" height="{{ context['size'][1] }}">
        {% for building in context['buildings'] %}
            <polygon fill="white" stroke="blue" points="{{ building.svg_points(context['size']) }}"></polygon>
        {% endfor %}
        {% for idx in range(context['modules']|length) %}
            <polygon fill="{{ context['colors'][(context['panels'][idx].subarray - 1) % (context['colors']|length)] }}" stroke="black" points="{{ context['modules'][idx].svg_points(context['size']) }}"></polygon>
            <text text-anchor="middle" x="{{ context['panels'][idx].coordinate.x }}" y="{{ context['size'][1] - context['panels'][idx].coordinate.y }}">{{ context['panels'][idx].id }} - {{ context['panels'][idx].panel_type.number() }} - {{ context['panels'][idx].wind_zone }}</text>
        {% endfor %}
        {% for polygon in context['lb_polygons'] %}
            <polygon fill="{{ polygon.color }}" stroke="{{ polygon.color }}" fill-opacity="0.5" points="{{ polygon.svg_points(context['size']) }}"></polygon>
        {% endfor %}
    </svg>
     <p>
        <h1>Panels</h1>
        <table border="1px solid black">
            <tr>
                <th>Subarray</th>
                <th>id</th>
                <th>Panel Type</th>
                <th>Wind Zone</th>
                <th>orig-x</th>
                <th>orig-y</th>
                <th>orig-rotation</th>
                <th>x</th>
                <th>y</th>
                <th>rotation</th>
            </tr>
        {% for panel in context['panels'] %}
            <tr>
                <td>{{ panel.subarray }}</td>
                <td>{{ panel.id }}</td>
                <td>{{ panel.panel_type }}</td>
                <td>{{ panel.wind_zone }}</td>
                <td>{{ panel.original_coordinate.x }}</td>
                <td>{{ panel.original_coordinate.y }}</td>
                <td>{{ panel.original_coordinate.rotation }}</td>
                <td>{{ panel.coordinate.x }}</td>
                <td>{{ panel.coordinate.y }}</td>
                <td>{{ panel.coordinate.rotation }}</td>
            </tr>
        {% endfor %}
        </table>
    </p>

    <!--
    {% for panel in context['panels'] %}Panel(subarray={{panel.subarray}}, id={{panel.id}}, panel_type={{panel.panel_type}}, wind_zone={{panel.wind_zone}}, fuzzy_wind_zone={{panel.fuzzy_wind_zone}}, original_coordinate=Coordinate({{panel.original_coordinate.x}}, {{panel.original_coordinate.y}}, {{panel.original_coordinate.rotation}}), coordinate=Coordinate({{panel.coordinate.x}}, {{panel.coordinate.y}}, {{panel.coordinate.rotation}})),
{% endfor %}
    {% for subarray in context['subarrays'] %}Subarray(subarray_number={{subarray.subarray_number}}, size={{subarray.size}}, start_row={{subarray.start_row}}),
{% endfor %}
    -->

    <p>
        <h1>Subarrays</h1>
        <table>
        {% for subarray in context['subarrays'] %}
            <tr>
                <th>Number</th>
                <th>Size</th>
            </tr>
            <tr>
                <td>{{ subarray.subarray_number }}</td>
                <td>{{ subarray.size }}</td>
            </tr>
        {% endfor %}
        </table>
    </p>
    <hr />
{% endif %}
<p>Test DXF upload visualization</p>
<p>Upload your aurora dxf file, click next and we will process it and show you a visualization</p>
<p>This uses the values set in <a href="{{ url_for('site_characterization') }}">site characterization</a> for system/module type information</p>
<form action="" method="post" enctype="multipart/form-data">
    {{ form.csrf_token }}
    <div class="form_section">
        <h3>Array Information</h3>

        <div class="system_data_upload">
            <span class="system_data_title">System Data 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">
                    <span class="upload_field_text">
                        {{ field.name }}
                    </span>
                    {{ field }}
                    {% if field.errors %}
                        <span class="error_message">{{ field.errors[0] }}</span>
                    {% endif %}
                </div>
            {% endfor %}
            <input type="submit" class="button" name="submit_button" value="Upload">
        </div>
    </div>
</form>