{% extends "layouts/default.htm" %}
{% block content %}

<div class="content">
    <div class="wrap">

        <div class="grid">

            <div class="grid__cell 12of12">
                <div class="portlet">

                    <div class="flex">

                        <div class="flex__item">
                            <div class="matrix u-mb-1rem">
                                {% set iterator = 0 %}
                                {% for i in range(1, 5) %}
                                <div class="matrix__row">
                                    {% for j in range(1, 5) %}
                                    <div class="matrix__cell">
                                        <p><strong>P{{iterator + 1}}</strong></p>
                                        <input class="matrix__input" type="number" name="{{iterator}}-x" id="{{iterator}}-x" placeholder="x">
                                        <input class="matrix__input" type="number" name="{{iterator}}-y" id="{{iterator}}-y" placeholder="y">
                                        <input class="matrix__input" type="number" name="{{iterator}}-z" id="{{iterator}}-z" placeholder="z">
                                    </div>

                                    {% set iterator = iterator + 1 %}
                                    {% endfor %}
                                </div>
                                {% endfor %}
                            </div>

                            <button name="buttonCalculate" id="buttonCalculate" class="button">Zobraz Plát</button>
                            <button name="buttonRestartCamera" id="buttonRestartCamera" class="button">Restart Kamery</button>
                        </div>

                        <div class="flex__item">
                            <div class="clicker-box" id="clickerBox">
                                <div class="clicker-box__area">
                                    <div class="clicker-box__point"></div>
                                </div>
                                <div class="clicker-box__result"></div>
                            </div>
                        </div>

                        <div class="flex__item">
                            <p>Vyberte tvar plátu.</p>
                            <div class="form-select">
                                <select name="selectShape" id="selectShape" class="form-select__inner">
                                    <option value="shapeDefault">Default</option>
                                    <option value="shape1" selected="selected">Tvar 1</option>
<!--                                    <option value="shape1">Tvar 1</option>-->
                                    <option value="shape2">Tvar 2</option>
                                </select>
                            </div>
                        </div>

                        <div class="flex__item">
                            <p>Zobraz bod</p>
                            <input type="checkbox" name="showPoint" id="showPoint">
                        </div>

                    </div>
                </div>
            </div>

            <div class="grid__cell 6of12">
                <h2>Bezierův plát</h2>
                <div class="portlet portlet--no-padding">
                    <div class="scene">
                        <div class="scene__inner">
                            <canvas id="scene_m"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid__cell 6of12">
                <h2>Osa X</h2>
                <div class="portlet portlet--no-padding">
                    <div class="scene">
                        <div class="scene__inner">
                            <canvas id="scene_x"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid__cell 6of12">
                <h2>Osa Y</h2>
                <div class="portlet portlet--no-padding">
                    <div class="scene">
                        <div class="scene__inner">
                            <canvas id="scene_y"></canvas>
                        </div>
                    </div>
                </div>
                <p></p>
            </div>

            <div class="grid__cell 6of12">
                <h2>Osa Z</h2>
                <div class="portlet portlet--no-padding">
                    <div class="scene">
                        <div class="scene__inner">
                            <canvas id="scene_z"></canvas>
                        </div>
                    </div>
                </div>
                <p></p>
            </div>

        </div>

    </div>
</div>

{% endblock %}